diff --git a/404.html b/404.html index d94c8b8..a02c2da 100644 --- a/404.html +++ b/404.html @@ -3,10 +3,8 @@ - - - MarkBind - Page not found - + + MarkBind - Page not found @@ -14,15 +12,29 @@ - - + -

404

File not found
Click here to go back to the home page.

+

404

File not found
Click here to go back to the home page.

+ diff --git a/404.page-vue-render.js b/404.page-vue-render.js index 9851374..dda0206 100644 --- a/404.page-vue-render.js +++ b/404.page-vue-render.js @@ -5,6 +5,6 @@ with(this){return _m(0)} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('p'),_c('div',{staticClass:"text-center"},[_c('p',{staticStyle:{"font-size":"10rem"}},[_v("404")])]),_v(" "),_c('div',{staticClass:"text-center"},[_c('p',{staticStyle:{"font-size":"1.5rem"}},[_v("File not found"),_c('br'),_v("Click "),_c('a',{attrs:{"href":"/"}},[_v("here")]),_v(" to go back to the home page.")])]),_c('p'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])])} +with(this){return _c('div',{attrs:{"id":"app"}},[_c('div',[_c('p'),_c('div',{staticClass:"text-center"},[_c('p',{staticStyle:{"font-size":"10rem"}},[_v("404")])]),_v(" "),_c('div',{staticClass:"text-center"},[_c('p',{staticStyle:{"font-size":"1.5rem"}},[_v("File not found"),_c('br'),_v("Click "),_c('a',{attrs:{"href":"/"}},[_v("here")]),_v(" to go back to the home page.")])]),_c('p')])])} }]; \ No newline at end of file diff --git a/about.html b/about.html index 25e2175..3c065e2 100644 --- a/about.html +++ b/about.html @@ -3,10 +3,8 @@ - - - MarkBind - About Us - + + MarkBind - About Us @@ -14,8 +12,7 @@ - - + @@ -23,11 +20,26 @@ 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
📖 💻

Past Members:

+ diff --git a/about.page-vue-render.js b/about.page-vue-render.js index 8b05c75..b1d1193 100644 --- a/about.page-vue-render.js +++ b/about.page-vue-render.js @@ -1,13 +1,13 @@ 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"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_m(0),_v(" "),_m(1)])} +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"}},[_m(0),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(1)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"flex-body"}},[_c('div',{attrs:{"id":"content-wrapper"}},[_c('h1',{staticClass:"display-3",attrs:{"id":"about-us"}},[_c('span',{staticClass:"anchor",attrs:{"id":"about-us"}}),_c('span',[_c('strong',[_v("About Us")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#about-us","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{staticClass:"lead"},[_v("MarkBind is a project "),_c('strong',[_v("based in "),_c('a',{attrs:{"href":"http://www.comp.nus.edu.sg/"}},[_v("National University of Singapore, School of Computing")])]),_v(", and is funded by an education grant from "),_c('a',{attrs:{"href":"https://nus.edu.sg/cdtl"}},[_v("NUS Center for Development of Teaching and Learning")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"glyphicon glyphicon-send",attrs:{"aria-hidden":"true"}}),_v(" You can "),_c('strong',[_v("email us")]),_v(" at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind")]),_v(" at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("comp.nus.edu.sg")])]),_v(" "),_c('p',[_c('span',{staticClass:"glyphicon glyphicon-console",attrs:{"aria-hidden":"true"}}),_v(" Interested in "),_c('strong',[_v("contributing to MarkBind")]),_v("? Visit the "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind"}},[_v("MarkBind project on GitHub")]),_v(".")]),_v(" "),_c('h2',{attrs:{"id":"contributors"}},[_c('span',{staticClass:"anchor",attrs:{"id":"contributors"}}),_v("Contributors ✨"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#contributors","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Mentors")]),_v(":")]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://www.comp.nus.edu.sg/~damithch/"}},[_c('strong',[_v("Damith C. Rajapakse")])]),_v(": "),_c('em',[_v("Project Mentor")]),_v(" since Aug 2016")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/ang-zeyu"}},[_c('strong',[_v("Ang Ze Yu")])]),_v(": "),_c('em',[_v("Project Mentor")]),_v(" since Jun 2022, "),_c('em',[_v("Team Lead")]),_v(" for Sep 2020 - May 2022")])]),_v(" "),_c('p',[_c('strong',[_v("Dev Team")]),_v(":")]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://www.github.com/jonahtanjz"}},[_c('strong',[_v("Jonah Tan Jun Zi")])]),_v(": "),_c('strong',[_c('em',[_v("Team Lead")])]),_v(" since Jun 2022, "),_c('em',[_v("Member")]),_v(" for Jan 2021 - May 2022")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/ryoarmanda"}},[_c('strong',[_v("Ryo Chandra Putra Aramanda")])]),_v(": "),_c('strong',[_c('em',[_v("Team Lead")])]),_v(" since Jun 2022, "),_c('em',[_v("Member")]),_v(" for Aug 2020 - May 2022")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/raysonkoh"}},[_c('strong',[_v("Koh Rayson")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2021, "),_c('em',[_v("Member")]),_v(" since Jan 2021")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/wxwxwxwx9"}},[_c('strong',[_v("Ong Wei Xiang")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2021, "),_c('em',[_v("Member")]),_v(" since Aug 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/kaixin-hc"}},[_c('strong',[_v("Hannah Chia Kai Xin")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2022, "),_c('em',[_v("Member")]),_v(" since Jan 2022")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/jovyntls"}},[_c('strong',[_v("Jovyn Tan Li Shyan")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2022, "),_c('em',[_v("Member")]),_v(" since Jan 2022")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/tlylt"}},[_c('strong',[_v("Liu Yongliang")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2022, "),_c('em',[_v("Member")]),_v(" since Aug 2021")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/ong6"}},[_c('strong',[_v("Ong Jun Xiong")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2022, "),_c('em',[_v("Member")]),_v(" since Aug 2021")])]),_v(" "),_c('p',[_v("Thanks goes to these wonderful people ("),_c('a',{attrs:{"href":"https://allcontributors.org/docs/en/emoji-key"}},[_v("emoji key")]),_v("):")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',[_c('tbody',[_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.yamgent.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/3168908?v=4?s=100","width":"100px;","alt":"Tan Wang Leng"}}),_c('br'),_c('sub',[_c('b',[_v("Tan Wang Leng")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=yamgent","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/ang-zeyu"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/3306138?v=4?s=100","width":"100px;","alt":"Ang Ze Yu"}}),_c('br'),_c('sub',[_c('b',[_v("Ang Ze Yu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=ang-zeyu","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"#projectManagement-ang-zeyu","title":"Project Management"}},[_v("📆")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/Gisonrg"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/4332224?v=4?s=100","width":"100px;","alt":"Jason Jiang"}}),_c('br'),_c('sub',[_c('b',[_v("Jason Jiang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Gisonrg","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/Chng-Zhi-Xuan"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/31084833?v=4?s=100","width":"100px;","alt":"Chng Zhi Xuan"}}),_c('br'),_c('sub',[_c('b',[_v("Chng Zhi Xuan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Chng-Zhi-Xuan","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://linkedin.com/in/aaronlah/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/14091939?v=4?s=100","width":"100px;","alt":"Aaron Chong"}}),_c('br'),_c('sub',[_c('b',[_v("Aaron Chong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=acjh","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/jamos-tay"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/19278089?v=4?s=100","width":"100px;","alt":"Jamos Tay"}}),_c('br'),_c('sub',[_c('b',[_v("Jamos Tay")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=jamos-tay","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://nicholaschuayunzhi.github.io/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/22221132?v=4?s=100","width":"100px;","alt":"Nicholas Chua"}}),_c('br'),_c('sub',[_c('b',[_v("Nicholas Chua")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=nicholaschuayunzhi","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.beyondthesprawl.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/1782590?v=4?s=100","width":"100px;","alt":"Tan Zhen Yong"}}),_c('br'),_c('sub',[_c('b',[_v("Tan Zhen Yong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Xenonym","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/rachx"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/16644412?v=4?s=100","width":"100px;","alt":"Rachael Sim"}}),_c('br'),_c('sub',[_c('b',[_v("Rachael Sim")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=rachx","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/wxwxwxwx9"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/37920115?v=4?s=100","width":"100px;","alt":"Ong Wei Xiang"}}),_c('br'),_c('sub',[_c('b',[_v("Ong Wei Xiang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=wxwxwxwx9","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/danielbrzn"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/251231?v=4?s=100","width":"100px;","alt":"Daniel Berzin Chua"}}),_c('br'),_c('sub',[_c('b',[_v("Daniel Berzin Chua")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=danielbrzn","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/openorclose"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/3646725?v=4?s=100","width":"100px;","alt":"Daryl Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Daryl Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=openorclose","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"http://www.comp.nus.edu.sg/~damithch"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/1673303?v=4?s=100","width":"100px;","alt":"Damith C. Rajapakse"}}),_c('br'),_c('sub',[_c('b',[_v("Damith C. Rajapakse")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=damithc","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"#mentoring-damithc","title":"Mentoring"}},[_v("🧑‍🏫")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/jonahtanjz"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/47470981?v=4?s=100","width":"100px;","alt":"Jonah Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Jonah Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=jonahtanjz","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/pulls?q=is%3Apr+reviewed-by%3Ajonahtanjz","title":"Reviewed Pull Requests"}},[_v("👀")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/nusjzx"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/24241939?v=4?s=100","width":"100px;","alt":"nusjzx"}}),_c('br'),_c('sub',[_c('b',[_v("nusjzx")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=nusjzx","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/alyip98"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/2277141?v=4?s=100","width":"100px;","alt":"Alfred Yip"}}),_c('br'),_c('sub',[_c('b',[_v("Alfred Yip")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=alyip98","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/ryoarmanda"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/24468110?v=4?s=100","width":"100px;","alt":"Ryo Armanda"}}),_c('br'),_c('sub',[_c('b',[_v("Ryo Armanda")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=ryoarmanda","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/pulls?q=is%3Apr+reviewed-by%3Aryoarmanda","title":"Reviewed Pull Requests"}},[_v("👀")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/le0tan"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/28982486?v=4?s=100","width":"100px;","alt":"Tan Yuanhong"}}),_c('br'),_c('sub',[_c('b',[_v("Tan Yuanhong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=le0tan","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://sijie123.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/631938?v=4?s=100","width":"100px;","alt":"Si Jie"}}),_c('br'),_c('sub',[_c('b',[_v("Si Jie")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=sijie123","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/yash-chowdhary"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/21968718?v=4?s=100","width":"100px;","alt":"Yash Chowdhary"}}),_c('br'),_c('sub',[_c('b',[_v("Yash Chowdhary")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=yash-chowdhary","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.linkedin.com/in/luyangkenneth/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/9073504?v=4?s=100","width":"100px;","alt":"Kenneth Lu"}}),_c('br'),_c('sub',[_c('b',[_v("Kenneth Lu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=luyangkenneth","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://raysonkoh.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/16506539?v=4?s=100","width":"100px;","alt":"Rayson Koh"}}),_c('br'),_c('sub',[_c('b',[_v("Rayson Koh")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=raysonkoh","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/crphang"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/4986717?v=4?s=100","width":"100px;","alt":"Phang Chun Rong"}}),_c('br'),_c('sub',[_c('b',[_v("Phang Chun Rong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=crphang","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/nbriannl"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/27397021?v=4?s=100","width":"100px;","alt":"nbriannl"}}),_c('br'),_c('sub',[_c('b',[_v("nbriannl")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=nbriannl","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/Tejas2805"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/35946746?v=4?s=100","width":"100px;","alt":"Tejas Bhuwania"}}),_c('br'),_c('sub',[_c('b',[_v("Tejas Bhuwania")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Tejas2805","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/marvinchin"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/17447681?v=4?s=100","width":"100px;","alt":"Marvin Chin"}}),_c('br'),_c('sub',[_c('b',[_v("Marvin Chin")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=marvinchin","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/amad-person"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/22164211?v=4?s=100","width":"100px;","alt":"Aadyaa Maddi"}}),_c('br'),_c('sub',[_c('b',[_v("Aadyaa Maddi")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=amad-person","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://kendrickang.github.io/me/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/38814428?v=4?s=100","width":"100px;","alt":"Kendrick Ang"}}),_c('br'),_c('sub',[_c('b',[_v("Kendrick Ang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=KendrickAng","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/dvrylc"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/6095637?v=4?s=100","width":"100px;","alt":"Daryl Chan"}}),_c('br'),_c('sub',[_c('b',[_v("Daryl Chan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=dvrylc","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://tlylt.github.io/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/41845017?v=4?s=100","width":"100px;","alt":"Liu YongLiang"}}),_c('br'),_c('sub',[_c('b',[_v("Liu YongLiang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=tlylt","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=tlylt","title":"Documentation"}},[_v("📖")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/pulls?q=is%3Apr+reviewed-by%3Atlylt","title":"Reviewed Pull Requests"}},[_v("👀")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://madanalogy.dev/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/42177597?v=4?s=100","width":"100px;","alt":"Ahmed Bahajjaj"}}),_c('br'),_c('sub',[_c('b',[_v("Ahmed Bahajjaj")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=madanalogy","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.zhongjun.me/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/27919917?v=4?s=100","width":"100px;","alt":"Hsu Zhong Jun"}}),_c('br'),_c('sub',[_c('b',[_v("Hsu Zhong Jun")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=dcshzj","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/kimberlyohq"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/60393696?v=4?s=100","width":"100px;","alt":"Kimberly"}}),_c('br'),_c('sub',[_c('b',[_v("Kimberly")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=kimberlyohq","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/hcwong"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/28432397?v=4?s=100","width":"100px;","alt":"Joshua Wong"}}),_c('br'),_c('sub',[_c('b',[_v("Joshua Wong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=hcwong","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://weasyl.com/~parclytaxel"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/54175463?v=4?s=100","width":"100px;","alt":"Jeremy Tan Jie Rui"}}),_c('br'),_c('sub',[_c('b',[_v("Jeremy Tan Jie Rui")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Parcly-Taxel","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/anubh-v"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/35621759?v=4?s=100","width":"100px;","alt":"Anubhav"}}),_c('br'),_c('sub',[_c('b',[_v("Anubhav")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=anubh-v","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/bchenghi"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/57175876?v=4?s=100","width":"100px;","alt":"Boh Cheng Hin"}}),_c('br'),_c('sub',[_c('b',[_v("Boh Cheng Hin")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=bchenghi","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.tawatawashi.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/7100187?v=4?s=100","width":"100px;","alt":"Hiroki Nishino"}}),_c('br'),_c('sub',[_c('b',[_v("Hiroki Nishino")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=tawAsh1","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/ong6"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/19247856?v=4?s=100","width":"100px;","alt":"Junx"}}),_c('br'),_c('sub',[_c('b',[_v("Junx")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=ong6","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=ong6","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://jyl123.github.io/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/24690889?v=4?s=100","width":"100px;","alt":"Li JiaYao"}}),_c('br'),_c('sub',[_c('b',[_v("Li JiaYao")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=JYL123","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://morninglit.github.io/Portfolio2/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/57279935?v=4?s=100","width":"100px;","alt":"Ambrose Liew"}}),_c('br'),_c('sub',[_c('b',[_v("Ambrose Liew")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=MorningLit","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/pr4aveen"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/2839596?v=4?s=100","width":"100px;","alt":"Praveen"}}),_c('br'),_c('sub',[_c('b',[_v("Praveen")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=pr4aveen","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/riyadh-h"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/69278589?v=4?s=100","width":"100px;","alt":"Riyadh H. Alzahrani"}}),_c('br'),_c('sub',[_c('b',[_v("Riyadh H. Alzahrani")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=riyadh-h","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/samuelfangjw"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/60355570?v=4?s=100","width":"100px;","alt":"Samuel Fang"}}),_c('br'),_c('sub',[_c('b',[_v("Samuel Fang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=samuelfangjw","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/thomastanck"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/829070?v=4?s=100","width":"100px;","alt":"Thomas Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Thomas Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=thomastanck","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/vig42"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/42461145?v=4?s=100","width":"100px;","alt":"Vighnesh Iyer"}}),_c('br'),_c('sub',[_c('b',[_v("Vighnesh Iyer")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=vig42","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://resumednh.netlify.app/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/53283766?v=4?s=100","width":"100px;","alt":"dao ngoc hieu"}}),_c('br'),_c('sub',[_c('b',[_v("dao ngoc hieu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=daongochieu2810","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://bandism.net/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/22633385?v=4?s=100","width":"100px;","alt":"Ikko Ashimine"}}),_c('br'),_c('sub',[_c('b',[_v("Ikko Ashimine")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=eltociear","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"http://www.jovyntan.com"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/61113575?v=4?s=100","width":"100px;","alt":"Jovyn Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Jovyn Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=jovyntls","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=jovyntls","title":"Documentation"}},[_v("📖")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/kaixin-hc"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/59471320?v=4?s=100","width":"100px;","alt":"Hannah"}}),_c('br'),_c('sub',[_c('b',[_v("Hannah")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=kaixin-hc","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=kaixin-hc","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/NaincyKumariKnoldus"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/87004609?v=4?s=100","width":"100px;","alt":"NaincyKumariKnoldus"}}),_c('br'),_c('sub',[_c('b',[_v("NaincyKumariKnoldus")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=NaincyKumariKnoldus","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/elroygohjy"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/77185324?v=4?s=100","width":"100px;","alt":"Elroy Goh"}}),_c('br'),_c('sub',[_c('b',[_v("Elroy Goh")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=elroygohjy","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/EltonGohJH"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/75515229?v=4?s=100","width":"100px;","alt":"Elton Goh"}}),_c('br'),_c('sub',[_c('b',[_v("Elton Goh")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=EltonGohJH","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/benluiwj"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/67570985?v=4?s=100","width":"100px;","alt":"benluiwj"}}),_c('br'),_c('sub',[_c('b',[_v("benluiwj")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=benluiwj","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=benluiwj","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/weiquu"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/48304907?v=4?s=100","width":"100px;","alt":"weiquu"}}),_c('br'),_c('sub',[_c('b',[_v("weiquu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=weiquu","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=weiquu","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/eeliana"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/62977276?v=4?s=100","width":"100px;","alt":"eeliana"}}),_c('br'),_c('sub',[_c('b',[_v("eeliana")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=eeliana","title":"Documentation"}},[_v("📖")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.linkedin.com/in/dominiclimkj/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/46486515?v=4?s=100","width":"100px;","alt":"Dominic Lim"}}),_c('br'),_c('sub',[_c('b',[_v("Dominic Lim")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=domlimm","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=domlimm","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/petermonky"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/39848410?v=4?s=100","width":"100px;","alt":"peter"}}),_c('br'),_c('sub',[_c('b',[_v("peter")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=petermonky","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/calvintanwj"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/61271749?v=4?s=100","width":"100px;","alt":"Calvin Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Calvin Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=calvintanwj","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/itsyme"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/71922282?v=4?s=100","width":"100px;","alt":"david"}}),_c('br'),_c('sub',[_c('b',[_v("david")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=itsyme","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=itsyme","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.linkedin.com/in/david-limantara/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/67327422?v=4?s=100","width":"100px;","alt":"David"}}),_c('br'),_c('sub',[_c('b',[_v("David")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=xSaints19x","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/charandeepsinghb"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/110289710?v=4?s=100","width":"100px;","alt":"charandeepsinghb"}}),_c('br'),_c('sub',[_c('b',[_v("charandeepsinghb")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=charandeepsinghb","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=charandeepsinghb","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/c00kie123"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/112937454?v=4?s=100","width":"100px;","alt":"Jia Yu"}}),_c('br'),_c('sub',[_c('b',[_v("Jia Yu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=c00kie123","title":"Documentation"}},[_v("📖")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/lhw-1"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/25716529?v=4?s=100","width":"100px;","alt":"Lee Hyung Woon / 이형운"}}),_c('br'),_c('sub',[_c('b',[_v("Lee Hyung Woon / 이형운")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=lhw-1","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/yucheng11122017"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/77204346?v=4?s=100","width":"100px;","alt":"Chan Yu Cheng"}}),_c('br'),_c('sub',[_c('b',[_v("Chan Yu Cheng")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=yucheng11122017","title":"Code"}},[_v("💻")])])])])])]),_v(" "),_c('hr'),_v(" "),_c('p',[_c('strong',[_c('span',{staticClass:"dimmed"},[_v("Past Members:")])])]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://github.com/acjh"}},[_c('strong',[_v("Aaron Chong Jun Hao")])]),_v(": "),_c('em',[_v("Project Mentor")]),_v(" for Jul 2018 - Dec 2020, "),_c('em',[_v("Team Lead")]),_v(" for Aug 2017 - Jun 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/madanalogy"}},[_c('strong',[_v("Ahmed Bahajjaj")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan-April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/Chng-Zhi-Xuan"}},[_c('strong',[_v("Chng Zhi Xuan")])]),_v(": "),_c('em',[_v("Member")]),_v(" for May 2018 - Jul 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/nicholaschuayunzhi"}},[_c('strong',[_v("Chua Yun Zhi Nicholas")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan 2018 - May 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/danielbrzn"}},[_c('strong',[_v("Daniel Berzin Chua Yuan Siang")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan 2018 - Aug 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/dvrylc"}},[_c('strong',[_v("Daryl Chan")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan-April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/openorclose"}},[_c('strong',[_v("Daryl Tan")])]),_v(": "),_c('em',[_v("Member")]),_v(" for May 2019 - May 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/jamos-tay"}},[_c('strong',[_v("Jamos Tay")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Aug 2018 - Apr 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/Parcly-Taxel"}},[_c('strong',[_v("Jeremy Tan Jie Rui")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan-April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/nusjzx"}},[_c('strong',[_v("Jia Zhixin")])]),_v(": "),_c('em',[_v("Member")]),_v(" for May 2018 - Aug 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/Gisonrg"}},[_c('strong',[_v("Jiang Sheng")])]),_v(": "),_c('em',[_v("Founding Member")]),_v(" and "),_c('em',[_v("Team Lead")]),_v(" for Aug 2016 - Jul 2017")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/hcwong"}},[_c('strong',[_v("Joshua Wong")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan-April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/kimberlyohq"}},[_c('strong',[_v("Kimberly Ong Ong Hui Qin")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jun-Jul 2021")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/nbriannl"}},[_c('strong',[_v("Labayna Neil Brian Narido")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Apr 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/marvinchin"}},[_c('strong',[_v("Marvin Chin Kun Song")])]),_v(": "),_c('em',[_v("Project Lead")]),_v(" for Jan - Aug 2020, "),_c('em',[_v("Member")]),_v(" for Jan 2019 - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/sijie123"}},[_c('strong',[_v("Lin Si Jie")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/luyangkenneth"}},[_c('strong',[_v("Lu Yang Kenneth")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/amad-person"}},[_c('strong',[_v("Maddi Aadyaa")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/crphang"}},[_c('strong',[_v("Phang Chun Rong")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Aug 2019 - Jun 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/rachx"}},[_c('strong',[_v("Rachael Sim Hwee Ling")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Dec 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/Xenonym"}},[_c('strong',[_v("Tan Zhen Yong")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/yamgent"}},[_c('strong',[_v("Tan Wang Leng")])]),_v(": "),_c('em',[_v("Team Lead")]),_v(" for Jul 2018 - Apr 2019, "),_c('em',[_v("Member")]),_v(" for May 2018 - Jun 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/Tejas2805"}},[_c('strong',[_v("Tejas Bhuwania")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan - April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/le0tan"}},[_c('strong',[_v("Tan Yuanhong")])]),_v(": "),_c('em',[_v("Member")]),_v(": Jan 2020 - Apr 2021")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/yash-chowdhary"}},[_c('strong',[_v("Yash Chowdhary")])]),_v(": "),_c('em',[_v("Member")]),_v(" Jan - Apr 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/alyip98"}},[_c('strong',[_v("Yip Seng Yeun")])]),_v(": "),_c('em',[_v("Member")]),_v(" May 2019 - Apr 2020")])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])])} +with(this){return _c('div',{attrs:{"id":"content-wrapper"}},[_c('h1',{staticClass:"display-3",attrs:{"id":"about-us"}},[_c('span',[_c('strong',[_v("About Us")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#about-us","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{staticClass:"lead"},[_v("MarkBind is a project "),_c('strong',[_v("based in "),_c('a',{attrs:{"href":"http://www.comp.nus.edu.sg/"}},[_v("National University of Singapore, School of Computing")])]),_v(", and is funded by an education grant from "),_c('a',{attrs:{"href":"https://nus.edu.sg/cdtl"}},[_v("NUS Center for Development of Teaching and Learning")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"glyphicon glyphicon-send",attrs:{"aria-hidden":"true"}}),_v(" You can "),_c('strong',[_v("email us")]),_v(" at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind")]),_v(" at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("comp.nus.edu.sg")])]),_v(" "),_c('p',[_c('span',{staticClass:"glyphicon glyphicon-console",attrs:{"aria-hidden":"true"}}),_v(" Interested in "),_c('strong',[_v("contributing to MarkBind")]),_v("? Visit the "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind"}},[_v("MarkBind project on GitHub")]),_v(".")]),_v(" "),_c('h2',{attrs:{"id":"contributors"}},[_v("Contributors ✨"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#contributors","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Mentors")]),_v(":")]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://www.comp.nus.edu.sg/~damithch/"}},[_c('strong',[_v("Damith C. Rajapakse")])]),_v(": "),_c('em',[_v("Project Mentor")]),_v(" since Aug 2016")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/ang-zeyu"}},[_c('strong',[_v("Ang Ze Yu")])]),_v(": "),_c('em',[_v("Project Mentor")]),_v(" since Jun 2022, "),_c('em',[_v("Team Lead")]),_v(" for Sep 2020 - May 2022")])]),_v(" "),_c('p',[_c('strong',[_v("Dev Team")]),_v(":")]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://www.github.com/jonahtanjz"}},[_c('strong',[_v("Jonah Tan Jun Zi")])]),_v(": "),_c('strong',[_c('em',[_v("Team Lead")])]),_v(" since Jun 2022, "),_c('em',[_v("Member")]),_v(" for Jan 2021 - May 2022")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/ryoarmanda"}},[_c('strong',[_v("Ryo Chandra Putra Aramanda")])]),_v(": "),_c('strong',[_c('em',[_v("Team Lead")])]),_v(" since Jun 2022, "),_c('em',[_v("Member")]),_v(" for Aug 2020 - May 2022")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/raysonkoh"}},[_c('strong',[_v("Koh Rayson")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2021, "),_c('em',[_v("Member")]),_v(" since Jan 2021")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/wxwxwxwx9"}},[_c('strong',[_v("Ong Wei Xiang")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2021, "),_c('em',[_v("Member")]),_v(" since Aug 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/kaixin-hc"}},[_c('strong',[_v("Hannah Chia Kai Xin")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2022, "),_c('em',[_v("Member")]),_v(" since Jan 2022")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/jovyntls"}},[_c('strong',[_v("Jovyn Tan Li Shyan")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2022, "),_c('em',[_v("Member")]),_v(" since Jan 2022")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/tlylt"}},[_c('strong',[_v("Liu Yongliang")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2022, "),_c('em',[_v("Member")]),_v(" since Aug 2021")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/ong6"}},[_c('strong',[_v("Ong Jun Xiong")])]),_v(": "),_c('em',[_v("Senior Dev")]),_v(" since Apr 2022, "),_c('em',[_v("Member")]),_v(" since Aug 2021")])]),_v(" "),_c('p',[_v("Thanks goes to these wonderful people ("),_c('a',{attrs:{"href":"https://allcontributors.org/docs/en/emoji-key"}},[_v("emoji key")]),_v("):")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',[_c('tbody',[_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.yamgent.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/3168908?v=4?s=100","width":"100px;","alt":"Tan Wang Leng"}}),_c('br'),_c('sub',[_c('b',[_v("Tan Wang Leng")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=yamgent","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/ang-zeyu"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/3306138?v=4?s=100","width":"100px;","alt":"Ang Ze Yu"}}),_c('br'),_c('sub',[_c('b',[_v("Ang Ze Yu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=ang-zeyu","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"#projectManagement-ang-zeyu","title":"Project Management"}},[_v("📆")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/Gisonrg"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/4332224?v=4?s=100","width":"100px;","alt":"Jason Jiang"}}),_c('br'),_c('sub',[_c('b',[_v("Jason Jiang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Gisonrg","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/Chng-Zhi-Xuan"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/31084833?v=4?s=100","width":"100px;","alt":"Chng Zhi Xuan"}}),_c('br'),_c('sub',[_c('b',[_v("Chng Zhi Xuan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Chng-Zhi-Xuan","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://linkedin.com/in/aaronlah/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/14091939?v=4?s=100","width":"100px;","alt":"Aaron Chong"}}),_c('br'),_c('sub',[_c('b',[_v("Aaron Chong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=acjh","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/jamos-tay"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/19278089?v=4?s=100","width":"100px;","alt":"Jamos Tay"}}),_c('br'),_c('sub',[_c('b',[_v("Jamos Tay")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=jamos-tay","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://nicholaschuayunzhi.github.io/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/22221132?v=4?s=100","width":"100px;","alt":"Nicholas Chua"}}),_c('br'),_c('sub',[_c('b',[_v("Nicholas Chua")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=nicholaschuayunzhi","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.beyondthesprawl.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/1782590?v=4?s=100","width":"100px;","alt":"Tan Zhen Yong"}}),_c('br'),_c('sub',[_c('b',[_v("Tan Zhen Yong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Xenonym","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/rachx"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/16644412?v=4?s=100","width":"100px;","alt":"Rachael Sim"}}),_c('br'),_c('sub',[_c('b',[_v("Rachael Sim")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=rachx","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/wxwxwxwx9"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/37920115?v=4?s=100","width":"100px;","alt":"Ong Wei Xiang"}}),_c('br'),_c('sub',[_c('b',[_v("Ong Wei Xiang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=wxwxwxwx9","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/danielbrzn"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/251231?v=4?s=100","width":"100px;","alt":"Daniel Berzin Chua"}}),_c('br'),_c('sub',[_c('b',[_v("Daniel Berzin Chua")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=danielbrzn","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/openorclose"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/3646725?v=4?s=100","width":"100px;","alt":"Daryl Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Daryl Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=openorclose","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"http://www.comp.nus.edu.sg/~damithch"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/1673303?v=4?s=100","width":"100px;","alt":"Damith C. Rajapakse"}}),_c('br'),_c('sub',[_c('b',[_v("Damith C. Rajapakse")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=damithc","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"#mentoring-damithc","title":"Mentoring"}},[_v("🧑‍🏫")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/jonahtanjz"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/47470981?v=4?s=100","width":"100px;","alt":"Jonah Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Jonah Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=jonahtanjz","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/pulls?q=is%3Apr+reviewed-by%3Ajonahtanjz","title":"Reviewed Pull Requests"}},[_v("👀")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/nusjzx"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/24241939?v=4?s=100","width":"100px;","alt":"nusjzx"}}),_c('br'),_c('sub',[_c('b',[_v("nusjzx")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=nusjzx","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/alyip98"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/2277141?v=4?s=100","width":"100px;","alt":"Alfred Yip"}}),_c('br'),_c('sub',[_c('b',[_v("Alfred Yip")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=alyip98","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/ryoarmanda"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/24468110?v=4?s=100","width":"100px;","alt":"Ryo Armanda"}}),_c('br'),_c('sub',[_c('b',[_v("Ryo Armanda")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=ryoarmanda","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/pulls?q=is%3Apr+reviewed-by%3Aryoarmanda","title":"Reviewed Pull Requests"}},[_v("👀")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/le0tan"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/28982486?v=4?s=100","width":"100px;","alt":"Tan Yuanhong"}}),_c('br'),_c('sub',[_c('b',[_v("Tan Yuanhong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=le0tan","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://sijie123.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/631938?v=4?s=100","width":"100px;","alt":"Si Jie"}}),_c('br'),_c('sub',[_c('b',[_v("Si Jie")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=sijie123","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/yash-chowdhary"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/21968718?v=4?s=100","width":"100px;","alt":"Yash Chowdhary"}}),_c('br'),_c('sub',[_c('b',[_v("Yash Chowdhary")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=yash-chowdhary","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.linkedin.com/in/luyangkenneth/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/9073504?v=4?s=100","width":"100px;","alt":"Kenneth Lu"}}),_c('br'),_c('sub',[_c('b',[_v("Kenneth Lu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=luyangkenneth","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://raysonkoh.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/16506539?v=4?s=100","width":"100px;","alt":"Rayson Koh"}}),_c('br'),_c('sub',[_c('b',[_v("Rayson Koh")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=raysonkoh","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/crphang"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/4986717?v=4?s=100","width":"100px;","alt":"Phang Chun Rong"}}),_c('br'),_c('sub',[_c('b',[_v("Phang Chun Rong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=crphang","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/nbriannl"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/27397021?v=4?s=100","width":"100px;","alt":"nbriannl"}}),_c('br'),_c('sub',[_c('b',[_v("nbriannl")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=nbriannl","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/Tejas2805"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/35946746?v=4?s=100","width":"100px;","alt":"Tejas Bhuwania"}}),_c('br'),_c('sub',[_c('b',[_v("Tejas Bhuwania")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Tejas2805","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/marvinchin"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/17447681?v=4?s=100","width":"100px;","alt":"Marvin Chin"}}),_c('br'),_c('sub',[_c('b',[_v("Marvin Chin")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=marvinchin","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/amad-person"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/22164211?v=4?s=100","width":"100px;","alt":"Aadyaa Maddi"}}),_c('br'),_c('sub',[_c('b',[_v("Aadyaa Maddi")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=amad-person","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://kendrickang.github.io/me/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/38814428?v=4?s=100","width":"100px;","alt":"Kendrick Ang"}}),_c('br'),_c('sub',[_c('b',[_v("Kendrick Ang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=KendrickAng","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/dvrylc"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/6095637?v=4?s=100","width":"100px;","alt":"Daryl Chan"}}),_c('br'),_c('sub',[_c('b',[_v("Daryl Chan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=dvrylc","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://tlylt.github.io/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/41845017?v=4?s=100","width":"100px;","alt":"Liu YongLiang"}}),_c('br'),_c('sub',[_c('b',[_v("Liu YongLiang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=tlylt","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=tlylt","title":"Documentation"}},[_v("📖")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/pulls?q=is%3Apr+reviewed-by%3Atlylt","title":"Reviewed Pull Requests"}},[_v("👀")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://madanalogy.dev/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/42177597?v=4?s=100","width":"100px;","alt":"Ahmed Bahajjaj"}}),_c('br'),_c('sub',[_c('b',[_v("Ahmed Bahajjaj")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=madanalogy","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.zhongjun.me/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/27919917?v=4?s=100","width":"100px;","alt":"Hsu Zhong Jun"}}),_c('br'),_c('sub',[_c('b',[_v("Hsu Zhong Jun")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=dcshzj","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/kimberlyohq"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/60393696?v=4?s=100","width":"100px;","alt":"Kimberly"}}),_c('br'),_c('sub',[_c('b',[_v("Kimberly")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=kimberlyohq","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/hcwong"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/28432397?v=4?s=100","width":"100px;","alt":"Joshua Wong"}}),_c('br'),_c('sub',[_c('b',[_v("Joshua Wong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=hcwong","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://weasyl.com/~parclytaxel"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/54175463?v=4?s=100","width":"100px;","alt":"Jeremy Tan Jie Rui"}}),_c('br'),_c('sub',[_c('b',[_v("Jeremy Tan Jie Rui")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Parcly-Taxel","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/anubh-v"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/35621759?v=4?s=100","width":"100px;","alt":"Anubhav"}}),_c('br'),_c('sub',[_c('b',[_v("Anubhav")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=anubh-v","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/bchenghi"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/57175876?v=4?s=100","width":"100px;","alt":"Boh Cheng Hin"}}),_c('br'),_c('sub',[_c('b',[_v("Boh Cheng Hin")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=bchenghi","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.tawatawashi.com/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/7100187?v=4?s=100","width":"100px;","alt":"Hiroki Nishino"}}),_c('br'),_c('sub',[_c('b',[_v("Hiroki Nishino")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=tawAsh1","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/ong6"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/19247856?v=4?s=100","width":"100px;","alt":"Junx"}}),_c('br'),_c('sub',[_c('b',[_v("Junx")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=ong6","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=ong6","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://jyl123.github.io/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/24690889?v=4?s=100","width":"100px;","alt":"Li JiaYao"}}),_c('br'),_c('sub',[_c('b',[_v("Li JiaYao")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=JYL123","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://morninglit.github.io/Portfolio2/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/57279935?v=4?s=100","width":"100px;","alt":"Ambrose Liew"}}),_c('br'),_c('sub',[_c('b',[_v("Ambrose Liew")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=MorningLit","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/pr4aveen"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/2839596?v=4?s=100","width":"100px;","alt":"Praveen"}}),_c('br'),_c('sub',[_c('b',[_v("Praveen")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=pr4aveen","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/riyadh-h"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/69278589?v=4?s=100","width":"100px;","alt":"Riyadh H. Alzahrani"}}),_c('br'),_c('sub',[_c('b',[_v("Riyadh H. Alzahrani")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=riyadh-h","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/samuelfangjw"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/60355570?v=4?s=100","width":"100px;","alt":"Samuel Fang"}}),_c('br'),_c('sub',[_c('b',[_v("Samuel Fang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=samuelfangjw","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/thomastanck"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/829070?v=4?s=100","width":"100px;","alt":"Thomas Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Thomas Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=thomastanck","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/vig42"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/42461145?v=4?s=100","width":"100px;","alt":"Vighnesh Iyer"}}),_c('br'),_c('sub',[_c('b',[_v("Vighnesh Iyer")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=vig42","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://resumednh.netlify.app/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/53283766?v=4?s=100","width":"100px;","alt":"dao ngoc hieu"}}),_c('br'),_c('sub',[_c('b',[_v("dao ngoc hieu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=daongochieu2810","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://bandism.net/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/22633385?v=4?s=100","width":"100px;","alt":"Ikko Ashimine"}}),_c('br'),_c('sub',[_c('b',[_v("Ikko Ashimine")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=eltociear","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"http://www.jovyntan.com"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/61113575?v=4?s=100","width":"100px;","alt":"Jovyn Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Jovyn Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=jovyntls","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=jovyntls","title":"Documentation"}},[_v("📖")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/kaixin-hc"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/59471320?v=4?s=100","width":"100px;","alt":"Hannah"}}),_c('br'),_c('sub',[_c('b',[_v("Hannah")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=kaixin-hc","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=kaixin-hc","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/NaincyKumariKnoldus"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/87004609?v=4?s=100","width":"100px;","alt":"NaincyKumariKnoldus"}}),_c('br'),_c('sub',[_c('b',[_v("NaincyKumariKnoldus")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=NaincyKumariKnoldus","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/elroygohjy"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/77185324?v=4?s=100","width":"100px;","alt":"Elroy Goh"}}),_c('br'),_c('sub',[_c('b',[_v("Elroy Goh")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=elroygohjy","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/EltonGohJH"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/75515229?v=4?s=100","width":"100px;","alt":"Elton Goh"}}),_c('br'),_c('sub',[_c('b',[_v("Elton Goh")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=EltonGohJH","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/benluiwj"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/67570985?v=4?s=100","width":"100px;","alt":"benluiwj"}}),_c('br'),_c('sub',[_c('b',[_v("benluiwj")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=benluiwj","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=benluiwj","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/weiquu"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/48304907?v=4?s=100","width":"100px;","alt":"weiquu"}}),_c('br'),_c('sub',[_c('b',[_v("weiquu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=weiquu","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=weiquu","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/eeliana"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/62977276?v=4?s=100","width":"100px;","alt":"eeliana"}}),_c('br'),_c('sub',[_c('b',[_v("eeliana")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=eeliana","title":"Documentation"}},[_v("📖")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.linkedin.com/in/dominiclimkj/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/46486515?v=4?s=100","width":"100px;","alt":"Dominic Lim"}}),_c('br'),_c('sub',[_c('b',[_v("Dominic Lim")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=domlimm","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=domlimm","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/petermonky"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/39848410?v=4?s=100","width":"100px;","alt":"peter"}}),_c('br'),_c('sub',[_c('b',[_v("peter")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=petermonky","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/calvintanwj"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/61271749?v=4?s=100","width":"100px;","alt":"Calvin Tan"}}),_c('br'),_c('sub',[_c('b',[_v("Calvin Tan")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=calvintanwj","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/itsyme"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/71922282?v=4?s=100","width":"100px;","alt":"david"}}),_c('br'),_c('sub',[_c('b',[_v("david")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=itsyme","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=itsyme","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://www.linkedin.com/in/david-limantara/"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/67327422?v=4?s=100","width":"100px;","alt":"David"}}),_c('br'),_c('sub',[_c('b',[_v("David")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=xSaints19x","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/charandeepsinghb"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/110289710?v=4?s=100","width":"100px;","alt":"charandeepsinghb"}}),_c('br'),_c('sub',[_c('b',[_v("charandeepsinghb")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=charandeepsinghb","title":"Code"}},[_v("💻")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=charandeepsinghb","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/c00kie123"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/112937454?v=4?s=100","width":"100px;","alt":"Jia Yu"}}),_c('br'),_c('sub',[_c('b',[_v("Jia Yu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=c00kie123","title":"Documentation"}},[_v("📖")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/lhw-1"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/25716529?v=4?s=100","width":"100px;","alt":"Lee Hyung Woon / 이형운"}}),_c('br'),_c('sub',[_c('b',[_v("Lee Hyung Woon / 이형운")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=lhw-1","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/yucheng11122017"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/77204346?v=4?s=100","width":"100px;","alt":"Chan Yu Cheng"}}),_c('br'),_c('sub',[_c('b',[_v("Chan Yu Cheng")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=yucheng11122017","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/Yvad60"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/54445417?v=4?s=100","width":"100px;","alt":"Ivad Yves HABIMANA"}}),_c('br'),_c('sub',[_c('b',[_v("Ivad Yves HABIMANA")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=Yvad60","title":"Documentation"}},[_v("📖")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/bibhu107"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/23478853?v=4?s=100","width":"100px;","alt":"Bibhu"}}),_c('br'),_c('sub',[_c('b',[_v("Bibhu")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=bibhu107","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/WillCWX"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/55905659?v=4?s=100","width":"100px;","alt":"WillCWX"}}),_c('br'),_c('sub',[_c('b',[_v("WillCWX")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=WillCWX","title":"Documentation"}},[_v("📖")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=WillCWX","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"http://esswhyy.github.io"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/39799639?v=4?s=100","width":"100px;","alt":"Sven Tang"}}),_c('br'),_c('sub',[_c('b',[_v("Sven Tang")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=EssWhyy","title":"Documentation"}},[_v("📖")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=EssWhyy","title":"Code"}},[_v("💻")])]),_v(" "),_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"http://www.lesterong.com"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/84223259?v=4?s=100","width":"100px;","alt":"lesterong"}}),_c('br'),_c('sub',[_c('b',[_v("lesterong")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=lesterong","title":"Code"}},[_v("💻")])])]),_v(" "),_c('tr',[_c('td',{attrs:{"align":"center","valign":"top","width":"14.28%"}},[_c('a',{attrs:{"href":"https://github.com/SPWwj"}},[_c('img',{attrs:{"src":"https://avatars.githubusercontent.com/u/30100720?v=4?s=100","width":"100px;","alt":"SPWwj"}}),_c('br'),_c('sub',[_c('b',[_v("SPWwj")])])]),_c('br'),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=SPWwj","title":"Documentation"}},[_v("📖")]),_v(" "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind/commits?author=SPWwj","title":"Code"}},[_v("💻")])])])])])]),_v(" "),_c('hr'),_v(" "),_c('p',[_c('strong',[_c('span',{staticClass:"dimmed"},[_v("Past Members:")])])]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://github.com/acjh"}},[_c('strong',[_v("Aaron Chong Jun Hao")])]),_v(": "),_c('em',[_v("Project Mentor")]),_v(" for Jul 2018 - Dec 2020, "),_c('em',[_v("Team Lead")]),_v(" for Aug 2017 - Jun 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/madanalogy"}},[_c('strong',[_v("Ahmed Bahajjaj")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan-April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/Chng-Zhi-Xuan"}},[_c('strong',[_v("Chng Zhi Xuan")])]),_v(": "),_c('em',[_v("Member")]),_v(" for May 2018 - Jul 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/nicholaschuayunzhi"}},[_c('strong',[_v("Chua Yun Zhi Nicholas")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan 2018 - May 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/danielbrzn"}},[_c('strong',[_v("Daniel Berzin Chua Yuan Siang")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan 2018 - Aug 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/dvrylc"}},[_c('strong',[_v("Daryl Chan")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan-April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/openorclose"}},[_c('strong',[_v("Daryl Tan")])]),_v(": "),_c('em',[_v("Member")]),_v(" for May 2019 - May 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/jamos-tay"}},[_c('strong',[_v("Jamos Tay")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Aug 2018 - Apr 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/Parcly-Taxel"}},[_c('strong',[_v("Jeremy Tan Jie Rui")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan-April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/nusjzx"}},[_c('strong',[_v("Jia Zhixin")])]),_v(": "),_c('em',[_v("Member")]),_v(" for May 2018 - Aug 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/Gisonrg"}},[_c('strong',[_v("Jiang Sheng")])]),_v(": "),_c('em',[_v("Founding Member")]),_v(" and "),_c('em',[_v("Team Lead")]),_v(" for Aug 2016 - Jul 2017")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/hcwong"}},[_c('strong',[_v("Joshua Wong")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan-April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/kimberlyohq"}},[_c('strong',[_v("Kimberly Ong Ong Hui Qin")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jun-Jul 2021")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/nbriannl"}},[_c('strong',[_v("Labayna Neil Brian Narido")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Apr 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/marvinchin"}},[_c('strong',[_v("Marvin Chin Kun Song")])]),_v(": "),_c('em',[_v("Project Lead")]),_v(" for Jan - Aug 2020, "),_c('em',[_v("Member")]),_v(" for Jan 2019 - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/sijie123"}},[_c('strong',[_v("Lin Si Jie")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/luyangkenneth"}},[_c('strong',[_v("Lu Yang Kenneth")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/amad-person"}},[_c('strong',[_v("Maddi Aadyaa")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/crphang"}},[_c('strong',[_v("Phang Chun Rong")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Aug 2019 - Jun 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/rachx"}},[_c('strong',[_v("Rachael Sim Hwee Ling")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Dec 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/Xenonym"}},[_c('strong',[_v("Tan Zhen Yong")])]),_v(": "),_c('em',[_v("Member")]),_v(" for Jan - Aug 2019")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://github.com/yamgent"}},[_c('strong',[_v("Tan Wang Leng")])]),_v(": "),_c('em',[_v("Team Lead")]),_v(" for Jul 2018 - Apr 2019, "),_c('em',[_v("Member")]),_v(" for May 2018 - Jun 2018")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/Tejas2805"}},[_c('strong',[_v("Tejas Bhuwania")])]),_v(": "),_c('em',[_v("Contributor")]),_v(" for Jan - April 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/le0tan"}},[_c('strong',[_v("Tan Yuanhong")])]),_v(": "),_c('em',[_v("Member")]),_v(": Jan 2020 - Apr 2021")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/yash-chowdhary"}},[_c('strong',[_v("Yash Chowdhary")])]),_v(": "),_c('em',[_v("Member")]),_v(" Jan - Apr 2020")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.github.com/alyip98"}},[_c('strong',[_v("Yip Seng Yeun")])]),_v(": "),_c('em',[_v("Member")]),_v(" May 2019 - Apr 2020")])])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/deploy.sh b/deploy.sh index 2a87c94..0c2e215 100644 --- a/deploy.sh +++ b/deploy.sh @@ -1,4 +1,3 @@ set -x cd "${0%/*}" -markbind build markbind deploy diff --git a/images/annotateSampleObject.png b/images/annotateSampleObject.png new file mode 100644 index 0000000..821475f Binary files /dev/null and b/images/annotateSampleObject.png differ diff --git a/images/annotateSampleSequence.png b/images/annotateSampleSequence.png new file mode 100644 index 0000000..15ab913 Binary files /dev/null and b/images/annotateSampleSequence.png differ diff --git a/images/bootcamp/logo_and_nav.png b/images/bootcamp/logo_and_nav.png index 5c28732..900dbe4 100644 Binary files a/images/bootcamp/logo_and_nav.png and b/images/bootcamp/logo_and_nav.png differ diff --git a/images/bootcamp/page_nav.png b/images/bootcamp/page_nav.png deleted file mode 100644 index 8538157..0000000 Binary files a/images/bootcamp/page_nav.png and /dev/null differ diff --git a/images/bootcamp/page_nav_after.png b/images/bootcamp/page_nav_after.png new file mode 100644 index 0000000..e6b0391 Binary files /dev/null and b/images/bootcamp/page_nav_after.png differ diff --git a/images/bootcamp/page_nav_before.png b/images/bootcamp/page_nav_before.png new file mode 100644 index 0000000..8c08f9b Binary files /dev/null and b/images/bootcamp/page_nav_before.png differ diff --git a/images/bootcamp/page_title.png b/images/bootcamp/page_title.png index 2d1d668..e3159a9 100644 Binary files a/images/bootcamp/page_title.png and b/images/bootcamp/page_title.png differ diff --git a/index.html b/index.html index fe2c8ff..c1cc771 100644 --- a/index.html +++ b/index.html @@ -3,10 +3,8 @@ - - - MarkBind - Generate More Dynamic Websites from Markdown Text - + + MarkBind - Generate More Dynamic Websites from Markdown Text @@ -14,8 +12,7 @@ - - + @@ -23,12 +20,27 @@ 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

+ diff --git a/index.page-vue-render.js b/index.page-vue-render.js index 2aebfbb..d4757c8 100644 --- a/index.page-vue-render.js +++ b/index.page-vue-render.js @@ -1,17 +1,17 @@ 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"}},[_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('div',{attrs:{"id":"content-wrapper"}},[_c('div',{attrs:{"tags":"environment--ug"}},[_m(0),_v(" "),_c('div',{staticClass:"lead"},[_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Generate "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("as opposed to "),_c('em',[_v("one-size-fits-all")]),_v(" static content")]},proxy:true}])},[_c('em',[_v("more dynamic")])]),_v(" websites from Markdown text.")],1)]),_v("\nOptimized for creating text-heavy websites "),_c('span',{staticClass:"dimmed"},[_v("e.g., eLearning websites, online instruction manuals, project documentation etc.")])])]),_v(" "),_m(1),_v(" "),_c('hr'),_v(" "),_m(2),_v(" "),_c('p',[_v("MarkBind source files can be as simple as basic Markdown, but you can also "),_m(3),_v(" ("),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("GitHub Flavored Markdown")]},proxy:true}])},[_v("GFMD")]),_v(", 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.")],1),_v(" "),_c('p',[_v("Here are some simple text-formatting examples:")]),_v(" "),_m(4),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("More examples of generating static content")])])]},proxy:true}])},[_v(" "),_c('p',[_v("An example that uses GFMD syntax for task lists:")]),_v(" "),_c('div',{staticStyle:{"overflow-x":"auto"}},[_c('table',[_c('tr',[_c('td',{staticStyle:{"padding-top":"15px"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Things to do:**")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Finish my changes\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Push my commits to GitHub\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Open a pull request\n")]),_c('span',[_v("\n")])])]),_c('p')]),_v(" "),_c('td',[_v(" → ")]),_v(" "),_c('td',[_c('p'),_v(" "),_c('box',[_c('p',[_c('strong',[_v("Things to do:")])]),_v(" "),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Finish my changes")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Push my commits to GitHub")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Open a pull request")])])])],1)])])]),_v(" "),_c('p',[_v("An example that uses KaTeX to generate math equations:")]),_v(" "),_c('div',{staticStyle:{"overflow-x":"auto"}},[_c('table',[_c('tr',[_c('td',{staticStyle:{"padding-top":"20px"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Euler's Identity \\(e^{i\\pi}+1=0\\) is a beautiful formula.\n")])])]),_c('p')]),_v(" "),_c('td',[_v(" → ")]),_v(" "),_c('td',[_c('p'),_v(" "),_c('box',[_c('p',[_v("Euler's Identity "),_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 formula.")],1)])],1)])])])]),_v(" "),_c('p'),_v(" "),_c('p',[_v("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.")]),_v(" "),_c('box',[_c('p',[_v("In "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Computer Science")]},proxy:true}])},[_v("CS")]),_v(", a binary tree is a "),_c('trigger',{attrs:{"for":"pop:index-tree"}},[_v("tree data structure")]),_v(" in which each node has at most two children, which are referred to as the "),_c('em',[_v("left child")]),_v(" and the "),_c('em',[_v("right child")]),_v(". "),_c('trigger',{attrs:{"trigger":"click","for":"modal:index-primitive"}},[_v("Primitive data types")]),_v(" on the other hand ...")],1),_v(" "),_c('popover',{attrs:{"id":"pop:index-tree","placement":"top"},scopedSlots:_u([{key:"header",fn:function(){return [_v("An example tree data structure")]},proxy:true},{key:"content",fn:function(){return [_c('div',[_c('p',[_c('a',{attrs:{"href":"https://upload.wikimedia.org/wikipedia/commons/f/f7/Binary_tree.svg","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://upload.wikimedia.org/wikipedia/commons/f/f7/Binary_tree.svg","alt":""}})]),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])]},proxy:true}])}),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:index-primitive"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Some examples of primitive data types")]},proxy:true}])},[_v(" "),_c('div',[_c('ul',[_c('li',[_v("Boolean, true or false.")]),_v(" "),_c('li',[_v("Character")]),_v(" "),_c('li',[_v("Floating-point, single-precision real number values.")]),_v(" "),_c('li',[_v("Double, a wider floating-point size.")]),_v(" "),_c('li',[_v("Integer, integral or fixed-precision values.")]),_v(" "),_c('li',[_v("String, a sequence of characters.")]),_v(" "),_c('li',[_v("Reference (also called a pointer or handle), a small value referring to another object's address in memory, possibly a much larger one.")]),_v(" "),_c('li',[_v("Enumerated type, a small set of uniquely named values.")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("More examples of generating dynamic content")])])]},proxy:true}])},[_v("\nIn the example below, there is an expandable panel that can reveal more content.\n"),_c('box',[_c('p',[_v("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 ...")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Some example primitive data types")])])]},proxy:true}])},[_v(" "),_c('div',[_c('ul',[_c('li',[_v("Boolean, true or false.")]),_v(" "),_c('li',[_v("Character")]),_v(" "),_c('li',[_v("Floating-point, single-precision real number values.")]),_v(" "),_c('li',[_v("Double, a wider floating-point size.")]),_v(" "),_c('li',[_v("Integer, integral or fixed-precision values.")]),_v(" "),_c('li',[_v("String, a sequence of characters.")]),_v(" "),_c('li',[_v("Reference (also called a pointer or handle), a small value referring to another object's address in memory, possibly a much larger one.")]),_v(" "),_c('li',[_v("Enumerated type, a small set of uniquely named values.")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])])],1),_v(" "),_c('p',[_v("In the example below, there are expandable panels that are nested within each other.")]),_v(" "),_c('box',[_c('panel',{attrs:{"no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"far fa-list-alt",attrs:{"aria-hidden":"true"}}),_v(" Exercises")])]},proxy:true}])},[_v(" "),_c('panel',{attrs:{"type":"danger","no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("❗️ [Compulsory] Ex 1")])]},proxy:true}])},[_v(" "),_c('p',[_v("Details of exercise 1")])]),_v(" "),_c('panel',{attrs:{"type":"warning","no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("[Recommended] Ex 2")])]},proxy:true}])},[_v(" "),_c('p',[_v("Details of exercise 2")])]),_v(" "),_c('panel',{attrs:{"type":"success","no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("[Optional] Ex 23")])]},proxy:true}])},[_v(" "),_c('p',[_v("Details of exercise 3")])])],1)],1)],1),_v(" "),_c('p'),_v(" "),_c('hr'),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('p',[_v("Here are some examples:")]),_v(" "),_m(7),_v(" "),_c('hr'),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_c('box',[_c('p',[_v("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 "),_c('em',[_v("left child")]),_v(" and the "),_c('em',[_v("right child")]),_v(". "),_c('trigger',{attrs:{"trigger":"click","for":"modal:index-primitive2"}},[_v("Primitive data types")]),_v(" on the other hand ...")],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Some example primitive data types")])])]},proxy:true}])},[_v(" "),_c('div',[_c('ul',[_c('li',[_v("Boolean, true or false.")]),_v(" "),_c('li',[_v("Character")]),_v(" "),_c('li',[_v("Floating-point, single-precision real number values.")]),_v(" "),_c('li',[_v("Double, a wider floating-point size.")]),_v(" "),_c('li',[_v("Integer, integral or fixed-precision values.")]),_v(" "),_c('li',[_v("String, a sequence of characters.")]),_v(" "),_c('li',[_v("Reference (also called a pointer or handle), a small value referring to another object's address in memory, possibly a much larger one.")]),_v(" "),_c('li',[_v("Enumerated type, a small set of uniquely named values.")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])]),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:index-primitive2"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Some examples of primitive data types")]},proxy:true}])},[_v(" "),_c('div',[_c('ul',[_c('li',[_v("Boolean, true or false.")]),_v(" "),_c('li',[_v("Character")]),_v(" "),_c('li',[_v("Floating-point, single-precision real number values.")]),_v(" "),_c('li',[_v("Double, a wider floating-point size.")]),_v(" "),_c('li',[_v("Integer, integral or fixed-precision values.")]),_v(" "),_c('li',[_v("String, a sequence of characters.")]),_v(" "),_c('li',[_v("Reference (also called a pointer or handle), a small value referring to another object's address in memory, possibly a much larger one.")]),_v(" "),_c('li',[_v("Enumerated type, a small set of uniquely named values.")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])])],1),_v(" "),_c('hr'),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14)],1),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])]),_v(" "),_m(15)])} +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('div',{attrs:{"id":"content-wrapper"}},[_c('div',{attrs:{"tags":"environment--ug environment--combined"}},[_m(0),_v(" "),_c('div',{staticClass:"lead"},[_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Generate "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("as opposed to "),_c('em',[_v("one-size-fits-all")]),_v(" static content")]},proxy:true}])},[_c('em',[_v("more dynamic")])]),_v(" websites from Markdown text.")],1)]),_v("\nOptimized for creating text-heavy websites "),_c('span',{staticClass:"dimmed"},[_v("e.g., eLearning websites, online instruction manuals, project documentation etc.")])])]),_v(" "),_m(1),_v(" "),_c('hr'),_v(" "),_m(2),_v(" "),_c('p',[_v("MarkBind source files can be as simple as basic Markdown, but you can also "),_m(3),_v(" ("),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("GitHub Flavored Markdown")]},proxy:true}])},[_v("GFMD")]),_v(", 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.")],1),_v(" "),_c('p',[_v("Here are some simple text-formatting examples:")]),_v(" "),_m(4),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("More examples of generating static content")])])]},proxy:true}])},[_v(" "),_c('p',[_v("An example that uses GFMD syntax for task lists:")]),_v(" "),_c('div',[_c('div',{staticStyle:{"overflow-x":"auto"}},[_c('table',{staticStyle:{"width":"100%"}},[_c('tbody',[_c('tr',[_c('td',{staticStyle:{"width":"50%"}},[_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("**Things to do:**")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Finish my changes\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Push my commits to GitHub\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Open a pull request\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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:{"width":"50%"}},[_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("Things to do:")])]),_v(" "),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Finish my changes")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Push my commits to GitHub")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Open a pull request")])])])],1)])])])])])]),_v(" "),_c('p',[_v("An example that uses KaTeX to generate math equations:")]),_v(" "),_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("Euler's Identity \\(e^{i\\pi}+1=0\\) is a beautiful formula.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("Euler's Identity "),_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 formula.")],1)])],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_v("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.")]),_v(" "),_c('box',[_c('p',[_v("In "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Computer Science")]},proxy:true}])},[_v("CS")]),_v(", a binary tree is a "),_c('trigger',{attrs:{"for":"pop:index-tree"}},[_v("tree data structure")]),_v(" in which each node has at most two children, which are referred to as the "),_c('em',[_v("left child")]),_v(" and the "),_c('em',[_v("right child")]),_v(". "),_c('trigger',{attrs:{"trigger":"click","for":"modal:index-primitive"}},[_v("Primitive data types")]),_v(" on the other hand ...")],1),_v(" "),_c('popover',{attrs:{"id":"pop:index-tree","placement":"top"},scopedSlots:_u([{key:"header",fn:function(){return [_v("An example tree data structure")]},proxy:true},{key:"content",fn:function(){return [_c('div',[_c('p',[_c('a',{attrs:{"href":"https://upload.wikimedia.org/wikipedia/commons/f/f7/Binary_tree.svg","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://upload.wikimedia.org/wikipedia/commons/f/f7/Binary_tree.svg","alt":""}})]),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])]},proxy:true}])}),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:index-primitive"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Some examples of primitive data types")]},proxy:true}])},[_v(" "),_c('div',[_c('ul',[_c('li',[_v("Boolean, true or false.")]),_v(" "),_c('li',[_v("Character")]),_v(" "),_c('li',[_v("Floating-point, single-precision real number values.")]),_v(" "),_c('li',[_v("Double, a wider floating-point size.")]),_v(" "),_c('li',[_v("Integer, integral or fixed-precision values.")]),_v(" "),_c('li',[_v("String, a sequence of characters.")]),_v(" "),_c('li',[_v("Reference (also called a pointer or handle), a small value referring to another object's address in memory, possibly a much larger one.")]),_v(" "),_c('li',[_v("Enumerated type, a small set of uniquely named values.")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("More examples of generating dynamic content")])])]},proxy:true}])},[_v("\nIn the example below, there is an expandable panel that can reveal more content.\n"),_c('box',[_c('p',[_v("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 ...")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Some example primitive data types")])])]},proxy:true}])},[_v(" "),_c('div',[_c('ul',[_c('li',[_v("Boolean, true or false.")]),_v(" "),_c('li',[_v("Character")]),_v(" "),_c('li',[_v("Floating-point, single-precision real number values.")]),_v(" "),_c('li',[_v("Double, a wider floating-point size.")]),_v(" "),_c('li',[_v("Integer, integral or fixed-precision values.")]),_v(" "),_c('li',[_v("String, a sequence of characters.")]),_v(" "),_c('li',[_v("Reference (also called a pointer or handle), a small value referring to another object's address in memory, possibly a much larger one.")]),_v(" "),_c('li',[_v("Enumerated type, a small set of uniquely named values.")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])])],1),_v(" "),_c('p',[_v("In the example below, there are expandable panels that are nested within each other.")]),_v(" "),_c('box',[_c('panel',{attrs:{"no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"far fa-list-alt",attrs:{"aria-hidden":"true"}}),_v(" Exercises")])]},proxy:true}])},[_v(" "),_c('panel',{attrs:{"type":"danger","no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("❗️ [Compulsory] Ex 1")])]},proxy:true}])},[_v(" "),_c('p',[_v("Details of exercise 1")])]),_v(" "),_c('panel',{attrs:{"type":"warning","no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("[Recommended] Ex 2")])]},proxy:true}])},[_v(" "),_c('p',[_v("Details of exercise 2")])]),_v(" "),_c('panel',{attrs:{"type":"success","no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("[Optional] Ex 23")])]},proxy:true}])},[_v(" "),_c('p',[_v("Details of exercise 3")])])],1)],1)],1),_v(" "),_c('p'),_v(" "),_c('hr'),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('p',[_v("Here are some examples:")]),_v(" "),_m(7),_v(" "),_c('hr'),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_c('box',[_c('p',[_v("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 "),_c('em',[_v("left child")]),_v(" and the "),_c('em',[_v("right child")]),_v(". "),_c('trigger',{attrs:{"trigger":"click","for":"modal:index-primitive2"}},[_v("Primitive data types")]),_v(" on the other hand ...")],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Some example primitive data types")])])]},proxy:true}])},[_v(" "),_c('div',[_c('ul',[_c('li',[_v("Boolean, true or false.")]),_v(" "),_c('li',[_v("Character")]),_v(" "),_c('li',[_v("Floating-point, single-precision real number values.")]),_v(" "),_c('li',[_v("Double, a wider floating-point size.")]),_v(" "),_c('li',[_v("Integer, integral or fixed-precision values.")]),_v(" "),_c('li',[_v("String, a sequence of characters.")]),_v(" "),_c('li',[_v("Reference (also called a pointer or handle), a small value referring to another object's address in memory, possibly a much larger one.")]),_v(" "),_c('li',[_v("Enumerated type, a small set of uniquely named values.")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])]),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:index-primitive2"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Some examples of primitive data types")]},proxy:true}])},[_v(" "),_c('div',[_c('ul',[_c('li',[_v("Boolean, true or false.")]),_v(" "),_c('li',[_v("Character")]),_v(" "),_c('li',[_v("Floating-point, single-precision real number values.")]),_v(" "),_c('li',[_v("Double, a wider floating-point size.")]),_v(" "),_c('li',[_v("Integer, integral or fixed-precision values.")]),_v(" "),_c('li',[_v("String, a sequence of characters.")]),_v(" "),_c('li',[_v("Reference (also called a pointer or handle), a small value referring to another object's address in memory, possibly a much larger one.")]),_v(" "),_c('li',[_v("Enumerated type, a small set of uniquely named values.")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source:wikipedia]")])])])])])],1),_v(" "),_c('hr'),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14)],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(15)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('h1',{staticClass:"display-3",attrs:{"id":"markbind"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind"}}),_c('span',[_c('strong',[_v("MarkBind")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{staticClass:"display-3",attrs:{"id":"markbind"}},[_c('span',[_c('strong',[_v("MarkBind")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('a',{staticClass:"btn btn-primary",attrs:{"href":"/userGuide"}},[_v("Get Started")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"simple-syntax-dynamic-content"}},[_c('span',{staticClass:"anchor",attrs:{"id":"simple-syntax-dynamic-content"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Simple syntax. Dynamic content."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#simple-syntax-dynamic-content","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"simple-syntax-dynamic-content"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Simple syntax. Dynamic content."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#simple-syntax-dynamic-content","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_c('strong',[_v("use a mix of several popular syntax schemes")])])} @@ -20,7 +20,7 @@ with(this){return _c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html" with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Syntax scheme")]),_v(" "),_c('th',[_v("Code")]),_v(" "),_c('th',[_v("Output")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("Markdown")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("**bold text** _italic text_")])]),_v(" "),_c('td',[_c('strong',[_v("bold text")]),_v(" "),_c('em',[_v("italic text")])])]),_v(" "),_c('tr',[_c('td',[_v("GFMD")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("~~striked out text~~")])]),_v(" "),_c('td',[_c('s',[_v("striked out text")])])]),_v(" "),_c('tr',[_c('td',[_v("MarkBind extensions to Markdown")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("==highlighted text==")]),_c('br'),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("%%grey text%%")]),_c('br'),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("!!underlined text!!")])]),_v(" "),_c('td',[_c('mark',[_v("highlighted text")]),_c('br'),_c('span',{staticClass:"dimmed"},[_v("grey text")]),_c('br'),_c('span',{staticClass:"underline"},[_v("underlined text")])])])])])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"everything-you-need-for-text-heavy-websites-built-in"}},[_c('span',{staticClass:"anchor",attrs:{"id":"everything-you-need-for-text-heavy-websites-built-in"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Everything you need for text-heavy websites, built-in."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#everything-you-need-for-text-heavy-websites-built-in","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"everything-you-need-for-text-heavy-websites-built-in"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Everything you need for text-heavy websites, built-in."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#everything-you-need-for-text-heavy-websites-built-in","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("MarkBind is "),_c('strong',[_v("highly optimized for creating text-heavy websites")]),_v(" "),_c('span',{staticClass:"dimmed"},[_v("e.g., eLearning websites, online instruction manuals, project documentation etc.")]),_v(" Anything that you might need for creating such websites are built-in, sparing you the hassle of finding/installing/searching plugins that you need.")])} @@ -29,7 +29,7 @@ with(this){return _c('p',[_v("MarkBind is "),_c('strong',[_v("highly optimized f with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"fas fa-heart",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('strong',[_v("Icons")]),_v(" can improve the readability of a text-heavy document. MarkBind comes with a wide selection of "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#emoji"}},[_v("emoji")]),_v("."),_c('br'),_v(" "),_c('span',{staticClass:"large"},[_c('span',{staticClass:"fas fa-search",attrs:{"aria-hidden":"true"}})]),_v(" With MarkBind's "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('strong',[_v("search feature")])]),_v(", you can allow readers to search for keywords in your site."),_c('br'),_v(" "),_c('span',{staticClass:"large"},[_c('span',{staticClass:"fas fa-window-maximize",attrs:{"aria-hidden":"true"}})]),_v(" MarkBind allows you to add "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_c('strong',[_v("site/page navigation menus, headers, footers")])]),_v(" easily.")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"more-control-to-the-reader-without-duplicating-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"more-control-to-the-reader-without-duplicating-code"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" More control to the reader, without duplicating code."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#more-control-to-the-reader-without-duplicating-code","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"more-control-to-the-reader-without-duplicating-code"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" More control to the reader, without duplicating code."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#more-control-to-the-reader-without-duplicating-code","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("A MarkBind website can be a "),_c('em',[_v("buffet")]),_v(" of content, as opposed to a "),_c('em',[_v("set menu")]),_v(": 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 "),_c('em',[_v("cater")]),_v(" (pun intended) for creating such buffet style websites, MarkBind has "),_c('strong',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("reuse mechanisms")]),_v(" for presenting the same content in multiple ways without duplicating the source file")]),_v(".")])} @@ -38,7 +38,7 @@ with(this){return _c('p',[_v("A MarkBind website can be a "),_c('em',[_v("buffet with(this){return _c('p',[_v("For example, MarkBind has a powerful "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("include")]),_v(" 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 "),_c('em',[_v("single")]),_v(" source file.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"easy-to-set-up-modify-deploy-integrate"}},[_c('span',{staticClass:"anchor",attrs:{"id":"easy-to-set-up-modify-deploy-integrate"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Easy to set up, modify, deploy, integrate."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#easy-to-set-up-modify-deploy-integrate","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"easy-to-set-up-modify-deploy-integrate"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Easy to set up, modify, deploy, integrate."),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#easy-to-set-up-modify-deploy-integrate","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Installing MarkBind takes just one command. Creating a new MarkBind site too takes just one command. With MarkBind's "),_c('em',[_v("live preview")]),_v(" feature, you can see how your site will look like as you modify the source file. "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the site to a server")]),_v(" can be as simple as one command too.")])} @@ -50,6 +50,6 @@ with(this){return _c('p',[_v("As MarkBind is also optimized for project document with(this){return _c('p',[_c('a',{staticClass:"btn btn-primary",attrs:{"href":"/userGuide"}},[_v("Get Started")])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/markbind/css/fonts/KaTeX_AMS-Regular.ttf b/markbind/css/fonts/KaTeX_AMS-Regular.ttf index c6f9a5e..737cf8e 100644 Binary files a/markbind/css/fonts/KaTeX_AMS-Regular.ttf and b/markbind/css/fonts/KaTeX_AMS-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_AMS-Regular.woff b/markbind/css/fonts/KaTeX_AMS-Regular.woff index b804d7b..38378bf 100644 Binary files a/markbind/css/fonts/KaTeX_AMS-Regular.woff and b/markbind/css/fonts/KaTeX_AMS-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_AMS-Regular.woff2 b/markbind/css/fonts/KaTeX_AMS-Regular.woff2 index 0acaaff..a4d1ba6 100644 Binary files a/markbind/css/fonts/KaTeX_AMS-Regular.woff2 and b/markbind/css/fonts/KaTeX_AMS-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Caligraphic-Bold.ttf b/markbind/css/fonts/KaTeX_Caligraphic-Bold.ttf index 9ff4a5e..04d28ab 100644 Binary files a/markbind/css/fonts/KaTeX_Caligraphic-Bold.ttf and b/markbind/css/fonts/KaTeX_Caligraphic-Bold.ttf differ diff --git a/markbind/css/fonts/KaTeX_Caligraphic-Bold.woff b/markbind/css/fonts/KaTeX_Caligraphic-Bold.woff index 9759710..a01ce90 100644 Binary files a/markbind/css/fonts/KaTeX_Caligraphic-Bold.woff and b/markbind/css/fonts/KaTeX_Caligraphic-Bold.woff differ diff --git a/markbind/css/fonts/KaTeX_Caligraphic-Bold.woff2 b/markbind/css/fonts/KaTeX_Caligraphic-Bold.woff2 index f390922..3792727 100644 Binary files a/markbind/css/fonts/KaTeX_Caligraphic-Bold.woff2 and b/markbind/css/fonts/KaTeX_Caligraphic-Bold.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Caligraphic-Regular.ttf b/markbind/css/fonts/KaTeX_Caligraphic-Regular.ttf index f522294..b2ce555 100644 Binary files a/markbind/css/fonts/KaTeX_Caligraphic-Regular.ttf and b/markbind/css/fonts/KaTeX_Caligraphic-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_Caligraphic-Regular.woff b/markbind/css/fonts/KaTeX_Caligraphic-Regular.woff index 9bdd534..bc169b7 100644 Binary files a/markbind/css/fonts/KaTeX_Caligraphic-Regular.woff and b/markbind/css/fonts/KaTeX_Caligraphic-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_Caligraphic-Regular.woff2 b/markbind/css/fonts/KaTeX_Caligraphic-Regular.woff2 index 75344a1..f1e38bb 100644 Binary files a/markbind/css/fonts/KaTeX_Caligraphic-Regular.woff2 and b/markbind/css/fonts/KaTeX_Caligraphic-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Fraktur-Bold.ttf b/markbind/css/fonts/KaTeX_Fraktur-Bold.ttf index 4e98259..c42d169 100644 Binary files a/markbind/css/fonts/KaTeX_Fraktur-Bold.ttf and b/markbind/css/fonts/KaTeX_Fraktur-Bold.ttf differ diff --git a/markbind/css/fonts/KaTeX_Fraktur-Bold.woff b/markbind/css/fonts/KaTeX_Fraktur-Bold.woff index e7730f6..f30b54b 100644 Binary files a/markbind/css/fonts/KaTeX_Fraktur-Bold.woff and b/markbind/css/fonts/KaTeX_Fraktur-Bold.woff differ diff --git a/markbind/css/fonts/KaTeX_Fraktur-Bold.woff2 b/markbind/css/fonts/KaTeX_Fraktur-Bold.woff2 index 395f28b..b7a8359 100644 Binary files a/markbind/css/fonts/KaTeX_Fraktur-Bold.woff2 and b/markbind/css/fonts/KaTeX_Fraktur-Bold.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Fraktur-Regular.ttf b/markbind/css/fonts/KaTeX_Fraktur-Regular.ttf index b8461b2..4133228 100644 Binary files a/markbind/css/fonts/KaTeX_Fraktur-Regular.ttf and b/markbind/css/fonts/KaTeX_Fraktur-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_Fraktur-Regular.woff b/markbind/css/fonts/KaTeX_Fraktur-Regular.woff index acab069..5af51de 100644 Binary files a/markbind/css/fonts/KaTeX_Fraktur-Regular.woff and b/markbind/css/fonts/KaTeX_Fraktur-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_Fraktur-Regular.woff2 b/markbind/css/fonts/KaTeX_Fraktur-Regular.woff2 index 735f694..3874f93 100644 Binary files a/markbind/css/fonts/KaTeX_Fraktur-Regular.woff2 and b/markbind/css/fonts/KaTeX_Fraktur-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Main-Bold.ttf b/markbind/css/fonts/KaTeX_Main-Bold.ttf index 4060e62..14390e0 100644 Binary files a/markbind/css/fonts/KaTeX_Main-Bold.ttf and b/markbind/css/fonts/KaTeX_Main-Bold.ttf differ diff --git a/markbind/css/fonts/KaTeX_Main-Bold.woff b/markbind/css/fonts/KaTeX_Main-Bold.woff index f38136a..33b4199 100644 Binary files a/markbind/css/fonts/KaTeX_Main-Bold.woff and b/markbind/css/fonts/KaTeX_Main-Bold.woff differ diff --git a/markbind/css/fonts/KaTeX_Main-Bold.woff2 b/markbind/css/fonts/KaTeX_Main-Bold.woff2 index ab2ad21..f9b71cb 100644 Binary files a/markbind/css/fonts/KaTeX_Main-Bold.woff2 and b/markbind/css/fonts/KaTeX_Main-Bold.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Main-BoldItalic.ttf b/markbind/css/fonts/KaTeX_Main-BoldItalic.ttf index dc00797..ad0761f 100644 Binary files a/markbind/css/fonts/KaTeX_Main-BoldItalic.ttf and b/markbind/css/fonts/KaTeX_Main-BoldItalic.ttf differ diff --git a/markbind/css/fonts/KaTeX_Main-BoldItalic.woff b/markbind/css/fonts/KaTeX_Main-BoldItalic.woff index 67807b0..115af4f 100644 Binary files a/markbind/css/fonts/KaTeX_Main-BoldItalic.woff and b/markbind/css/fonts/KaTeX_Main-BoldItalic.woff differ diff --git a/markbind/css/fonts/KaTeX_Main-BoldItalic.woff2 b/markbind/css/fonts/KaTeX_Main-BoldItalic.woff2 index 5931794..5c500c2 100644 Binary files a/markbind/css/fonts/KaTeX_Main-BoldItalic.woff2 and b/markbind/css/fonts/KaTeX_Main-BoldItalic.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Main-Italic.ttf b/markbind/css/fonts/KaTeX_Main-Italic.ttf index 0e9b0f3..fc8625c 100644 Binary files a/markbind/css/fonts/KaTeX_Main-Italic.ttf and b/markbind/css/fonts/KaTeX_Main-Italic.ttf differ diff --git a/markbind/css/fonts/KaTeX_Main-Italic.woff b/markbind/css/fonts/KaTeX_Main-Italic.woff index 6f43b59..2d3087a 100644 Binary files a/markbind/css/fonts/KaTeX_Main-Italic.woff and b/markbind/css/fonts/KaTeX_Main-Italic.woff differ diff --git a/markbind/css/fonts/KaTeX_Main-Italic.woff2 b/markbind/css/fonts/KaTeX_Main-Italic.woff2 index b50920e..08510d8 100644 Binary files a/markbind/css/fonts/KaTeX_Main-Italic.woff2 and b/markbind/css/fonts/KaTeX_Main-Italic.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Main-Regular.ttf b/markbind/css/fonts/KaTeX_Main-Regular.ttf index dd45e1e..5115a04 100644 Binary files a/markbind/css/fonts/KaTeX_Main-Regular.ttf and b/markbind/css/fonts/KaTeX_Main-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_Main-Regular.woff b/markbind/css/fonts/KaTeX_Main-Regular.woff index 21f5812..42b74ab 100644 Binary files a/markbind/css/fonts/KaTeX_Main-Regular.woff and b/markbind/css/fonts/KaTeX_Main-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_Main-Regular.woff2 b/markbind/css/fonts/KaTeX_Main-Regular.woff2 index eb24a7b..18647fa 100644 Binary files a/markbind/css/fonts/KaTeX_Main-Regular.woff2 and b/markbind/css/fonts/KaTeX_Main-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Math-BoldItalic.ttf b/markbind/css/fonts/KaTeX_Math-BoldItalic.ttf index 728ce7a..326b523 100644 Binary files a/markbind/css/fonts/KaTeX_Math-BoldItalic.ttf and b/markbind/css/fonts/KaTeX_Math-BoldItalic.ttf differ diff --git a/markbind/css/fonts/KaTeX_Math-BoldItalic.woff b/markbind/css/fonts/KaTeX_Math-BoldItalic.woff index 0ae390d..5b4041a 100644 Binary files a/markbind/css/fonts/KaTeX_Math-BoldItalic.woff and b/markbind/css/fonts/KaTeX_Math-BoldItalic.woff differ diff --git a/markbind/css/fonts/KaTeX_Math-BoldItalic.woff2 b/markbind/css/fonts/KaTeX_Math-BoldItalic.woff2 index 2965702..ba55276 100644 Binary files a/markbind/css/fonts/KaTeX_Math-BoldItalic.woff2 and b/markbind/css/fonts/KaTeX_Math-BoldItalic.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Math-Italic.ttf b/markbind/css/fonts/KaTeX_Math-Italic.ttf index 70d559b..f148fce 100644 Binary files a/markbind/css/fonts/KaTeX_Math-Italic.ttf and b/markbind/css/fonts/KaTeX_Math-Italic.ttf differ diff --git a/markbind/css/fonts/KaTeX_Math-Italic.woff b/markbind/css/fonts/KaTeX_Math-Italic.woff index eb5159d..31d0038 100644 Binary files a/markbind/css/fonts/KaTeX_Math-Italic.woff and b/markbind/css/fonts/KaTeX_Math-Italic.woff differ diff --git a/markbind/css/fonts/KaTeX_Math-Italic.woff2 b/markbind/css/fonts/KaTeX_Math-Italic.woff2 index 215c143..9871ab6 100644 Binary files a/markbind/css/fonts/KaTeX_Math-Italic.woff2 and b/markbind/css/fonts/KaTeX_Math-Italic.woff2 differ diff --git a/markbind/css/fonts/KaTeX_SansSerif-Bold.ttf b/markbind/css/fonts/KaTeX_SansSerif-Bold.ttf index 2f65a8a..dce35c8 100644 Binary files a/markbind/css/fonts/KaTeX_SansSerif-Bold.ttf and b/markbind/css/fonts/KaTeX_SansSerif-Bold.ttf differ diff --git a/markbind/css/fonts/KaTeX_SansSerif-Bold.woff b/markbind/css/fonts/KaTeX_SansSerif-Bold.woff index 8d47c02..992cb3d 100644 Binary files a/markbind/css/fonts/KaTeX_SansSerif-Bold.woff and b/markbind/css/fonts/KaTeX_SansSerif-Bold.woff differ diff --git a/markbind/css/fonts/KaTeX_SansSerif-Bold.woff2 b/markbind/css/fonts/KaTeX_SansSerif-Bold.woff2 index cfaa3bd..6dd1038 100644 Binary files a/markbind/css/fonts/KaTeX_SansSerif-Bold.woff2 and b/markbind/css/fonts/KaTeX_SansSerif-Bold.woff2 differ diff --git a/markbind/css/fonts/KaTeX_SansSerif-Italic.ttf b/markbind/css/fonts/KaTeX_SansSerif-Italic.ttf index d5850df..a3eb86c 100644 Binary files a/markbind/css/fonts/KaTeX_SansSerif-Italic.ttf and b/markbind/css/fonts/KaTeX_SansSerif-Italic.ttf differ diff --git a/markbind/css/fonts/KaTeX_SansSerif-Italic.woff b/markbind/css/fonts/KaTeX_SansSerif-Italic.woff index 7e02df9..f4fa252 100644 Binary files a/markbind/css/fonts/KaTeX_SansSerif-Italic.woff and b/markbind/css/fonts/KaTeX_SansSerif-Italic.woff differ diff --git a/markbind/css/fonts/KaTeX_SansSerif-Italic.woff2 b/markbind/css/fonts/KaTeX_SansSerif-Italic.woff2 index 349c06d..9f2501a 100644 Binary files a/markbind/css/fonts/KaTeX_SansSerif-Italic.woff2 and b/markbind/css/fonts/KaTeX_SansSerif-Italic.woff2 differ diff --git a/markbind/css/fonts/KaTeX_SansSerif-Regular.ttf b/markbind/css/fonts/KaTeX_SansSerif-Regular.ttf index 537279f..3be73ce 100644 Binary files a/markbind/css/fonts/KaTeX_SansSerif-Regular.ttf and b/markbind/css/fonts/KaTeX_SansSerif-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_SansSerif-Regular.woff b/markbind/css/fonts/KaTeX_SansSerif-Regular.woff index 31b8482..ec283f4 100644 Binary files a/markbind/css/fonts/KaTeX_SansSerif-Regular.woff and b/markbind/css/fonts/KaTeX_SansSerif-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_SansSerif-Regular.woff2 b/markbind/css/fonts/KaTeX_SansSerif-Regular.woff2 index a90eea8..e46094f 100644 Binary files a/markbind/css/fonts/KaTeX_SansSerif-Regular.woff2 and b/markbind/css/fonts/KaTeX_SansSerif-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Script-Regular.ttf b/markbind/css/fonts/KaTeX_Script-Regular.ttf index fd679bf..40c8a99 100644 Binary files a/markbind/css/fonts/KaTeX_Script-Regular.ttf and b/markbind/css/fonts/KaTeX_Script-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_Script-Regular.woff b/markbind/css/fonts/KaTeX_Script-Regular.woff index 0e7da82..4eafae7 100644 Binary files a/markbind/css/fonts/KaTeX_Script-Regular.woff and b/markbind/css/fonts/KaTeX_Script-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_Script-Regular.woff2 b/markbind/css/fonts/KaTeX_Script-Regular.woff2 index b3048fc..69b1754 100644 Binary files a/markbind/css/fonts/KaTeX_Script-Regular.woff2 and b/markbind/css/fonts/KaTeX_Script-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Size1-Regular.ttf b/markbind/css/fonts/KaTeX_Size1-Regular.ttf index 871fd7d..f0aff83 100644 Binary files a/markbind/css/fonts/KaTeX_Size1-Regular.ttf and b/markbind/css/fonts/KaTeX_Size1-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_Size1-Regular.woff b/markbind/css/fonts/KaTeX_Size1-Regular.woff index 7f292d9..0358ee4 100644 Binary files a/markbind/css/fonts/KaTeX_Size1-Regular.woff and b/markbind/css/fonts/KaTeX_Size1-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_Size1-Regular.woff2 b/markbind/css/fonts/KaTeX_Size1-Regular.woff2 index c5a8462..f951ed0 100644 Binary files a/markbind/css/fonts/KaTeX_Size1-Regular.woff2 and b/markbind/css/fonts/KaTeX_Size1-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Size2-Regular.ttf b/markbind/css/fonts/KaTeX_Size2-Regular.ttf index 7a212ca..4f72f16 100644 Binary files a/markbind/css/fonts/KaTeX_Size2-Regular.ttf and b/markbind/css/fonts/KaTeX_Size2-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_Size2-Regular.woff b/markbind/css/fonts/KaTeX_Size2-Regular.woff index d241d9b..8a053d2 100644 Binary files a/markbind/css/fonts/KaTeX_Size2-Regular.woff and b/markbind/css/fonts/KaTeX_Size2-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_Size2-Regular.woff2 b/markbind/css/fonts/KaTeX_Size2-Regular.woff2 index e1bccfe..181d962 100644 Binary files a/markbind/css/fonts/KaTeX_Size2-Regular.woff2 and b/markbind/css/fonts/KaTeX_Size2-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Size3-Regular.ttf b/markbind/css/fonts/KaTeX_Size3-Regular.ttf index 00bff34..56d2dc6 100644 Binary files a/markbind/css/fonts/KaTeX_Size3-Regular.ttf and b/markbind/css/fonts/KaTeX_Size3-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_Size3-Regular.woff b/markbind/css/fonts/KaTeX_Size3-Regular.woff index e6e9b65..0ec99ad 100644 Binary files a/markbind/css/fonts/KaTeX_Size3-Regular.woff and b/markbind/css/fonts/KaTeX_Size3-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_Size3-Regular.woff2 b/markbind/css/fonts/KaTeX_Size3-Regular.woff2 index 249a286..c2985cd 100644 Binary files a/markbind/css/fonts/KaTeX_Size3-Regular.woff2 and b/markbind/css/fonts/KaTeX_Size3-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Size4-Regular.ttf b/markbind/css/fonts/KaTeX_Size4-Regular.ttf index 74f0892..baf0209 100644 Binary files a/markbind/css/fonts/KaTeX_Size4-Regular.ttf and b/markbind/css/fonts/KaTeX_Size4-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_Size4-Regular.woff b/markbind/css/fonts/KaTeX_Size4-Regular.woff index e1ec545..ff67319 100644 Binary files a/markbind/css/fonts/KaTeX_Size4-Regular.woff and b/markbind/css/fonts/KaTeX_Size4-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_Size4-Regular.woff2 b/markbind/css/fonts/KaTeX_Size4-Regular.woff2 index 680c130..a4e810d 100644 Binary files a/markbind/css/fonts/KaTeX_Size4-Regular.woff2 and b/markbind/css/fonts/KaTeX_Size4-Regular.woff2 differ diff --git a/markbind/css/fonts/KaTeX_Typewriter-Regular.ttf b/markbind/css/fonts/KaTeX_Typewriter-Regular.ttf index c83252c..e66c218 100644 Binary files a/markbind/css/fonts/KaTeX_Typewriter-Regular.ttf and b/markbind/css/fonts/KaTeX_Typewriter-Regular.ttf differ diff --git a/markbind/css/fonts/KaTeX_Typewriter-Regular.woff b/markbind/css/fonts/KaTeX_Typewriter-Regular.woff index 2432419..c66d149 100644 Binary files a/markbind/css/fonts/KaTeX_Typewriter-Regular.woff and b/markbind/css/fonts/KaTeX_Typewriter-Regular.woff differ diff --git a/markbind/css/fonts/KaTeX_Typewriter-Regular.woff2 b/markbind/css/fonts/KaTeX_Typewriter-Regular.woff2 index 771f1af..e5bf2ce 100644 Binary files a/markbind/css/fonts/KaTeX_Typewriter-Regular.woff2 and b/markbind/css/fonts/KaTeX_Typewriter-Regular.woff2 differ diff --git a/markbind/css/markbind.min.css b/markbind/css/markbind.min.css index 20ad001..215a200 100644 --- a/markbind/css/markbind.min.css +++ b/markbind/css/markbind.min.css @@ -1 +1 @@ -.resize-observer[data-v-8859cc6c]{background-color:transparent;border:none;opacity:0}.resize-observer[data-v-8859cc6c],.resize-observer[data-v-8859cc6c] object{display:block;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%;z-index:-1}.v-popper__popper{left:0;top:0;z-index:10000}.v-popper__popper.v-popper__popper--hidden{opacity:0;pointer-events:none;transition:opacity .15s,visibility .15s;visibility:hidden}.v-popper__popper.v-popper__popper--shown{opacity:1;transition:opacity .15s;visibility:visible}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{display:none;height:100%;left:0;position:absolute;top:0;width:100%}.v-popper__inner{box-sizing:border-box;overflow-y:auto;position:relative}.v-popper__inner>div{max-height:inherit;max-width:inherit;position:relative;z-index:1}.v-popper__arrow-container{height:10px;position:absolute;width:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;height:0;left:0;position:absolute;top:0;width:0}.v-popper__arrow-inner{border-width:7px;visibility:hidden}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-color:transparent!important;border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important;border-top-width:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-bottom-color:transparent!important;border-left-color:transparent!important;border-left-width:0;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-bottom-color:transparent!important;border-right-color:transparent!important;border-right-width:0;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-dropdown .v-popper__inner{background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 30px #0000001a;color:#000}.v-popper--theme-dropdown .v-popper__arrow-inner{border-color:#fff;visibility:visible}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);border-radius:6px;color:#fff;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.box-container[data-v-b8113688]{border-radius:6px;padding:0}.box-header-wrapper[data-v-b8113688]{align-items:center;border-radius:6px 6px 0 0;display:flex;flex-direction:row;padding:.4rem 1.25rem .28rem;width:100%}.box-body-wrapper[data-v-b8113688]{display:flex;flex-direction:row;padding:.75rem 1.25rem;width:100%}.box-container.seamless>.header-and-body>.box-body-wrapper[data-v-b8113688]{padding:.75rem .5rem}.contents[data-v-b8113688]{min-width:0;padding:0 6px;width:100%}.box-container.seamless>.header-and-body>div.box-body-wrapper>.contents[data-v-b8113688]{padding-left:12px}.heading[data-v-b8113688]{background-color:hsla(0,0%,94%,.6);border-radius:0 6px 0 6px;border-width:0;color:inherit;display:inline;float:right;font-weight:400;margin:-13px -27px 0 15px;padding:3px 5px 4px;width:auto}.box-body-wrapper-with-heading[data-v-b8113688]{padding-top:.5rem}.alert-dismissible[data-v-b8113688]{padding-right:4rem}.box-header[data-v-b8113688]{font-weight:500}.icon-wrapper[data-v-b8113688]{display:inline;margin-right:.5em;min-width:1em;text-align:center}.close-with-heading[data-v-b8113688]{padding:1rem;position:absolute;right:0;top:0}.close-with-heading>span[data-v-b8113688]{vertical-align:text-top}.alert-dismissible .btn-close[data-v-b8113688]{padding:1rem}.contents[data-v-b8113688]>:last-child{margin-bottom:0}.alert-default[data-v-b8113688]{background-color:#f6f8fa;border-color:#e8ebef;color:#24292e}.alert-border-left[data-v-b8113688]{background-color:#f9f8f8;border-left:solid;border-width:0 0 0 5px}.vertical-divider[data-v-b8113688]{width:4px}.horizontal-divider[data-v-b8113688]{height:3px;margin:0 auto;width:calc(100% - 2.5rem)}.no-background[data-v-b8113688]{background:none}.no-border[data-v-b8113688]{border:none}@media screen and (max-width:768px){.box-header-wrapper[data-v-b8113688]{padding:.75rem .75rem .1rem}.box-body-wrapper[data-v-b8113688]{padding:.75rem}.contents[data-v-b8113688]{padding:0}}div.box-header>*{margin-bottom:0}.dropdown-submenu[data-v-3d2bfc10]{color:#212529!important;padding:0!important;position:relative}.dropdown-submenu ul.dropdown-menu[data-v-3d2bfc10]{margin-left:0}.btn-group>ul>.dropdown-submenu:last-child>ul[data-v-3d2bfc10],.dropdown>ul>.dropdown-submenu:last-child>ul[data-v-3d2bfc10]{margin-bottom:-.5rem}@media (min-width:768px){.submenu-toggle[data-v-3d2bfc10]:after{border-bottom:.3em solid transparent;border-left:.3em solid;border-right:0;border-top:.3em solid transparent;content:"";display:inline-block;float:right;height:0;margin-top:.5em;vertical-align:.255em;width:0}}@media (max-width:767px){.dropdown-submenu>ul[data-v-3d2bfc10]{border-radius:0;float:none;margin:-.05rem;padding-bottom:0;position:static}.submenu-toggle[data-v-3d2bfc10]:after{border-bottom:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid;content:"";display:inline-block;float:right;height:0;margin-left:.255em;margin-top:.5em;vertical-align:.255em;width:0}.navbar-default .dropdown[data-v-2e98b3f0]{position:static}.navbar-default .dropdown-menu[data-v-2e98b3f0]{max-height:75vh;max-width:100%;overflow-y:auto;overscroll-behavior:contain;position:absolute}.navbar-default .dropdown-menu-end[data-v-2e98b3f0]{right:auto}}.secret[data-v-2e98b3f0]{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.btn-with-before[data-v-2e98b3f0]{padding-left:.2rem;padding-right:.4rem}.dropdown-toggle[data-v-2e98b3f0]{cursor:pointer;display:block;width:max-content}.navbar .dropdown-toggle[data-v-2e98b3f0]{color:inherit;text-decoration:none}.toggle-site-nav-button[data-v-69eece42]{cursor:pointer;height:53px;left:0;padding:15px;position:absolute;transform:rotate(0deg);transition:all .25s ease-in-out;width:52px}.toggle-site-nav-button span[data-v-69eece42]{background-color:#000;display:block;height:3px;left:15px;position:absolute;top:50%;transition:all .25s ease-in-out;width:21px}.toggle-site-nav-button>span[data-v-69eece42]:first-child{transform:translateY(-8px)}.toggle-site-nav-button>span[data-v-69eece42]:nth-child(2){transform-origin:100% 50%}.toggle-site-nav-button>span[data-v-69eece42]:nth-child(3){transform:translateY(8px)}.nav-menu-close-icon .toggle-site-nav-button>span[data-v-69eece42]:first-child{transform:rotate(135deg)}.nav-menu-close-icon .toggle-site-nav-button>span[data-v-69eece42]:nth-child(2){left:-60px;opacity:0}.nav-menu-close-icon .toggle-site-nav-button>span[data-v-69eece42]:nth-child(3){transform:rotate(-135deg)}.toggle-page-nav-button[data-v-3c57aa97]{cursor:pointer;padding:15px;position:absolute;right:0;top:6px}.toggle-page-nav-button span[data-v-3c57aa97]{background-color:#000;border-radius:50%;display:block;height:5px;margin-top:2px;position:absolute;right:15px;transform:rotate(0deg);transition:all .25s ease-in-out;width:5px}.toggle-page-nav-button>span[data-v-3c57aa97]:first-child{transform:translateY(-8px)}.toggle-page-nav-button>span[data-v-3c57aa97]:nth-child(2){transform-origin:100% 50%}.toggle-page-nav-button>span[data-v-3c57aa97]:nth-child(3){transform:translateY(8px)}.nav-menu-close-icon .toggle-page-nav-button>span[data-v-3c57aa97]:first-child{border-radius:0;height:3px;transform:rotate(135deg);width:21px}.nav-menu-close-icon .toggle-page-nav-button>span[data-v-3c57aa97]:nth-child(2){transform:scale(0)}.nav-menu-close-icon .toggle-page-nav-button>span[data-v-3c57aa97]:nth-child(3){border-radius:0;height:3px;transform:rotate(-135deg);width:21px}@media (max-width:767px){.navbar[data-v-15113a2f]{padding-bottom:0;padding-left:0;padding-right:0}.navbar-left[data-v-15113a2f]{max-width:50%;order:1;padding-left:1rem}.navbar-left [data-v-15113a2f]{white-space:normal}.navbar-right[data-v-15113a2f]{max-width:50%;order:1;padding:0 16px}.navbar-default[data-v-15113a2f]{-ms-overflow-style:none;display:block;margin-top:.3125rem;order:2;overflow-x:scroll;scrollbar-width:none;width:100%}.navbar-default[data-v-15113a2f]::-webkit-scrollbar{display:none}.navbar-default ul[data-v-15113a2f]{flex-direction:row;margin-top:0!important;width:100%}.navbar-default>ul>[data-v-15113a2f]{background:rgba(0,0,0,.2);flex-grow:1;padding:.3125rem .625rem}.navbar-light .navbar-default>ul>[data-v-15113a2f]{background:rgba(0,0,0,.05)}.navbar-default>ul>.current[data-v-15113a2f]{background:transparent}.navbar-default a[data-v-15113a2f],[data-v-15113a2f] .dropdown-toggle{margin:0 auto;width:max-content}[data-v-15113a2f] .dropdown{align-items:center;display:flex}.container-fluid[data-v-15113a2f]{padding:0}}.navbar-brand[data-v-15113a2f]{display:inline-block}.navbar-brand>img[data-v-15113a2f],.navbar-brand>svg[data-v-15113a2f]{display:block}.navbar-right[data-v-15113a2f]{padding-right:1rem}.navbar-left[data-v-15113a2f]{align-items:center;display:flex;font-size:1.25rem;line-height:inherit;padding:.3125rem 1rem;white-space:nowrap}.navbar-fixed[data-v-15113a2f]{position:fixed;width:100%;z-index:1000}.navbar-default[data-v-15113a2f]{align-items:center;display:flex;flex-basis:auto;flex-grow:1}[data-v-15113a2f] .dropdown-current{background:#007bff;color:#fff!important}.lower-navbar-container[data-v-15113a2f]{background-color:#fff;border-bottom:1px solid #c1c1c1;height:50px;position:relative;width:100%}.navbar.navbar-dark .navbar-nav[data-v-15113a2f] .current:not(.dropdown) a,.navbar.navbar-dark .navbar-nav[data-v-15113a2f] .dropdown.current>a{color:#fff}.navbar.navbar-light .navbar-nav[data-v-15113a2f] .current:not(.dropdown) a,.navbar.navbar-light .navbar-nav[data-v-15113a2f] .dropdown.current>a{color:#000}.collapse-button{float:right;font-size:10px!important;margin-left:3px;margin-top:2px;padding:3px 8px!important}.collapse-icon{transition:transform .4s ease-in-out}.collapse-icon.opened{transform:rotate(-180deg)}.card-collapse[data-v-5681bde8]{overflow:hidden;transition:max-height .5s ease-in-out}.seamless-button[data-v-5681bde8]{opacity:0;transition:opacity .3s}.card-header:hover .seamless-button[data-v-5681bde8]{opacity:1}.card-peek-collapsed[data-v-5681bde8]{position:relative}.card-peek-collapsed[data-v-5681bde8]:after{background-image:linear-gradient(180deg,transparent,#fff 90%);bottom:0;content:"";height:125px;position:absolute;width:100%}.peek-read-more[data-v-5681bde8]{opacity:.2;transition:opacity .5s;z-index:1}.peek-read-more[data-v-5681bde8]:before{bottom:10px;position:absolute;text-align:center;width:100%}.peek-read-more[data-v-5681bde8]:hover{cursor:pointer;opacity:.4}.peek-read-more-fade-enter[data-v-5681bde8],.peek-read-more-fade-leave-to[data-v-5681bde8]{opacity:0}.card-heading{width:100%}.card-title{display:inline-block;font-size:1em;line-height:1.2em;margin:0;text-align:left;white-space:normal}.card-title *{margin-bottom:0!important}.caret-wrapper{float:left;width:32px}.minimal-caret-wrapper{display:inline-block;font-size:13px;margin-right:5px}.header-wrapper{display:inline-block;transition:opacity .5s;width:calc(100% - 128px)}.header-transparent{opacity:0}.button-wrapper{float:right;width:96px}.header-toggle{cursor:pointer}.expandable-card{margin-bottom:0!important;margin-top:5px}.card-group>.card-container>.expandable-card{margin-top:0!important}.card-seamless{padding:0}.card.card-seamless{border:none;box-shadow:none}.card-seamless>.card-heading{padding:0}.card-seamless>.card-collapse>hr{margin:0;width:calc(100% - 27px)}.card-seamless>.card-collapse>.card-body{padding:10px 0}.card-body>.collapse-button{margin-bottom:13px;margin-top:5px;opacity:.2}.card-body>.collapse-button:hover{opacity:1}.card-seamless>.card-collapse>.card-body>.collapse-button{position:relative;top:22px}.close-button{margin-left:3px}.close-button,.popup-button{float:right;font-size:10px!important;margin-top:2px;padding:3px 8px!important}.morph{display:inline-block}.morph-display-wrapper{align-items:center;display:flex;margin-top:5px}@media (max-width:575.98px){.header-wrapper{display:inline-block;width:calc(100% - 64px)}.button-wrapper{float:right;width:32px}.card-body{padding:.5rem}.card-collapse>hr{margin-top:1.5rem}.card-header{padding:.5rem}}.card-peek-collapsed[data-v-e932f598]{position:relative}.card-peek-collapsed[data-v-e932f598]:after{background-image:linear-gradient(180deg,transparent,#fff 90%);bottom:0;content:"";height:125px;position:absolute;width:100%}.morph-title[data-v-e932f598]{background-color:transparent;border-color:#000;padding:0 .3em;vertical-align:top}.morph-title[data-v-e932f598]:active,.morph-title[data-v-e932f598]:focus,.morph-title[data-v-e932f598]:hover{background-color:#343a40;border-color:#343a40;color:#fff}.card-collapse[data-v-e932f598]{overflow:hidden;transition:max-height .5s ease-in-out}.card-flex[data-v-e932f598]{border:0;display:flex;flex-direction:column;margin:0}.header-fade-enter[data-v-e932f598]{opacity:0}.header-fade-leave-active[data-v-e932f598]{position:absolute}.header-fade-leave-to[data-v-e932f598]{opacity:0!important}.card-title-inline[data-v-e932f598]{display:inline-block}.card-body[data-v-e932f598]{padding:0}.header-wrapper[data-v-e932f598]{background-color:#fff;display:inline-block;width:100%}.header-wrapper-bottom[data-v-e932f598]{order:1}.ellipses[data-v-e932f598]:before{bottom:3px;content:"...";font-weight:900;margin-right:4px;position:relative}.button-wrapper[data-v-e932f598]{border:solid hsla(0,0%,59%,.2);border-width:0 0 0 1px;display:inline-block;float:none;margin-left:2px;opacity:0;padding-left:2px;transition:opacity .5s;vertical-align:text-top;width:auto}.button-wrapper-expanded[data-v-e932f598]{border:0;margin-left:0;padding-left:0}.card:hover .button-wrapper[data-v-e932f598]{opacity:1}.header-toggle[data-v-e932f598]{cursor:pointer}.glyphicon[data-v-e932f598]{font-size:12px}.minimal-button[data-v-e932f598]{background-color:transparent;border:0;color:#969696;cursor:pointer;padding:0 3px}.minimal-button[data-v-e932f598]:active,.minimal-button[data-v-e932f598]:focus,.minimal-button[data-v-e932f598]:hover{color:#1e1e1e}.minimal-popup-button[data-v-e932f598]{font-size:9px;top:1px}.minimal-menu-up[data-v-e932f598]{font-size:13px;top:2px}.minimal-menu-down[data-v-e932f598]{font-size:13px;top:1px}.minimal-close-button[data-v-e932f598]{font-size:11px;top:0}@media (max-width:575.98px){.button-wrapper-expanded[data-v-e932f598]{border:0;margin-left:0;opacity:.15;padding-left:0}.button-wrapper-visible[data-v-e932f598]{opacity:1}}.annotate-image-wrapper{display:inline-block;position:relative;text-align:left}.annotate-image{height:auto;max-width:100%}.annotate-point{bottom:0;left:0;pointer-events:none;top:0}.annotate-point,.popover-annotation{height:100%;position:absolute;width:100%}.hover-point{border-radius:50%;border-style:solid;border-width:1px;z-index:1}.hover-label{pointer-events:none;position:absolute;text-align:center;z-index:2}.hover-wrapper{align-items:center;background:transparent;display:inline-flex;justify-content:center;z-index:0}.legend-wrapper{height:100%;position:relative}.text-header{font-size:1.1em;font-weight:500;margin-top:1em}.image-wrapper{display:inline-block;padding:4px;text-align:center}.image-caption{display:block}.quiz-container[data-v-c7bbe514]{isolation:isolate;overflow:hidden}.intro-outro-card[data-v-c7bbe514]{transition:opacity .5s}.intro-outro-card-enter-active[data-v-c7bbe514],.intro-outro-card-leave-to[data-v-c7bbe514]{opacity:0}.intro-outro-card>.card-body[data-v-c7bbe514]{align-items:center;display:flex;flex-direction:column;justify-content:center}.score[data-v-c7bbe514]{font-size:1.4rem;font-weight:700}.score-circle[data-v-c7bbe514]{stroke-dasharray:264;fill:none;stroke:rgba(132,215,255,.8);stroke-width:8;transition:stroke-dashoffset 1.5s ease-out,stroke 1.5s linear}.score-background-circle[data-v-c7bbe514]{fill:none;stroke:hsla(0,2%,89%,.5);stroke-width:8}.btn[data-v-c7bbe514]{border-radius:2em}.progress-bar-z[data-v-c7bbe514]{z-index:1}.result-icon[data-v-48074a07]{align-items:center;border-radius:2em;border-style:solid;border-width:2px;display:inline-flex;height:2em;justify-content:center;width:2em}.question[data-v-48074a07]{margin-bottom:1rem;transition:transform .5s ease-out,opacity .5s linear}.question-enter-active[data-v-48074a07]{opacity:0;transform:translateY(-2%)}.question-leave-to[data-v-48074a07]{opacity:0;transform:translateY(2%)}.q-btn[data-v-48074a07]{border-radius:2.5em;transition:opacity .5s,transform .7s}.q-btn-enter[data-v-48074a07]{opacity:0;transform:translateY(30px)}.q-btn-leave-to[data-v-48074a07]{opacity:0;transform:translateX(calc(-100% - .25rem))}.q-btn-leave-active[data-v-48074a07]{position:absolute}.card-header[data-v-48074a07]{font-size:1.05em;font-weight:400}.answer[data-v-48074a07]>:last-child,.card-header[data-v-48074a07]>:last-child{margin-bottom:0}@keyframes shake-data-v-48074a07{50%{transform:translate(-2px)}to{transform:translate(2px)}}.shake[data-v-48074a07]{animation:shake-data-v-48074a07 .15s;animation-iteration-count:1}textarea.form-control[data-v-48074a07]{height:auto;margin-bottom:10px;min-height:75px}.fa-check[data-v-41dcef96],.fa-times[data-v-41dcef96]{font-size:1.2em}.content[data-v-41dcef96] :last-child,.reason[data-v-41dcef96] :last-child{margin-bottom:0}.reason[data-v-41dcef96]{padding:0 .5rem}.checkbox-label[data-v-41dcef96]{cursor:pointer}.form-control[data-v-41dcef96]{cursor:pointer;height:auto;margin-bottom:10px}.form-control.danger>.checkbox-label[data-v-41dcef96],.form-control.danger[data-v-41dcef96],.form-control.success>.checkbox-label[data-v-41dcef96],.form-control.success[data-v-41dcef96]{cursor:default}.disabled[data-v-41dcef96]{opacity:.9}.radio-svg[data-v-41dcef96]{height:1em;vertical-align:text-top;width:1em}.checkbox[data-v-41dcef96]{height:1em;margin-right:5px;vertical-align:middle;width:1em}.row[data-v-41dcef96]{align-items:center;margin:.2rem 0 0}input.form-control[data-v-41dcef96]{cursor:text;height:auto;margin-bottom:0;min-height:20px;width:50%}.blanks-keywords[data-v-41dcef96],input.form-control[data-v-41dcef96]:disabled{margin-bottom:.5rem}.blanks-form-control[data-v-41dcef96]{border:none;cursor:default}.blanks-cross[data-v-41dcef96]{margin-left:3px;margin-right:3px}.fa-hashtag[data-v-521e76fe],.fa-key[data-v-521e76fe]{padding-right:.2em}.mark[data-v-521e76fe]{padding:0!important}.heading[data-v-521e76fe]{padding:0 0 .1rem .2rem}.heading-text[data-v-521e76fe]{display:inline-block;vertical-align:top;white-space:normal;width:92%;word-break:break-word}.keyword-text[data-v-521e76fe]{font-size:smaller}.page-title[data-v-521e76fe]{font-size:1.05rem;font-weight:700}.page-headings-separator[data-v-521e76fe]{margin:.2rem 0}.dropdown[data-v-2955e59c]{display:block}.form-control[data-v-2955e59c]{max-width:25.4em;min-width:12.7em}@media screen and (max-width:878px) and (orientation:portrait){.form-control[data-v-2955e59c]{max-width:16em;min-width:8em}}@media screen and (min-width:768px) and (max-width:878px) and (orientation:landscape){.form-control[data-v-2955e59c]{max-width:18em;min-width:9em}}.table-active[data-v-2955e59c]{background-color:rgba(0,0,0,.075)}.dropdown-menu-end[data-v-2955e59c]{left:auto;right:0}.placeholder-div-hidden[data-v-2955e59c]{border-bottom:0;border-top:0;height:0;overflow:hidden;padding-bottom:0;padding-top:0;visibility:hidden}.search-dropdown-menu{max-height:30em;min-width:30em;overflow-y:scroll}.dropdown-menu>li>a{cursor:pointer}@media screen and (max-width:768px){.search-dropdown-menu{max-height:30em;min-width:90vw;overflow-y:scroll}.dropdown-menu.search-dropdown-menu{position:absolute}}.tab-pane>hr[data-v-430db186]{margin:0}.printable-tab-header[data-v-430db186],.tab-pane-hide[data-v-430db186]{display:none}@media print{.printable-tab-header[data-v-430db186]{border-bottom:1px solid #dee2e6;display:flex;margin-bottom:15px}.printable-tab-header>div[data-v-430db186]{margin-bottom:-2px}.printable-tab-pane[data-v-430db186]{display:block;padding:10px}}.nav-tabs[data-v-4ad59749]{margin-bottom:15px}.printable-tab-group-header[data-v-4ad59749]{display:none}@media print{.printable-tab-group[data-v-4ad59749]{border:1px solid #dee2e6;border-radius:5px;margin:10px 0;padding:10px}.printable-tab-group-header[data-v-4ad59749]{display:block;margin-bottom:10px;text-decoration:underline}}.nav-tabs[data-v-3b6be04c]{margin-bottom:15px}.tab-content[data-v-3b6be04c]{margin-bottom:1.5rem}@media print{.printable-tabs[data-v-3b6be04c]{border:1px solid #dee2e6;border-radius:5px;padding:20px}}.thumb-wrapper{display:inline-block;overflow:hidden;position:relative;text-align:center;vertical-align:middle}.thumb-circle{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}.thumb-image{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}.site-nav-root a.current{color:#0072ec}.site-nav-list{list-style-type:none;padding-left:0}.site-nav-default-list-item{cursor:pointer;display:flex;transition:background-color .08s}.site-nav-custom-list-item,.site-nav-default-list-item{color:#454545;padding:.5rem 0 0 2.8rem}.site-nav-list-item-0{font-size:1.05em;font-weight:600;padding:.8rem 0 .4rem .8rem}.site-nav-list-item-1{padding:.5rem 0 .3rem 1.3rem}.site-nav-list-item-2{font-size:.95em;padding:.5rem 0 .2rem 1.8rem}.site-nav-list-item-3{font-size:.87em;padding:.5rem 0 .2rem 2.4rem}.site-nav-default-list-item:hover{background-color:rgba(214,233,255,.35)}.site-nav-default-list-item a{color:#454545;display:inline-block;height:100%}.site-nav-default-list-item:hover a{color:#000;text-decoration:none}.site-nav-dropdown-btn-icon{align-self:center;border-radius:1rem;display:inline-block;height:1.5em;margin:0 .5rem 0 auto;text-align:center;transform:rotate(0deg);-webkit-transform:rotate(0deg);transition:.4s;-webkit-transition:.4s;width:1.5em}.site-nav-dropdown-btn-icon:hover{background-color:#d8e3fb}.site-nav-rotate-icon{color:#4c7ff1;transform:rotate(-180deg);-webkit-transform:rotate(-180deg)}.site-nav-dropdown-container{background:transparent;max-height:0;overflow:hidden;transition:max-height .15s ease-out;-webkit-transition:max-height .15s ease-out}.site-nav-dropdown-container-open{max-height:1000px;transition:max-height .25s ease-in;-webkit-transition:max-height .25s ease-in}.nav-menu[data-v-032a677e]{display:none;overflow-y:auto;padding:0 10px 20px;position:absolute;top:100%}.nav-menu-open[data-v-032a677e]{background:#fff;clear:both;display:block!important;width:100%!important}.mb-mobile-nav[data-v-e8c82f88]{border:none!important;display:block!important;margin:0!important;max-width:100%!important;padding:10px!important;width:100%!important}.popover-container{max-height:50vh;max-width:276px;overflow:auto}.popover-body{font-size:.875rem}.v-popper{display:inline}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.9);font-size:.875rem;max-width:200px;padding:4px 8px;text-align:center}.allow-overflow{overflow:auto}.modal-zoom{opacity:0;-webkit-transform:scale(.1);-moz-transform:scale(.1);-ms-transform:scale(.1);transform:scale(.1)}.modal-zoom,.modal-zoom-show{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.modal-zoom-show{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}:root{--sticky-header-height:0}a{text-decoration:none}blockquote{border-left:.25em solid #dfe2e5;color:#6a737d;padding:0 1rem}code{background:#f8f8f8;border-radius:3px;padding:.2em .4em;word-break:normal}mark code{background:#ffffffd4}pre.hljs>code{background:none}pre>code.hljs{-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:5px;counter-reset:line;width:100%}pre>code.hljs[heading]{border-top-right-radius:0}.code-block{position:relative}.code-block-heading{border-radius:6px 6px 0 0;float:right;font-size:85%;line-height:1;margin-top:5px;max-width:85%;overflow-wrap:break-word;padding:.25em .4em;text-align:right}.inline-markdown-heading{line-height:1.5}.code-block-content{clear:both;display:block}@media print{code.hljs.inline,pre>code.hljs{background:#f8f8ff;color:#333}code.hljs.inline{border:.5px solid #d4d4d4}code span.highlighted{background:#e6e6fa}}kbd{background-color:#fafbfc;border:1px solid #c6cbd1;border-bottom-color:#959da5;box-shadow:inset 0 -1px 0 #959da5;color:#444d56}.btn:active,.btn:focus{box-shadow:none!important;outline:none!important}code.hljs.inline{display:initial;padding:.2em .4em}.markbind-table{width:auto}.radio-list-item,.task-list-item{list-style-type:none;margin:0 0 0 -1.2em}.radio-list-item label{font-weight:inherit}.table-striped>tbody>tr:nth-of-type(2n),.table-striped>thead{background-color:#fff}header[sticky]{position:sticky;top:0;transition:transform .3s ease-in-out;width:100%;z-index:1001}header[sticky].hide-header{transform:translateY(calc(var(--sticky-header-height)*-1))}span.anchor{position:relative;top:calc(var(--sticky-header-height)*-1 - 1rem)}#app{display:flex;flex-direction:column;min-height:100vh}footer{background-color:#f5f5f5;color:dimgrey;padding:10px 0}.dimmed{color:#777}.large{font-size:125%}.small{font-size:80%}.underline{text-decoration:underline}.mkb-text-red{color:red!important}.mkb-text-green{color:green!important}.mkb-text-blue{color:blue!important}.mkb-text-cyan{color:cyan!important}.mkb-text-magenta{color:#f0f!important}.mkb-text-yellow{color:#ff0!important}.mkb-text-black{color:#000!important}.mkb-text-white{color:#fff!important}@media (max-width:767.98px){.dropdown-menu>li>a{white-space:normal}.navbar-nav .open .dropdown-menu{background-color:#fff}}li.footnote-item:target{background-color:#eee}.hljs:not(.inline)>span{display:block}.hljs:not(.inline).line-numbers>span{padding:0 .5em 0 3.5em;position:relative}.hljs:not(.inline).line-numbers>span:before{border-right:1px solid #ddd;color:#888;content:counter(line);counter-increment:line;display:inline-block;height:100%;left:0;margin-right:.5em;padding-right:.5em;position:absolute;text-align:right;top:0;width:3em}.trigger{border-bottom:1px dotted}.trigger-click{border-bottom:1px dashed;cursor:pointer}.trigger-click:focus{outline:none}pre{display:flex;position:relative}button.function-btn{border:1px solid #d7dadc;border-radius:5px;color:#a9a9a9;cursor:pointer;display:none;margin:.17rem;padding:.35rem;position:absolute;right:0;text-align:center;white-space:nowrap}button.function-btn+button.function-btn{right:36px}pre:hover>.function-btn-container>button.function-btn{display:block}.function-btn:hover{color:gray;transition:all .5s ease}.function-btn-body{align-items:center;display:flex}.function-btn svg{fill:currentColor}code.wrap{word-wrap:break-word;white-space:pre-wrap}.octicon{height:1em;width:1em}hr{background-color:transparent;border-top:1px solid rgba(0,0,0,.1);opacity:1}hr.dotted{border-top-style:dotted;border-top-width:.1rem}hr.double{border-top-style:double;border-top-width:.2rem}hr.dashed{border-top-style:dashed;border-top-width:.1rem}hr.thick{border-top-width:.15rem}hr.thick-1{border-top-width:.25rem}hr.thick-2{border-top-width:.5rem}hr.thick-3{border-top-width:.75rem}ol,ul{padding-left:1.5rem}h1,h2,h3,h4,h5,h6{margin-bottom:1rem}.block-embed{overflow-x:auto;position:relative;width:100%}.block-embed iframe{height:100%;left:0;position:absolute;top:0;width:100%}#mb-page-nav{padding:.8rem 12px 0}#mb-page-nav a:link,#mb-page-nav a:visited{color:#9b9b9b;text-decoration:none}#mb-page-nav a:hover{color:#000}#mb-page-nav a.active{background-color:transparent;color:#000}.page-nav-title{color:#000;display:block;padding-left:.5rem;white-space:inherit}.nested{margin-left:5%}.no-flex-wrap{flex-wrap:nowrap}#scroll-top-button{bottom:20px;cursor:pointer;display:none;opacity:.4;position:fixed;right:30px;transition-duration:.25s;transition-property:opacity;z-index:99}#scroll-top-button.lighten{opacity:.15}@media (hover:hover){#scroll-top-button:hover{opacity:.7}}#scroll-top-button:active{opacity:1}@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(../fonts/KaTeX_AMS-Regular.woff) format("woff"),url(../fonts/KaTeX_AMS-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(../fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(../fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(../fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(../fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(../fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(../fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(../fonts/KaTeX_Fraktur-Bold.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(../fonts/KaTeX_Fraktur-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(../fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(../fonts/KaTeX_Main-Bold.woff) format("woff"),url(../fonts/KaTeX_Main-Bold.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(../fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(../fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(../fonts/KaTeX_Main-BoldItalic.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(../fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(../fonts/KaTeX_Main-Italic.woff) format("woff"),url(../fonts/KaTeX_Main-Italic.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Main-Regular.woff) format("woff"),url(../fonts/KaTeX_Main-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(../fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(../fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(../fonts/KaTeX_Math-BoldItalic.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(../fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(../fonts/KaTeX_Math-Italic.woff) format("woff"),url(../fonts/KaTeX_Math-Italic.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(../fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(../fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(../fonts/KaTeX_SansSerif-Bold.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(../fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(../fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(../fonts/KaTeX_SansSerif-Italic.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(../fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(../fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(../fonts/KaTeX_SansSerif-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Script-Regular.woff) format("woff"),url(../fonts/KaTeX_Script-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Size1-Regular.woff) format("woff"),url(../fonts/KaTeX_Size1-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Size2-Regular.woff) format("woff"),url(../fonts/KaTeX_Size2-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Size3-Regular.woff) format("woff"),url(../fonts/KaTeX_Size3-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Size4-Regular.woff) format("woff"),url(../fonts/KaTeX_Size4-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(../fonts/KaTeX_Typewriter-Regular.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.15.6"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.27777778em;margin-right:-.55555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.83333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.16666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.66666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.45666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.14666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.71428571em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.85714286em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.14285714em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.28571429em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.42857143em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.71428571em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.05714286em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.46857143em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.96285714em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.55428571em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.55555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.66666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.77777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.88888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.11111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.30444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.76444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.41666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.58333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.66666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.83333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.72833333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.07333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.34722222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.41666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.48611111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.55555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.69444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.83333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.44027778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.72777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.28935185em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.34722222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.40509259em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.46296296em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.52083333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.69444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.83333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.20023148em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.43981481em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.24108004em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.28929605em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.33751205em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.38572806em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.43394407em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.48216008em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.57859209em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.69431051em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.83317261em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.19961427em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.20096463em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.24115756em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.28135048em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.32154341em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.36173633em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.40192926em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.48231511em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.57877814em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.69453376em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.83360129em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}.katex{font-size:1em!important}eq{display:inline-block}eqn{display:block}section.eqno{align-content:space-between;align-items:center;display:flex;flex-direction:row}section.eqno>eqn{margin-left:3em;width:100%}section.eqno>span{text-align:right;width:3em} \ No newline at end of file +.resize-observer[data-v-8859cc6c]{background-color:transparent;border:none;opacity:0}.resize-observer[data-v-8859cc6c],.resize-observer[data-v-8859cc6c] object{display:block;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%;z-index:-1}.v-popper__popper{left:0;top:0;z-index:10000}.v-popper__popper.v-popper__popper--hidden{opacity:0;pointer-events:none;transition:opacity .15s,visibility .15s;visibility:hidden}.v-popper__popper.v-popper__popper--shown{opacity:1;transition:opacity .15s;visibility:visible}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{display:none;height:100%;left:0;position:absolute;top:0;width:100%}.v-popper__inner{box-sizing:border-box;overflow-y:auto;position:relative}.v-popper__inner>div{max-height:inherit;max-width:inherit;position:relative;z-index:1}.v-popper__arrow-container{height:10px;position:absolute;width:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;height:0;left:0;position:absolute;top:0;width:0}.v-popper__arrow-inner{border-width:7px;visibility:hidden}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-color:transparent!important;border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important;border-top-width:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-bottom-color:transparent!important;border-left-color:transparent!important;border-left-width:0;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-bottom-color:transparent!important;border-right-color:transparent!important;border-right-width:0;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-dropdown .v-popper__inner{background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 6px 30px #0000001a;color:#000}.v-popper--theme-dropdown .v-popper__arrow-inner{border-color:#fff;visibility:visible}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);border-radius:6px;color:#fff;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.box-container[data-v-4d146e2c]{border-radius:6px;padding:0}.box-header-wrapper[data-v-4d146e2c]{align-items:center;border-radius:6px 6px 0 0;display:flex;flex-direction:row;padding:.4rem 1.25rem .28rem;width:100%}.box-body-wrapper[data-v-4d146e2c]{display:flex;flex-direction:row;padding:.75rem 1.25rem;width:100%}.box-container.seamless>.header-and-body>.box-body-wrapper[data-v-4d146e2c]{padding:.75rem .5rem}.contents[data-v-4d146e2c]{min-width:0;padding:0 6px;width:100%}.box-container.seamless>.header-and-body>div.box-body-wrapper>.contents[data-v-4d146e2c]{padding-left:12px}.heading[data-v-4d146e2c]{background-color:hsla(0,0%,94%,.6);border-radius:0 6px 0 6px;border-width:0;color:inherit;display:inline;float:right;font-weight:400;margin:-13px -27px 0 15px;padding:3px 5px 4px;width:auto}.box-body-wrapper-with-heading[data-v-4d146e2c]{padding-top:.5rem}.alert-dismissible[data-v-4d146e2c]{padding-right:4rem}.box-header[data-v-4d146e2c]{font-weight:500}.icon-wrapper[data-v-4d146e2c]{display:inline;margin-right:.5em;min-width:1em;text-align:center}.close-with-heading[data-v-4d146e2c]{padding:1rem;position:absolute;right:0;top:0}.close-with-heading>span[data-v-4d146e2c]{vertical-align:text-top}.alert-dismissible .btn-close[data-v-4d146e2c]{padding:1rem}.contents[data-v-4d146e2c]>:last-child{margin-bottom:0}.alert-default[data-v-4d146e2c]{background-color:#f6f8fa;border-color:#e8ebef;color:#24292e}.alert-border-left[data-v-4d146e2c]{background-color:#f9f8f8;border-left:solid;border-width:0 0 0 5px}.vertical-divider[data-v-4d146e2c]{width:4px}.horizontal-divider[data-v-4d146e2c]{height:3px;margin:0 auto;width:calc(100% - 2.5rem)}.no-background[data-v-4d146e2c]{background:none}.no-border[data-v-4d146e2c]{border:none}@media screen and (max-width:768px){.box-header-wrapper[data-v-4d146e2c]{padding:.75rem .75rem .1rem}.box-body-wrapper[data-v-4d146e2c]{padding:.75rem}.contents[data-v-4d146e2c]{padding:0}}div.box-header>*{margin-bottom:0}.notlink[data-v-ef898034]{color:#6d757d}.breadcrumb-divider[data-v-ef898034]{--bs-breadcrumb-divider:"›"}.breadcrumb-item[data-v-ef898034]:before,.breadcrumb-marker[data-v-ef898034]{font-size:15px}.dropdown-submenu[data-v-6df16086]{color:#212529!important;padding:0!important;position:relative}.dropdown-submenu ul.dropdown-menu[data-v-6df16086]{margin-left:0}.btn-group>ul>.dropdown-submenu:last-child>ul[data-v-6df16086],.dropdown>ul>.dropdown-submenu:last-child>ul[data-v-6df16086]{margin-bottom:-.5rem}@media (min-width:768px){.submenu-toggle[data-v-6df16086]:after{border-bottom:.3em solid transparent;border-left:.3em solid;border-right:0;border-top:.3em solid transparent;content:"";display:inline-block;float:right;height:0;margin-top:.5em;vertical-align:.255em;width:0}}@media (max-width:767px){.dropdown-submenu>ul[data-v-6df16086]{border-radius:0;float:none;margin:-.05rem;padding-bottom:0;position:static}.submenu-toggle[data-v-6df16086]:after{border-bottom:0;border-left:.3em solid transparent;border-right:.3em solid transparent;border-top:.3em solid;content:"";display:inline-block;float:right;height:0;margin-left:.255em;margin-top:.5em;vertical-align:.255em;width:0}.navbar-default .dropdown[data-v-12679d7e]{position:static}.navbar-default .dropdown-menu[data-v-12679d7e]{max-height:75vh;max-width:100%;overflow-y:auto;overscroll-behavior:contain;position:absolute}.navbar-default .dropdown-menu-end[data-v-12679d7e]{right:auto}}.secret[data-v-12679d7e]{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.btn-with-before[data-v-12679d7e]{padding-left:.2rem;padding-right:.4rem}.dropdown-toggle[data-v-12679d7e]{cursor:pointer;display:block;width:max-content}.navbar .dropdown-toggle[data-v-12679d7e]{text-decoration:none}.nav-link>.nav-link[data-v-12679d7e]{padding:0}.toggle-site-nav-button[data-v-d6ffaa8e]{cursor:pointer;height:53px;left:0;padding:15px;position:absolute;transform:rotate(0deg);transition:all .25s ease-in-out;width:52px}.toggle-site-nav-button span[data-v-d6ffaa8e]{background-color:#000;display:block;height:3px;left:15px;position:absolute;top:50%;transition:all .25s ease-in-out;width:21px}.toggle-site-nav-button>span[data-v-d6ffaa8e]:first-child{transform:translateY(-8px)}.toggle-site-nav-button>span[data-v-d6ffaa8e]:nth-child(2){transform-origin:100% 50%}.toggle-site-nav-button>span[data-v-d6ffaa8e]:nth-child(3){transform:translateY(8px)}.nav-menu-close-icon .toggle-site-nav-button>span[data-v-d6ffaa8e]:first-child{transform:rotate(135deg)}.nav-menu-close-icon .toggle-site-nav-button>span[data-v-d6ffaa8e]:nth-child(2){left:-60px;opacity:0}.nav-menu-close-icon .toggle-site-nav-button>span[data-v-d6ffaa8e]:nth-child(3){transform:rotate(-135deg)}.toggle-page-nav-button[data-v-4b08b1df]{cursor:pointer;padding:15px;position:absolute;right:0;top:6px}.toggle-page-nav-button span[data-v-4b08b1df]{background-color:#000;border-radius:50%;display:block;height:5px;margin-top:2px;position:absolute;right:15px;transform:rotate(0deg);transition:all .25s ease-in-out;width:5px}.toggle-page-nav-button>span[data-v-4b08b1df]:first-child{transform:translateY(-8px)}.toggle-page-nav-button>span[data-v-4b08b1df]:nth-child(2){transform-origin:100% 50%}.toggle-page-nav-button>span[data-v-4b08b1df]:nth-child(3){transform:translateY(8px)}.nav-menu-close-icon .toggle-page-nav-button>span[data-v-4b08b1df]:first-child{border-radius:0;height:3px;transform:rotate(135deg);width:21px}.nav-menu-close-icon .toggle-page-nav-button>span[data-v-4b08b1df]:nth-child(2){transform:scale(0)}.nav-menu-close-icon .toggle-page-nav-button>span[data-v-4b08b1df]:nth-child(3){border-radius:0;height:3px;transform:rotate(-135deg);width:21px}@media (max-width:767px){.navbar[data-v-73b4aa16]{padding-bottom:0;padding-left:0;padding-right:0}.navbar-left[data-v-73b4aa16]{max-width:50%;order:1;padding-left:1rem}.navbar-left [data-v-73b4aa16]{white-space:normal}.navbar-right[data-v-73b4aa16]{max-width:50%;order:1;padding:0 16px}.navbar-default[data-v-73b4aa16]{-ms-overflow-style:none;display:block;margin-top:.3125rem;order:2;overflow-x:scroll;scrollbar-width:none;width:100%}.navbar-default[data-v-73b4aa16]::-webkit-scrollbar{display:none}.navbar-default ul[data-v-73b4aa16]{flex-direction:row;margin-top:0!important;width:100%}.navbar-default>ul>[data-v-73b4aa16]{background:rgba(0,0,0,.2);flex-grow:1;padding:.3125rem .625rem}.navbar-light .navbar-default>ul>[data-v-73b4aa16]{background:rgba(0,0,0,.05)}.navbar-default>ul>.current[data-v-73b4aa16]{background:transparent}.navbar-default a[data-v-73b4aa16],[data-v-73b4aa16] .dropdown-toggle{margin:0 auto;width:max-content}[data-v-73b4aa16] .dropdown{align-items:center;display:flex}.container-fluid[data-v-73b4aa16]{padding:0}}.navbar-brand[data-v-73b4aa16]{display:inline-block}.navbar-brand>img[data-v-73b4aa16],.navbar-brand>svg[data-v-73b4aa16]{display:block}.navbar-right[data-v-73b4aa16]{padding-right:1rem}.navbar-left[data-v-73b4aa16]{align-items:center;display:flex;font-size:1.25rem;line-height:inherit;padding:.3125rem 1rem;white-space:nowrap}.navbar-fixed[data-v-73b4aa16]{position:fixed;width:100%;z-index:1000}.navbar-default[data-v-73b4aa16]{align-items:center;display:flex;flex-basis:auto;flex-grow:1}[data-v-73b4aa16] .dropdown-current{background:#007bff;color:#fff!important}.lower-navbar-container[data-v-73b4aa16]{background-color:#fff;border-bottom:1px solid #c1c1c1;height:50px;position:relative;width:100%}.navbar.navbar-dark .navbar-nav[data-v-73b4aa16] .current:not(.dropdown) a,.navbar.navbar-dark .navbar-nav[data-v-73b4aa16] .dropdown.current>a{color:#fff}.navbar.navbar-light .navbar-nav[data-v-73b4aa16] .current:not(.dropdown) a,.navbar.navbar-light .navbar-nav[data-v-73b4aa16] .dropdown.current>a{color:#000}.collapse-button{float:right;font-size:10px!important;margin-left:3px;margin-top:2px;padding:3px 8px!important}.collapse-icon{transition:transform .4s ease-in-out}.collapse-icon.opened{transform:rotate(-180deg)}.card-container[data-v-264cd63c]{scroll-margin-top:var(--sticky-header-height)}.card-collapse[data-v-264cd63c]{overflow:hidden;transition:max-height .5s ease-in-out}.seamless-button[data-v-264cd63c]{opacity:0;transition:opacity .3s}.card-header:hover .seamless-button[data-v-264cd63c]{opacity:1}.card-peek-collapsed[data-v-264cd63c]{position:relative}.card-peek-collapsed[data-v-264cd63c]:after{background-image:linear-gradient(180deg,transparent,#fff 90%);bottom:0;content:"";height:125px;position:absolute;width:100%}.peek-read-more[data-v-264cd63c]{opacity:.2;transition:opacity .5s;z-index:1}.peek-read-more[data-v-264cd63c]:before{bottom:10px;position:absolute;text-align:center;width:100%}.peek-read-more[data-v-264cd63c]:hover{cursor:pointer;opacity:.4}.peek-read-more-fade-enter[data-v-264cd63c],.peek-read-more-fade-leave-to[data-v-264cd63c]{opacity:0}.card-heading{width:100%}.card-title{display:inline-block;font-size:1em;line-height:1.2em;margin:0;text-align:left;white-space:normal}.card-title *{margin-bottom:0!important}.caret-wrapper{float:left;width:32px}.minimal-caret-wrapper{display:inline-block;font-size:13px;margin-right:5px}.header-wrapper{display:inline-block;transition:opacity .5s;width:calc(100% - 128px)}.header-transparent{opacity:0}.button-wrapper{float:right;width:96px}.header-toggle{cursor:pointer}.expandable-card{margin-bottom:0!important;margin-top:5px}.card-collapse>hr{margin-top:0}.card-group>.card-container>.expandable-card{margin-top:0!important}.card-seamless{padding:0}.card.card-seamless{border:none;box-shadow:none}.card-seamless>.card-heading{padding:0}.card-seamless>.card-collapse>hr{margin:0;width:calc(100% - 27px)}.card-seamless>.card-collapse>.card-body{padding:10px 0}.card-body>.collapse-button{margin-bottom:13px;margin-top:5px;opacity:.2}.card-body>.collapse-button:hover{opacity:1}.card-seamless>.card-collapse>.card-body>.collapse-button{position:relative;top:22px}.close-button{margin-left:3px}.close-button,.popup-button{float:right;font-size:10px!important;margin-top:2px;padding:3px 8px!important}.morph{display:inline-block}.morph-display-wrapper{align-items:center;display:flex;margin-top:5px}@media (max-width:575.98px){.header-wrapper{display:inline-block;width:calc(100% - 64px)}.button-wrapper{float:right;width:32px}.card-body{padding:.5rem}.card-collapse>hr{margin-top:.5rem}.card-header{padding:.5rem}}.card-peek-collapsed[data-v-01605258]{position:relative}.card-peek-collapsed[data-v-01605258]:after{background-image:linear-gradient(180deg,transparent,#fff 90%);bottom:0;content:"";height:125px;position:absolute;width:100%}.morph-title[data-v-01605258]{background-color:transparent;border-color:#000;padding:0 .3em;vertical-align:top}.morph-title[data-v-01605258]:active,.morph-title[data-v-01605258]:focus,.morph-title[data-v-01605258]:hover{background-color:#343a40;border-color:#343a40;color:#fff}.card-collapse[data-v-01605258]{overflow:hidden;transition:max-height .5s ease-in-out}.card-flex[data-v-01605258]{border:0;display:flex;flex-direction:column;margin:0}.header-fade-enter[data-v-01605258]{opacity:0}.header-fade-leave-active[data-v-01605258]{position:absolute}.header-fade-leave-to[data-v-01605258]{opacity:0!important}.card-title-inline[data-v-01605258]{display:inline-block}.card-body[data-v-01605258]{padding:0}.header-wrapper[data-v-01605258]{background-color:#fff;display:inline-block;width:100%}.header-wrapper-bottom[data-v-01605258]{order:1}.ellipses[data-v-01605258]:before{bottom:3px;content:"...";font-weight:900;margin-right:4px;position:relative}.button-wrapper[data-v-01605258]{border:solid hsla(0,0%,59%,.2);border-width:0 0 0 1px;display:inline-block;float:none;margin-left:2px;opacity:0;padding-left:2px;transition:opacity .5s;vertical-align:text-top;width:auto}.button-wrapper-expanded[data-v-01605258]{border:0;margin-left:0;padding-left:0}.card:hover .button-wrapper[data-v-01605258]{opacity:1}.header-toggle[data-v-01605258]{cursor:pointer}.glyphicon[data-v-01605258]{font-size:12px}.minimal-button[data-v-01605258]{background-color:transparent;border:0;color:#969696;cursor:pointer;padding:0 3px}.minimal-button[data-v-01605258]:active,.minimal-button[data-v-01605258]:focus,.minimal-button[data-v-01605258]:hover{color:#1e1e1e}.minimal-popup-button[data-v-01605258]{font-size:9px;top:1px}.minimal-menu-up[data-v-01605258]{font-size:13px;top:2px}.minimal-menu-down[data-v-01605258]{font-size:13px;top:1px}.minimal-close-button[data-v-01605258]{font-size:11px;top:0}@media (max-width:575.98px){.button-wrapper-expanded[data-v-01605258]{border:0;margin-left:0;opacity:.15;padding-left:0}.button-wrapper-visible[data-v-01605258]{opacity:1}}.annotate-image-wrapper{display:inline-block;position:relative;text-align:left}.annotate-image{height:auto;max-width:100%}.annotate-point{bottom:0;left:0;pointer-events:none;top:0}.annotate-point,.popover-annotation{height:100%;position:absolute;width:100%}.hover-point{border-radius:50%;border-style:solid;border-width:1px;z-index:1}.hover-label{pointer-events:none;position:absolute;text-align:center;z-index:2}.hover-wrapper{align-items:center;background:transparent;display:inline-flex;justify-content:center;z-index:0}.legend-wrapper{height:100%;position:relative}.text-header{font-size:1.1em;font-weight:500;margin-top:1em}.image-wrapper{display:inline-block;padding:4px;text-align:center}.image-caption{display:block}.quiz-container[data-v-7a8f322c]{isolation:isolate;overflow:hidden}.intro-outro-card[data-v-7a8f322c]{transition:transform .35s ease-out,opacity .35s linear}.intro-outro-card-enter-active[data-v-7a8f322c],.intro-outro-card-leave-to[data-v-7a8f322c]{opacity:0}.intro-outro-card>.card-body[data-v-7a8f322c]{align-items:center;display:flex;flex-direction:column;justify-content:center}.score[data-v-7a8f322c]{font-size:1.4rem;font-weight:700}.score-circle[data-v-7a8f322c]{stroke-dasharray:264;fill:none;stroke:rgba(132,215,255,.8);stroke-width:8;transition:stroke-dashoffset 1.5s ease-out,stroke 1.5s linear}.score-background-circle[data-v-7a8f322c]{fill:none;stroke:hsla(0,2%,89%,.5);stroke-width:8}.btn[data-v-7a8f322c]{border-radius:2em}.progress-bar-z[data-v-7a8f322c]{z-index:1}.result-icon[data-v-ae369d74]{align-items:center;border-radius:2em;border-style:solid;border-width:2px;display:inline-flex;height:2em;justify-content:center;width:2em}.question[data-v-ae369d74]{margin-bottom:1rem;transition:transform .35s ease-out,opacity .35s linear}.question-enter-active[data-v-ae369d74]{opacity:0;transform:translateY(-2%)}.question-leave-to[data-v-ae369d74]{opacity:0;transform:translateY(2%)}.q-btn[data-v-ae369d74]{border-radius:2.5em;transition:opacity .5s,transform .7s}.q-btn-enter[data-v-ae369d74]{opacity:0;transform:translateY(30px)}.q-btn-leave-to[data-v-ae369d74]{opacity:0;transform:translateX(calc(-100% - .25rem))}.q-btn-leave-active[data-v-ae369d74]{position:absolute}.card-header[data-v-ae369d74]{font-size:1.05em;font-weight:400}.answer[data-v-ae369d74]>:last-child,.card-header[data-v-ae369d74]>:last-child{margin-bottom:0}@keyframes shake-data-v-ae369d74{50%{transform:translate(-2px)}to{transform:translate(2px)}}.shake[data-v-ae369d74]{animation:shake-data-v-ae369d74 .15s;animation-iteration-count:1}textarea.form-control[data-v-ae369d74]{height:auto;margin-bottom:10px;min-height:75px}.fa-check[data-v-d09dfee8],.fa-times[data-v-d09dfee8]{font-size:1.2em}.content[data-v-d09dfee8] :last-child,.reason[data-v-d09dfee8] :last-child{margin-bottom:0}.reason[data-v-d09dfee8]{padding:0 .5rem}.checkbox-label[data-v-d09dfee8]{cursor:pointer}.form-control[data-v-d09dfee8]{cursor:pointer;height:auto;margin-bottom:10px}.form-control.danger>.checkbox-label[data-v-d09dfee8],.form-control.danger[data-v-d09dfee8],.form-control.success>.checkbox-label[data-v-d09dfee8],.form-control.success[data-v-d09dfee8]{cursor:default}.disabled[data-v-d09dfee8]{opacity:.9}.radio-svg[data-v-d09dfee8]{height:1em;vertical-align:text-top;width:1em}.checkbox[data-v-d09dfee8]{height:1em;margin-right:5px;vertical-align:middle;width:1em}.row[data-v-d09dfee8]{align-items:center;margin:.2rem 0 0}input.form-control[data-v-d09dfee8]{cursor:text;height:auto;margin-bottom:0;min-height:20px;width:50%}.blanks-keywords[data-v-d09dfee8],input.form-control[data-v-d09dfee8]:disabled{margin-bottom:.5rem}.blanks-form-control[data-v-d09dfee8]{border:none;cursor:default}.blanks-cross[data-v-d09dfee8]{margin-left:3px;margin-right:3px}.fa-hashtag[data-v-98afe086],.fa-key[data-v-98afe086]{padding-right:.2em}.mark[data-v-98afe086]{padding:0!important}.heading[data-v-98afe086]{padding:0 0 .1rem .2rem}.heading-text[data-v-98afe086]{display:inline-block;vertical-align:top;white-space:normal;width:92%;word-break:break-word}.keyword-text[data-v-98afe086]{font-size:smaller}.page-title[data-v-98afe086]{font-size:1.05rem;font-weight:700}.page-headings-separator[data-v-98afe086]{margin:.2rem 0}.dropdown[data-v-01e11c9b]{display:block}.form-control[data-v-01e11c9b]{max-width:25.4em;min-width:12.7em}@media screen and (max-width:878px) and (orientation:portrait){.form-control[data-v-01e11c9b]{max-width:16em;min-width:8em}}@media screen and (min-width:768px) and (max-width:878px) and (orientation:landscape){.form-control[data-v-01e11c9b]{max-width:18em;min-width:9em}}.table-active[data-v-01e11c9b]{background-color:rgba(0,0,0,.075)}.dropdown-menu-end[data-v-01e11c9b]{left:auto;right:0}.placeholder-div-hidden[data-v-01e11c9b]{border-bottom:0;border-top:0;height:0;overflow:hidden;padding-bottom:0;padding-top:0;visibility:hidden}.search-dropdown-menu{max-height:30em;min-width:30em;overflow-y:scroll}.dropdown-menu>li>a{cursor:pointer}@media screen and (max-width:768px){.search-dropdown-menu{max-height:30em;min-width:90vw;overflow-y:scroll}.dropdown-menu.search-dropdown-menu{position:absolute}}.tab-pane>hr[data-v-661c1b61]{margin:0}.printable-tab-header[data-v-661c1b61],.tab-pane-hide[data-v-661c1b61]{display:none}@media print{.printable-tab-header[data-v-661c1b61]{border-bottom:1px solid #dee2e6;display:flex;margin-bottom:15px}.printable-tab-header>div[data-v-661c1b61]{margin-bottom:-2px}.printable-tab-pane[data-v-661c1b61]{display:block;padding:10px}}.nav-tabs[data-v-a785351c]{margin-bottom:15px}.printable-tab-group-header[data-v-a785351c]{display:none}@media print{.printable-tab-group[data-v-a785351c]{border:1px solid #dee2e6;border-radius:5px;margin:10px 0;padding:10px}.printable-tab-group-header[data-v-a785351c]{display:block;margin-bottom:10px;text-decoration:underline}}.nav-tabs[data-v-70a68808]{margin-bottom:15px}.tab-content[data-v-70a68808]{margin-bottom:1.5rem}@media print{.printable-tabs[data-v-70a68808]{border:1px solid #dee2e6;border-radius:5px;padding:20px}}.thumb-wrapper{display:inline-block;overflow:hidden;position:relative;text-align:center;vertical-align:middle}.thumb-circle{border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%}.thumb-image{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}.site-nav-root a.current{color:#0072ec}.site-nav-list{list-style-type:none;padding-left:0}.site-nav-default-list-item{cursor:pointer;display:flex;transition:background-color .08s}.site-nav-custom-list-item,.site-nav-default-list-item{color:#454545;padding:.5rem 0 0 2.8rem}.site-nav-list-item-0{font-size:1.2em;font-weight:500;padding:.5rem 0 .5rem .8rem}.site-nav-list-item-1{font-size:1.03em;padding:.4rem 0 .4rem 1.3rem}.site-nav-list-item-2{font-size:.89em;padding:.3rem 0 .3rem 1.8rem}.site-nav-list-item-3{font-size:.76em;padding:.2rem 0 .2rem 2.4rem}.site-nav-default-list-item:hover{background-color:rgba(214,233,255,.35)}.site-nav-default-list-item a{color:#454545;display:inline-block;height:100%}.site-nav-default-list-item:hover a{color:#000;text-decoration:none}.site-nav-dropdown-btn-container{align-content:center;display:flex;height:1.5em;justify-content:center;margin:0 .75rem 0 auto;width:2rem}.site-nav-dropdown-btn-icon{align-self:center;border-radius:1rem;display:inline-block;height:1.5em;padding:0;text-align:center;transform:rotate(0deg);-webkit-transform:rotate(0deg);transition:.4s;-webkit-transition:.4s;vertical-align:baseline;width:1.5em}.site-nav-dropdown-btn-icon:hover{background-color:#d8e3fb}.site-nav-rotate-icon{color:#4c7ff1;transform:rotate(-180deg);-webkit-transform:rotate(-180deg)}.site-nav-dropdown-container{background:transparent;max-height:0;overflow:hidden;transition:max-height .15s ease-out;-webkit-transition:max-height .15s ease-out}.site-nav-dropdown-container-open{max-height:1000px;transition:max-height .25s ease-in;-webkit-transition:max-height .25s ease-in}.nav-menu[data-v-1a3e7aee]{display:none;overflow-y:auto;padding:0 10px 20px;position:absolute;top:100%}.nav-menu-open[data-v-1a3e7aee]{background:#fff;clear:both;display:block!important;width:100%!important}.mb-mobile-nav[data-v-e6005420]{border:none!important;display:block!important;margin:0!important;max-width:100%!important;padding:10px!important;width:100%!important}.popover-container{max-height:50vh;max-width:276px;overflow:auto}.popover-body{font-size:.875rem}.v-popper{display:inline}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.9);font-size:.875rem;max-width:200px;padding:4px 8px;text-align:center}.modal-dialog{inset:0;position:absolute}.modal-content{max-height:100%}.modal-zoom{opacity:0;-webkit-transform:scale(.1);-moz-transform:scale(.1);-ms-transform:scale(.1);transform:scale(.1)}.modal-zoom,.modal-zoom-show{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}.modal-zoom-show{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.scroll-top-button{bottom:20px;cursor:pointer;display:none;opacity:.4;position:fixed;right:30px;transition-duration:.25s;transition-property:opacity;z-index:99}.scroll-top-button.lighten{opacity:.15}@media (hover:hover){.scroll-top-button:hover{opacity:.7}}.scroll-top-button:active{opacity:1}:root{--sticky-header-height:0}a{text-decoration:none}blockquote{border-left:.25em solid #dfe2e5;color:#6a737d;padding:0 1rem}code{background:#f8f8f8;border-radius:3px;padding:.2em .4em;word-break:normal}mark code{background:#ffffffd4}pre.hljs>code{background:none}pre>code.hljs{-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:5px;counter-reset:line;width:100%}pre>code.hljs[heading]{border-top-right-radius:0}.code-block{position:relative}.code-block-heading{border-radius:6px 6px 0 0;float:right;font-size:85%;line-height:1;margin-top:5px;max-width:85%;overflow-wrap:break-word;padding:.25em .4em;text-align:right}.inline-markdown-heading{line-height:1.5}.code-block-content{clear:both;display:block}@media print{code.hljs.inline,pre>code.hljs{background:#f8f8ff;color:#333}code.hljs.inline{border:.5px solid #d4d4d4}code span.highlighted{background:#e6e6fa}}kbd{background-color:#fafbfc;border:1px solid #c6cbd1;border-bottom-color:#959da5;box-shadow:inset 0 -1px 0 #959da5;color:#444d56}.btn:active,.btn:focus{box-shadow:none!important;outline:none!important}code.hljs.inline{display:initial;padding:.2em .4em}.markbind-table{width:auto}.radio-list-item,.task-list-item{list-style-type:none;margin:0 0 0 -1.2em}.radio-list-item label{font-weight:inherit}.table-striped>tbody>tr:nth-of-type(2n),.table-striped>thead{background-color:#fff}header[sticky]{position:sticky;top:0;transition:transform .3s ease-in-out;width:100%;z-index:1001}header[sticky].hide-header{transform:translateY(calc(var(--sticky-header-height)*-1))}span.anchor{position:relative;top:calc(var(--sticky-header-height)*-1 - 1rem)}#app{display:flex;flex-direction:column;min-height:100vh}footer{background-color:#f5f5f5;color:dimgrey;padding:10px 0}.dimmed{color:#777}.large{font-size:125%}.small{font-size:80%}.underline{text-decoration:underline}.mkb-text-red{color:red!important}.mkb-text-green{color:green!important}.mkb-text-blue{color:blue!important}.mkb-text-cyan{color:cyan!important}.mkb-text-magenta{color:#f0f!important}.mkb-text-yellow{color:#ff0!important}.mkb-text-black{color:#000!important}.mkb-text-white{color:#fff!important}@media (max-width:767.98px){.dropdown-menu>li>a{white-space:normal}.navbar-nav .open .dropdown-menu{background-color:#fff}}li.footnote-item:target{background-color:#eee}.hljs:not(.inline)>span{display:block}.hljs:not(.inline).line-numbers>span{padding:0 .5em 0 3.5em;position:relative}.hljs:not(.inline).line-numbers>span:before{border-right:1px solid #ddd;color:#888;content:counter(line);counter-increment:line;display:inline-block;height:100%;left:0;margin-right:.5em;padding-right:.5em;position:absolute;text-align:right;top:0;width:3em}.trigger{border-bottom:1px dotted}.trigger-click{border-bottom:1px dashed;cursor:pointer}.trigger-click:focus{outline:none}pre{display:flex;position:relative}button.function-btn{border:1px solid #d7dadc;border-radius:5px;color:#a9a9a9;cursor:pointer;display:none;margin:.17rem;padding:.35rem;position:absolute;right:0;text-align:center;white-space:nowrap}button.function-btn+button.function-btn{right:36px}pre:hover>.function-btn-container>button.function-btn{display:block}.function-btn:hover{color:gray;transition:all .5s ease}.function-btn-body{align-items:center;display:flex}.function-btn svg{fill:currentColor}code.wrap{word-wrap:break-word;white-space:pre-wrap}.octicon{height:1em;width:1em}hr{background-color:transparent;border-top:1px solid rgba(0,0,0,.1);opacity:1}hr.dotted{border-top-style:dotted;border-top-width:.1rem}hr.double{border-top-style:double;border-top-width:.2rem}hr.dashed{border-top-style:dashed;border-top-width:.1rem}hr.thick{border-top-width:.15rem}hr.thick-1{border-top-width:.25rem}hr.thick-2{border-top-width:.5rem}hr.thick-3{border-top-width:.75rem}ol,ul{padding-left:1.5rem}h1,h2,h3,h4,h5,h6{margin-bottom:1rem;scroll-margin-top:var(--sticky-header-height)}.block-embed{overflow-x:auto;position:relative;width:100%}.block-embed iframe{height:100%;left:0;position:absolute;top:0;width:100%}#mb-page-nav{padding:.8rem 12px 0}#mb-page-nav a:link,#mb-page-nav a:visited{color:#9b9b9b;text-decoration:none}#mb-page-nav a:hover{color:#000}#mb-page-nav a.active{background-color:transparent;color:#000}.page-nav-title{color:#000;display:block;padding-left:.5rem;white-space:inherit}.nested{margin-left:5%}.no-flex-wrap{flex-wrap:nowrap}@font-face{font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(../fonts/KaTeX_AMS-Regular.woff) format("woff"),url(../fonts/KaTeX_AMS-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(../fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(../fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(../fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype")}@font-face{font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(../fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(../fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(../fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(../fonts/KaTeX_Fraktur-Bold.ttf) format("truetype")}@font-face{font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(../fonts/KaTeX_Fraktur-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(../fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(../fonts/KaTeX_Main-Bold.woff) format("woff"),url(../fonts/KaTeX_Main-Bold.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(../fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(../fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(../fonts/KaTeX_Main-BoldItalic.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(../fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(../fonts/KaTeX_Main-Italic.woff) format("woff"),url(../fonts/KaTeX_Main-Italic.ttf) format("truetype")}@font-face{font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Main-Regular.woff) format("woff"),url(../fonts/KaTeX_Main-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(../fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(../fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(../fonts/KaTeX_Math-BoldItalic.ttf) format("truetype")}@font-face{font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(../fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(../fonts/KaTeX_Math-Italic.woff) format("woff"),url(../fonts/KaTeX_Math-Italic.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(../fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(../fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(../fonts/KaTeX_SansSerif-Bold.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(../fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(../fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(../fonts/KaTeX_SansSerif-Italic.ttf) format("truetype")}@font-face{font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(../fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(../fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(../fonts/KaTeX_SansSerif-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Script-Regular.woff) format("woff"),url(../fonts/KaTeX_Script-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Size1-Regular.woff) format("woff"),url(../fonts/KaTeX_Size1-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Size2-Regular.woff) format("woff"),url(../fonts/KaTeX_Size2-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Size3-Regular.woff) format("woff"),url(../fonts/KaTeX_Size3-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Size4-Regular.woff) format("woff"),url(../fonts/KaTeX_Size4-Regular.ttf) format("truetype")}@font-face{font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(../fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(../fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(../fonts/KaTeX_Typewriter-Regular.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.15.6"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.27777778em;margin-right:-.55555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.83333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.16666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.66666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.45666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.14666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.71428571em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.85714286em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.14285714em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.28571429em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.42857143em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.71428571em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.05714286em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.46857143em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.96285714em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.55428571em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.55555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.66666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.77777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.88888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.11111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.33333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.30444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.76444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.41666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.58333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.66666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.83333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.72833333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.07333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.34722222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.41666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.48611111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.55555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.69444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.83333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.44027778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.72777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.28935185em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.34722222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.40509259em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.46296296em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.52083333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.69444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.83333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.20023148em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.43981481em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.24108004em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.28929605em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.33751205em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.38572806em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.43394407em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.48216008em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.57859209em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.69431051em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.83317261em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.19961427em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.20096463em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.24115756em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.28135048em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.32154341em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.36173633em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.40192926em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.48231511em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.57877814em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.69453376em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.83360129em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}.katex{font-size:1em!important}eq{display:inline-block}eqn{display:block}section.eqno{align-content:space-between;align-items:center;display:flex;flex-direction:row}section.eqno>eqn{margin-left:3em;width:100%}section.eqno>span{text-align:right;width:3em} \ No newline at end of file diff --git a/markbind/fontawesome/css/all.min.css b/markbind/fontawesome/css/all.min.css index ac76ff1..1f367c1 100644 --- a/markbind/fontawesome/css/all.min.css +++ b/markbind/fontawesome/css/all.min.css @@ -1,5 +1,9 @@ /*! - * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com + * Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + * Copyright 2023 Fonticons, Inc. */ -.fa,.fab,.fad,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-bacteria:before{content:"\e059"}.fa-bacterium:before{content:"\e05a"}.fa-bahai:before{content:"\f666"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-box-tissue:before{content:"\e05b"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buy-n-large:before{content:"\f8a6"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caravan:before{content:"\f8ff"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudflare:before{content:"\e07d"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-alt:before{content:"\f422"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-cotton-bureau:before{content:"\f89e"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dailymotion:before{content:"\e052"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-deezer:before{content:"\e077"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-disease:before{content:"\f7fa"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edge-legacy:before{content:"\e078"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-alt:before{content:"\f424"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-faucet:before{content:"\e005"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-firefox-browser:before{content:"\e007"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-pay:before{content:"\e079"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guilded:before{content:"\e07e"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-holding-water:before{content:"\f4c1"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-sparkles:before{content:"\e05d"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-hands-wash:before{content:"\e05e"}.fa-handshake:before{content:"\f2b5"}.fa-handshake-alt-slash:before{content:"\e05f"}.fa-handshake-slash:before{content:"\e060"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-hat-wizard:before{content:"\f6e8"}.fa-hdd:before{content:"\f0a0"}.fa-head-side-cough:before{content:"\e061"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-head-side-mask:before{content:"\e063"}.fa-head-side-virus:before{content:"\e064"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hive:before{content:"\e07f"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hospital-user:before{content:"\f80d"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-house-user:before{content:"\e065"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-ideal:before{content:"\e013"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-innosoft:before{content:"\e080"}.fa-instagram:before{content:"\f16d"}.fa-instagram-square:before{content:"\e055"}.fa-instalod:before{content:"\e081"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-house:before{content:"\e066"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lungs:before{content:"\f604"}.fa-lungs-virus:before{content:"\e067"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-mdb:before{content:"\f8ca"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microblog:before{content:"\e01a"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mixer:before{content:"\e056"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse:before{content:"\f8cc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-octopus-deploy:before{content:"\e082"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-orcid:before{content:"\f8d2"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-arrows:before{content:"\e068"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-perbyte:before{content:"\e083"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-square:before{content:"\e01e"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-plane-slash:before{content:"\e069"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pump-medical:before{content:"\e06a"}.fa-pump-soap:before{content:"\e06b"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-record-vinyl:before{content:"\f8d9"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-rust:before{content:"\e07a"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-shield-virus:before{content:"\e06c"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopify:before{content:"\e057"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sink:before{content:"\e06d"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-soap:before{content:"\e06e"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-stopwatch-20:before{content:"\e06f"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-store-alt-slash:before{content:"\e070"}.fa-store-slash:before{content:"\e071"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swift:before{content:"\f8e1"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-tiktok:before{content:"\e07b"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-trailer:before{content:"\e041"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbraco:before{content:"\f8e8"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-uncharted:before{content:"\e084"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-unity:before{content:"\e049"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-unsplash:before{content:"\e07c"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-users-slash:before{content:"\e073"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-vest:before{content:"\e085"}.fa-vest-patches:before{content:"\e086"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-virus:before{content:"\e074"}.fa-virus-slash:before{content:"\e075"}.fa-viruses:before{content:"\e076"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-watchman-monitoring:before{content:"\e087"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wodu:before{content:"\e088"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.fab,.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900} \ No newline at end of file +.fa{font-family:var(--fa-style-family,"Font Awesome 6 Free");font-weight:var(--fa-style,900)}.fa,.fa-brands,.fa-classic,.fa-regular,.fa-sharp,.fa-solid,.fab,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}.fa-classic,.fa-regular,.fa-solid,.far,.fas{font-family:"Font Awesome 6 Free"}.fa-brands,.fab{font-family:"Font Awesome 6 Brands"}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-2xs{font-size:.625em;line-height:.1em;vertical-align:.225em}.fa-xs{font-size:.75em;line-height:.08333em;vertical-align:.125em}.fa-sm{font-size:.875em;line-height:.07143em;vertical-align:.05357em}.fa-lg{font-size:1.25em;line-height:.05em;vertical-align:-.075em}.fa-xl{font-size:1.5em;line-height:.04167em;vertical-align:-.125em}.fa-2xl{font-size:2em;line-height:.03125em;vertical-align:-.1875em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:var(--fa-li-margin,2.5em);padding-left:0}.fa-ul>li{position:relative}.fa-li{left:calc(var(--fa-li-width, 2em)*-1);position:absolute;text-align:center;width:var(--fa-li-width,2em);line-height:inherit}.fa-border{border-radius:var(--fa-border-radius,.1em);border:var(--fa-border-width,.08em) var(--fa-border-style,solid) var(--fa-border-color,#eee);padding:var(--fa-border-padding,.2em .25em .15em)}.fa-pull-left{float:left;margin-right:var(--fa-pull-margin,.3em)}.fa-pull-right{float:right;margin-left:var(--fa-pull-margin,.3em)}.fa-beat{-webkit-animation-name:fa-beat;animation-name:fa-beat;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-bounce{-webkit-animation-name:fa-bounce;animation-name:fa-bounce;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.28,.84,.42,1))}.fa-fade{-webkit-animation-name:fa-fade;animation-name:fa-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-beat-fade,.fa-fade{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s)}.fa-beat-fade{-webkit-animation-name:fa-beat-fade;animation-name:fa-beat-fade;-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1));animation-timing-function:var(--fa-animation-timing,cubic-bezier(.4,0,.6,1))}.fa-flip{-webkit-animation-name:fa-flip;animation-name:fa-flip;-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,ease-in-out);animation-timing-function:var(--fa-animation-timing,ease-in-out)}.fa-shake{-webkit-animation-name:fa-shake;animation-name:fa-shake;-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-shake,.fa-spin{-webkit-animation-delay:var(--fa-animation-delay,0s);animation-delay:var(--fa-animation-delay,0s);-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal)}.fa-spin{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-duration:var(--fa-animation-duration,2s);animation-duration:var(--fa-animation-duration,2s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,linear);animation-timing-function:var(--fa-animation-timing,linear)}.fa-spin-reverse{--fa-animation-direction:reverse}.fa-pulse,.fa-spin-pulse{-webkit-animation-name:fa-spin;animation-name:fa-spin;-webkit-animation-direction:var(--fa-animation-direction,normal);animation-direction:var(--fa-animation-direction,normal);-webkit-animation-duration:var(--fa-animation-duration,1s);animation-duration:var(--fa-animation-duration,1s);-webkit-animation-iteration-count:var(--fa-animation-iteration-count,infinite);animation-iteration-count:var(--fa-animation-iteration-count,infinite);-webkit-animation-timing-function:var(--fa-animation-timing,steps(8));animation-timing-function:var(--fa-animation-timing,steps(8))}@media (prefers-reduced-motion:reduce){.fa-beat,.fa-beat-fade,.fa-bounce,.fa-fade,.fa-flip,.fa-pulse,.fa-shake,.fa-spin,.fa-spin-pulse{-webkit-animation-delay:-1ms;animation-delay:-1ms;-webkit-animation-duration:1ms;animation-duration:1ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transition-duration:0s;transition-duration:0s}}@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}.fa-rotate-by{-webkit-transform:rotate(var(--fa-rotate-angle,none));transform:rotate(var(--fa-rotate-angle,none))}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%;z-index:var(--fa-stack-z-index,auto)}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:var(--fa-inverse,#fff)} + +.fa-0:before{content:"\30"}.fa-1:before{content:"\31"}.fa-2:before{content:"\32"}.fa-3:before{content:"\33"}.fa-4:before{content:"\34"}.fa-5:before{content:"\35"}.fa-6:before{content:"\36"}.fa-7:before{content:"\37"}.fa-8:before{content:"\38"}.fa-9:before{content:"\39"}.fa-fill-drip:before{content:"\f576"}.fa-arrows-to-circle:before{content:"\e4bd"}.fa-chevron-circle-right:before,.fa-circle-chevron-right:before{content:"\f138"}.fa-at:before{content:"\40"}.fa-trash-alt:before,.fa-trash-can:before{content:"\f2ed"}.fa-text-height:before{content:"\f034"}.fa-user-times:before,.fa-user-xmark:before{content:"\f235"}.fa-stethoscope:before{content:"\f0f1"}.fa-comment-alt:before,.fa-message:before{content:"\f27a"}.fa-info:before{content:"\f129"}.fa-compress-alt:before,.fa-down-left-and-up-right-to-center:before{content:"\f422"}.fa-explosion:before{content:"\e4e9"}.fa-file-alt:before,.fa-file-lines:before,.fa-file-text:before{content:"\f15c"}.fa-wave-square:before{content:"\f83e"}.fa-ring:before{content:"\f70b"}.fa-building-un:before{content:"\e4d9"}.fa-dice-three:before{content:"\f527"}.fa-calendar-alt:before,.fa-calendar-days:before{content:"\f073"}.fa-anchor-circle-check:before{content:"\e4aa"}.fa-building-circle-arrow-right:before{content:"\e4d1"}.fa-volleyball-ball:before,.fa-volleyball:before{content:"\f45f"}.fa-arrows-up-to-line:before{content:"\e4c2"}.fa-sort-desc:before,.fa-sort-down:before{content:"\f0dd"}.fa-circle-minus:before,.fa-minus-circle:before{content:"\f056"}.fa-door-open:before{content:"\f52b"}.fa-right-from-bracket:before,.fa-sign-out-alt:before{content:"\f2f5"}.fa-atom:before{content:"\f5d2"}.fa-soap:before{content:"\e06e"}.fa-heart-music-camera-bolt:before,.fa-icons:before{content:"\f86d"}.fa-microphone-alt-slash:before,.fa-microphone-lines-slash:before{content:"\f539"}.fa-bridge-circle-check:before{content:"\e4c9"}.fa-pump-medical:before{content:"\e06a"}.fa-fingerprint:before{content:"\f577"}.fa-hand-point-right:before{content:"\f0a4"}.fa-magnifying-glass-location:before,.fa-search-location:before{content:"\f689"}.fa-forward-step:before,.fa-step-forward:before{content:"\f051"}.fa-face-smile-beam:before,.fa-smile-beam:before{content:"\f5b8"}.fa-flag-checkered:before{content:"\f11e"}.fa-football-ball:before,.fa-football:before{content:"\f44e"}.fa-school-circle-exclamation:before{content:"\e56c"}.fa-crop:before{content:"\f125"}.fa-angle-double-down:before,.fa-angles-down:before{content:"\f103"}.fa-users-rectangle:before{content:"\e594"}.fa-people-roof:before{content:"\e537"}.fa-people-line:before{content:"\e534"}.fa-beer-mug-empty:before,.fa-beer:before{content:"\f0fc"}.fa-diagram-predecessor:before{content:"\e477"}.fa-arrow-up-long:before,.fa-long-arrow-up:before{content:"\f176"}.fa-burn:before,.fa-fire-flame-simple:before{content:"\f46a"}.fa-male:before,.fa-person:before{content:"\f183"}.fa-laptop:before{content:"\f109"}.fa-file-csv:before{content:"\f6dd"}.fa-menorah:before{content:"\f676"}.fa-truck-plane:before{content:"\e58f"}.fa-record-vinyl:before{content:"\f8d9"}.fa-face-grin-stars:before,.fa-grin-stars:before{content:"\f587"}.fa-bong:before{content:"\f55c"}.fa-pastafarianism:before,.fa-spaghetti-monster-flying:before{content:"\f67b"}.fa-arrow-down-up-across-line:before{content:"\e4af"}.fa-spoon:before,.fa-utensil-spoon:before{content:"\f2e5"}.fa-jar-wheat:before{content:"\e517"}.fa-envelopes-bulk:before,.fa-mail-bulk:before{content:"\f674"}.fa-file-circle-exclamation:before{content:"\e4eb"}.fa-circle-h:before,.fa-hospital-symbol:before{content:"\f47e"}.fa-pager:before{content:"\f815"}.fa-address-book:before,.fa-contact-book:before{content:"\f2b9"}.fa-strikethrough:before{content:"\f0cc"}.fa-k:before{content:"\4b"}.fa-landmark-flag:before{content:"\e51c"}.fa-pencil-alt:before,.fa-pencil:before{content:"\f303"}.fa-backward:before{content:"\f04a"}.fa-caret-right:before{content:"\f0da"}.fa-comments:before{content:"\f086"}.fa-file-clipboard:before,.fa-paste:before{content:"\f0ea"}.fa-code-pull-request:before{content:"\e13c"}.fa-clipboard-list:before{content:"\f46d"}.fa-truck-loading:before,.fa-truck-ramp-box:before{content:"\f4de"}.fa-user-check:before{content:"\f4fc"}.fa-vial-virus:before{content:"\e597"}.fa-sheet-plastic:before{content:"\e571"}.fa-blog:before{content:"\f781"}.fa-user-ninja:before{content:"\f504"}.fa-person-arrow-up-from-line:before{content:"\e539"}.fa-scroll-torah:before,.fa-torah:before{content:"\f6a0"}.fa-broom-ball:before,.fa-quidditch-broom-ball:before,.fa-quidditch:before{content:"\f458"}.fa-toggle-off:before{content:"\f204"}.fa-archive:before,.fa-box-archive:before{content:"\f187"}.fa-person-drowning:before{content:"\e545"}.fa-arrow-down-9-1:before,.fa-sort-numeric-desc:before,.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-face-grin-tongue-squint:before,.fa-grin-tongue-squint:before{content:"\f58a"}.fa-spray-can:before{content:"\f5bd"}.fa-truck-monster:before{content:"\f63b"}.fa-w:before{content:"\57"}.fa-earth-africa:before,.fa-globe-africa:before{content:"\f57c"}.fa-rainbow:before{content:"\f75b"}.fa-circle-notch:before{content:"\f1ce"}.fa-tablet-alt:before,.fa-tablet-screen-button:before{content:"\f3fa"}.fa-paw:before{content:"\f1b0"}.fa-cloud:before{content:"\f0c2"}.fa-trowel-bricks:before{content:"\e58a"}.fa-face-flushed:before,.fa-flushed:before{content:"\f579"}.fa-hospital-user:before{content:"\f80d"}.fa-tent-arrow-left-right:before{content:"\e57f"}.fa-gavel:before,.fa-legal:before{content:"\f0e3"}.fa-binoculars:before{content:"\f1e5"}.fa-microphone-slash:before{content:"\f131"}.fa-box-tissue:before{content:"\e05b"}.fa-motorcycle:before{content:"\f21c"}.fa-bell-concierge:before,.fa-concierge-bell:before{content:"\f562"}.fa-pen-ruler:before,.fa-pencil-ruler:before{content:"\f5ae"}.fa-people-arrows-left-right:before,.fa-people-arrows:before{content:"\e068"}.fa-mars-and-venus-burst:before{content:"\e523"}.fa-caret-square-right:before,.fa-square-caret-right:before{content:"\f152"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-sun-plant-wilt:before{content:"\e57a"}.fa-toilets-portable:before{content:"\e584"}.fa-hockey-puck:before{content:"\f453"}.fa-table:before{content:"\f0ce"}.fa-magnifying-glass-arrow-right:before{content:"\e521"}.fa-digital-tachograph:before,.fa-tachograph-digital:before{content:"\f566"}.fa-users-slash:before{content:"\e073"}.fa-clover:before{content:"\e139"}.fa-mail-reply:before,.fa-reply:before{content:"\f3e5"}.fa-star-and-crescent:before{content:"\f699"}.fa-house-fire:before{content:"\e50c"}.fa-minus-square:before,.fa-square-minus:before{content:"\f146"}.fa-helicopter:before{content:"\f533"}.fa-compass:before{content:"\f14e"}.fa-caret-square-down:before,.fa-square-caret-down:before{content:"\f150"}.fa-file-circle-question:before{content:"\e4ef"}.fa-laptop-code:before{content:"\f5fc"}.fa-swatchbook:before{content:"\f5c3"}.fa-prescription-bottle:before{content:"\f485"}.fa-bars:before,.fa-navicon:before{content:"\f0c9"}.fa-people-group:before{content:"\e533"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-heart-broken:before,.fa-heart-crack:before{content:"\f7a9"}.fa-external-link-square-alt:before,.fa-square-up-right:before{content:"\f360"}.fa-face-kiss-beam:before,.fa-kiss-beam:before{content:"\f597"}.fa-film:before{content:"\f008"}.fa-ruler-horizontal:before{content:"\f547"}.fa-people-robbery:before{content:"\e536"}.fa-lightbulb:before{content:"\f0eb"}.fa-caret-left:before{content:"\f0d9"}.fa-circle-exclamation:before,.fa-exclamation-circle:before{content:"\f06a"}.fa-school-circle-xmark:before{content:"\e56d"}.fa-arrow-right-from-bracket:before,.fa-sign-out:before{content:"\f08b"}.fa-chevron-circle-down:before,.fa-circle-chevron-down:before{content:"\f13a"}.fa-unlock-alt:before,.fa-unlock-keyhole:before{content:"\f13e"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-headphones-alt:before,.fa-headphones-simple:before{content:"\f58f"}.fa-sitemap:before{content:"\f0e8"}.fa-circle-dollar-to-slot:before,.fa-donate:before{content:"\f4b9"}.fa-memory:before{content:"\f538"}.fa-road-spikes:before{content:"\e568"}.fa-fire-burner:before{content:"\e4f1"}.fa-flag:before{content:"\f024"}.fa-hanukiah:before{content:"\f6e6"}.fa-feather:before{content:"\f52d"}.fa-volume-down:before,.fa-volume-low:before{content:"\f027"}.fa-comment-slash:before{content:"\f4b3"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-compress:before{content:"\f066"}.fa-wheat-alt:before,.fa-wheat-awn:before{content:"\e2cd"}.fa-ankh:before{content:"\f644"}.fa-hands-holding-child:before{content:"\e4fa"}.fa-asterisk:before{content:"\2a"}.fa-check-square:before,.fa-square-check:before{content:"\f14a"}.fa-peseta-sign:before{content:"\e221"}.fa-header:before,.fa-heading:before{content:"\f1dc"}.fa-ghost:before{content:"\f6e2"}.fa-list-squares:before,.fa-list:before{content:"\f03a"}.fa-phone-square-alt:before,.fa-square-phone-flip:before{content:"\f87b"}.fa-cart-plus:before{content:"\f217"}.fa-gamepad:before{content:"\f11b"}.fa-circle-dot:before,.fa-dot-circle:before{content:"\f192"}.fa-dizzy:before,.fa-face-dizzy:before{content:"\f567"}.fa-egg:before{content:"\f7fb"}.fa-house-medical-circle-xmark:before{content:"\e513"}.fa-campground:before{content:"\f6bb"}.fa-folder-plus:before{content:"\f65e"}.fa-futbol-ball:before,.fa-futbol:before,.fa-soccer-ball:before{content:"\f1e3"}.fa-paint-brush:before,.fa-paintbrush:before{content:"\f1fc"}.fa-lock:before{content:"\f023"}.fa-gas-pump:before{content:"\f52f"}.fa-hot-tub-person:before,.fa-hot-tub:before{content:"\f593"}.fa-map-location:before,.fa-map-marked:before{content:"\f59f"}.fa-house-flood-water:before{content:"\e50e"}.fa-tree:before{content:"\f1bb"}.fa-bridge-lock:before{content:"\e4cc"}.fa-sack-dollar:before{content:"\f81d"}.fa-edit:before,.fa-pen-to-square:before{content:"\f044"}.fa-car-side:before{content:"\f5e4"}.fa-share-alt:before,.fa-share-nodes:before{content:"\f1e0"}.fa-heart-circle-minus:before{content:"\e4ff"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-microscope:before{content:"\f610"}.fa-sink:before{content:"\e06d"}.fa-bag-shopping:before,.fa-shopping-bag:before{content:"\f290"}.fa-arrow-down-z-a:before,.fa-sort-alpha-desc:before,.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-mitten:before{content:"\f7b5"}.fa-person-rays:before{content:"\e54d"}.fa-users:before{content:"\f0c0"}.fa-eye-slash:before{content:"\f070"}.fa-flask-vial:before{content:"\e4f3"}.fa-hand-paper:before,.fa-hand:before{content:"\f256"}.fa-om:before{content:"\f679"}.fa-worm:before{content:"\e599"}.fa-house-circle-xmark:before{content:"\e50b"}.fa-plug:before{content:"\f1e6"}.fa-chevron-up:before{content:"\f077"}.fa-hand-spock:before{content:"\f259"}.fa-stopwatch:before{content:"\f2f2"}.fa-face-kiss:before,.fa-kiss:before{content:"\f596"}.fa-bridge-circle-xmark:before{content:"\e4cb"}.fa-face-grin-tongue:before,.fa-grin-tongue:before{content:"\f589"}.fa-chess-bishop:before{content:"\f43a"}.fa-face-grin-wink:before,.fa-grin-wink:before{content:"\f58c"}.fa-deaf:before,.fa-deafness:before,.fa-ear-deaf:before,.fa-hard-of-hearing:before{content:"\f2a4"}.fa-road-circle-check:before{content:"\e564"}.fa-dice-five:before{content:"\f523"}.fa-rss-square:before,.fa-square-rss:before{content:"\f143"}.fa-land-mine-on:before{content:"\e51b"}.fa-i-cursor:before{content:"\f246"}.fa-stamp:before{content:"\f5bf"}.fa-stairs:before{content:"\e289"}.fa-i:before{content:"\49"}.fa-hryvnia-sign:before,.fa-hryvnia:before{content:"\f6f2"}.fa-pills:before{content:"\f484"}.fa-face-grin-wide:before,.fa-grin-alt:before{content:"\f581"}.fa-tooth:before{content:"\f5c9"}.fa-v:before{content:"\56"}.fa-bangladeshi-taka-sign:before{content:"\e2e6"}.fa-bicycle:before{content:"\f206"}.fa-rod-asclepius:before,.fa-rod-snake:before,.fa-staff-aesculapius:before,.fa-staff-snake:before{content:"\e579"}.fa-head-side-cough-slash:before{content:"\e062"}.fa-ambulance:before,.fa-truck-medical:before{content:"\f0f9"}.fa-wheat-awn-circle-exclamation:before{content:"\e598"}.fa-snowman:before{content:"\f7d0"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-road-barrier:before{content:"\e562"}.fa-school:before{content:"\f549"}.fa-igloo:before{content:"\f7ae"}.fa-joint:before{content:"\f595"}.fa-angle-right:before{content:"\f105"}.fa-horse:before{content:"\f6f0"}.fa-q:before{content:"\51"}.fa-g:before{content:"\47"}.fa-notes-medical:before{content:"\f481"}.fa-temperature-2:before,.fa-temperature-half:before,.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-dong-sign:before{content:"\e169"}.fa-capsules:before{content:"\f46b"}.fa-poo-bolt:before,.fa-poo-storm:before{content:"\f75a"}.fa-face-frown-open:before,.fa-frown-open:before{content:"\f57a"}.fa-hand-point-up:before{content:"\f0a6"}.fa-money-bill:before{content:"\f0d6"}.fa-bookmark:before{content:"\f02e"}.fa-align-justify:before{content:"\f039"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-helmet-un:before{content:"\e503"}.fa-bullseye:before{content:"\f140"}.fa-bacon:before{content:"\f7e5"}.fa-hand-point-down:before{content:"\f0a7"}.fa-arrow-up-from-bracket:before{content:"\e09a"}.fa-folder-blank:before,.fa-folder:before{content:"\f07b"}.fa-file-medical-alt:before,.fa-file-waveform:before{content:"\f478"}.fa-radiation:before{content:"\f7b9"}.fa-chart-simple:before{content:"\e473"}.fa-mars-stroke:before{content:"\f229"}.fa-vial:before{content:"\f492"}.fa-dashboard:before,.fa-gauge-med:before,.fa-gauge:before,.fa-tachometer-alt-average:before{content:"\f624"}.fa-magic-wand-sparkles:before,.fa-wand-magic-sparkles:before{content:"\e2ca"}.fa-e:before{content:"\45"}.fa-pen-alt:before,.fa-pen-clip:before{content:"\f305"}.fa-bridge-circle-exclamation:before{content:"\e4ca"}.fa-user:before{content:"\f007"}.fa-school-circle-check:before{content:"\e56b"}.fa-dumpster:before{content:"\f793"}.fa-shuttle-van:before,.fa-van-shuttle:before{content:"\f5b6"}.fa-building-user:before{content:"\e4da"}.fa-caret-square-left:before,.fa-square-caret-left:before{content:"\f191"}.fa-highlighter:before{content:"\f591"}.fa-key:before{content:"\f084"}.fa-bullhorn:before{content:"\f0a1"}.fa-globe:before{content:"\f0ac"}.fa-synagogue:before{content:"\f69b"}.fa-person-half-dress:before{content:"\e548"}.fa-road-bridge:before{content:"\e563"}.fa-location-arrow:before{content:"\f124"}.fa-c:before{content:"\43"}.fa-tablet-button:before{content:"\f10a"}.fa-building-lock:before{content:"\e4d6"}.fa-pizza-slice:before{content:"\f818"}.fa-money-bill-wave:before{content:"\f53a"}.fa-area-chart:before,.fa-chart-area:before{content:"\f1fe"}.fa-house-flag:before{content:"\e50d"}.fa-person-circle-minus:before{content:"\e540"}.fa-ban:before,.fa-cancel:before{content:"\f05e"}.fa-camera-rotate:before{content:"\e0d8"}.fa-air-freshener:before,.fa-spray-can-sparkles:before{content:"\f5d0"}.fa-star:before{content:"\f005"}.fa-repeat:before{content:"\f363"}.fa-cross:before{content:"\f654"}.fa-box:before{content:"\f466"}.fa-venus-mars:before{content:"\f228"}.fa-arrow-pointer:before,.fa-mouse-pointer:before{content:"\f245"}.fa-expand-arrows-alt:before,.fa-maximize:before{content:"\f31e"}.fa-charging-station:before{content:"\f5e7"}.fa-shapes:before,.fa-triangle-circle-square:before{content:"\f61f"}.fa-random:before,.fa-shuffle:before{content:"\f074"}.fa-person-running:before,.fa-running:before{content:"\f70c"}.fa-mobile-retro:before{content:"\e527"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-spider:before{content:"\f717"}.fa-hands-bound:before{content:"\e4f9"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-plane-circle-exclamation:before{content:"\e556"}.fa-x-ray:before{content:"\f497"}.fa-spell-check:before{content:"\f891"}.fa-slash:before{content:"\f715"}.fa-computer-mouse:before,.fa-mouse:before{content:"\f8cc"}.fa-arrow-right-to-bracket:before,.fa-sign-in:before{content:"\f090"}.fa-shop-slash:before,.fa-store-alt-slash:before{content:"\e070"}.fa-server:before{content:"\f233"}.fa-virus-covid-slash:before{content:"\e4a9"}.fa-shop-lock:before{content:"\e4a5"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-blender-phone:before{content:"\f6b6"}.fa-building-wheat:before{content:"\e4db"}.fa-person-breastfeeding:before{content:"\e53a"}.fa-right-to-bracket:before,.fa-sign-in-alt:before{content:"\f2f6"}.fa-venus:before{content:"\f221"}.fa-passport:before{content:"\f5ab"}.fa-heart-pulse:before,.fa-heartbeat:before{content:"\f21e"}.fa-people-carry-box:before,.fa-people-carry:before{content:"\f4ce"}.fa-temperature-high:before{content:"\f769"}.fa-microchip:before{content:"\f2db"}.fa-crown:before{content:"\f521"}.fa-weight-hanging:before{content:"\f5cd"}.fa-xmarks-lines:before{content:"\e59a"}.fa-file-prescription:before{content:"\f572"}.fa-weight-scale:before,.fa-weight:before{content:"\f496"}.fa-user-friends:before,.fa-user-group:before{content:"\f500"}.fa-arrow-up-a-z:before,.fa-sort-alpha-up:before{content:"\f15e"}.fa-chess-knight:before{content:"\f441"}.fa-face-laugh-squint:before,.fa-laugh-squint:before{content:"\f59b"}.fa-wheelchair:before{content:"\f193"}.fa-arrow-circle-up:before,.fa-circle-arrow-up:before{content:"\f0aa"}.fa-toggle-on:before{content:"\f205"}.fa-person-walking:before,.fa-walking:before{content:"\f554"}.fa-l:before{content:"\4c"}.fa-fire:before{content:"\f06d"}.fa-bed-pulse:before,.fa-procedures:before{content:"\f487"}.fa-shuttle-space:before,.fa-space-shuttle:before{content:"\f197"}.fa-face-laugh:before,.fa-laugh:before{content:"\f599"}.fa-folder-open:before{content:"\f07c"}.fa-heart-circle-plus:before{content:"\e500"}.fa-code-fork:before{content:"\e13b"}.fa-city:before{content:"\f64f"}.fa-microphone-alt:before,.fa-microphone-lines:before{content:"\f3c9"}.fa-pepper-hot:before{content:"\f816"}.fa-unlock:before{content:"\f09c"}.fa-colon-sign:before{content:"\e140"}.fa-headset:before{content:"\f590"}.fa-store-slash:before{content:"\e071"}.fa-road-circle-xmark:before{content:"\e566"}.fa-user-minus:before{content:"\f503"}.fa-mars-stroke-up:before,.fa-mars-stroke-v:before{content:"\f22a"}.fa-champagne-glasses:before,.fa-glass-cheers:before{content:"\f79f"}.fa-clipboard:before{content:"\f328"}.fa-house-circle-exclamation:before{content:"\e50a"}.fa-file-arrow-up:before,.fa-file-upload:before{content:"\f574"}.fa-wifi-3:before,.fa-wifi-strong:before,.fa-wifi:before{content:"\f1eb"}.fa-bath:before,.fa-bathtub:before{content:"\f2cd"}.fa-underline:before{content:"\f0cd"}.fa-user-edit:before,.fa-user-pen:before{content:"\f4ff"}.fa-signature:before{content:"\f5b7"}.fa-stroopwafel:before{content:"\f551"}.fa-bold:before{content:"\f032"}.fa-anchor-lock:before{content:"\e4ad"}.fa-building-ngo:before{content:"\e4d7"}.fa-manat-sign:before{content:"\e1d5"}.fa-not-equal:before{content:"\f53e"}.fa-border-style:before,.fa-border-top-left:before{content:"\f853"}.fa-map-location-dot:before,.fa-map-marked-alt:before{content:"\f5a0"}.fa-jedi:before{content:"\f669"}.fa-poll:before,.fa-square-poll-vertical:before{content:"\f681"}.fa-mug-hot:before{content:"\f7b6"}.fa-battery-car:before,.fa-car-battery:before{content:"\f5df"}.fa-gift:before{content:"\f06b"}.fa-dice-two:before{content:"\f528"}.fa-chess-queen:before{content:"\f445"}.fa-glasses:before{content:"\f530"}.fa-chess-board:before{content:"\f43c"}.fa-building-circle-check:before{content:"\e4d2"}.fa-person-chalkboard:before{content:"\e53d"}.fa-mars-stroke-h:before,.fa-mars-stroke-right:before{content:"\f22b"}.fa-hand-back-fist:before,.fa-hand-rock:before{content:"\f255"}.fa-caret-square-up:before,.fa-square-caret-up:before{content:"\f151"}.fa-cloud-showers-water:before{content:"\e4e4"}.fa-bar-chart:before,.fa-chart-bar:before{content:"\f080"}.fa-hands-bubbles:before,.fa-hands-wash:before{content:"\e05e"}.fa-less-than-equal:before{content:"\f537"}.fa-train:before{content:"\f238"}.fa-eye-low-vision:before,.fa-low-vision:before{content:"\f2a8"}.fa-crow:before{content:"\f520"}.fa-sailboat:before{content:"\e445"}.fa-window-restore:before{content:"\f2d2"}.fa-plus-square:before,.fa-square-plus:before{content:"\f0fe"}.fa-torii-gate:before{content:"\f6a1"}.fa-frog:before{content:"\f52e"}.fa-bucket:before{content:"\e4cf"}.fa-image:before{content:"\f03e"}.fa-microphone:before{content:"\f130"}.fa-cow:before{content:"\f6c8"}.fa-caret-up:before{content:"\f0d8"}.fa-screwdriver:before{content:"\f54a"}.fa-folder-closed:before{content:"\e185"}.fa-house-tsunami:before{content:"\e515"}.fa-square-nfi:before{content:"\e576"}.fa-arrow-up-from-ground-water:before{content:"\e4b5"}.fa-glass-martini-alt:before,.fa-martini-glass:before{content:"\f57b"}.fa-rotate-back:before,.fa-rotate-backward:before,.fa-rotate-left:before,.fa-undo-alt:before{content:"\f2ea"}.fa-columns:before,.fa-table-columns:before{content:"\f0db"}.fa-lemon:before{content:"\f094"}.fa-head-side-mask:before{content:"\e063"}.fa-handshake:before{content:"\f2b5"}.fa-gem:before{content:"\f3a5"}.fa-dolly-box:before,.fa-dolly:before{content:"\f472"}.fa-smoking:before{content:"\f48d"}.fa-compress-arrows-alt:before,.fa-minimize:before{content:"\f78c"}.fa-monument:before{content:"\f5a6"}.fa-snowplow:before{content:"\f7d2"}.fa-angle-double-right:before,.fa-angles-right:before{content:"\f101"}.fa-cannabis:before{content:"\f55f"}.fa-circle-play:before,.fa-play-circle:before{content:"\f144"}.fa-tablets:before{content:"\f490"}.fa-ethernet:before{content:"\f796"}.fa-eur:before,.fa-euro-sign:before,.fa-euro:before{content:"\f153"}.fa-chair:before{content:"\f6c0"}.fa-check-circle:before,.fa-circle-check:before{content:"\f058"}.fa-circle-stop:before,.fa-stop-circle:before{content:"\f28d"}.fa-compass-drafting:before,.fa-drafting-compass:before{content:"\f568"}.fa-plate-wheat:before{content:"\e55a"}.fa-icicles:before{content:"\f7ad"}.fa-person-shelter:before{content:"\e54f"}.fa-neuter:before{content:"\f22c"}.fa-id-badge:before{content:"\f2c1"}.fa-marker:before{content:"\f5a1"}.fa-face-laugh-beam:before,.fa-laugh-beam:before{content:"\f59a"}.fa-helicopter-symbol:before{content:"\e502"}.fa-universal-access:before{content:"\f29a"}.fa-chevron-circle-up:before,.fa-circle-chevron-up:before{content:"\f139"}.fa-lari-sign:before{content:"\e1c8"}.fa-volcano:before{content:"\f770"}.fa-person-walking-dashed-line-arrow-right:before{content:"\e553"}.fa-gbp:before,.fa-pound-sign:before,.fa-sterling-sign:before{content:"\f154"}.fa-viruses:before{content:"\e076"}.fa-square-person-confined:before{content:"\e577"}.fa-user-tie:before{content:"\f508"}.fa-arrow-down-long:before,.fa-long-arrow-down:before{content:"\f175"}.fa-tent-arrow-down-to-line:before{content:"\e57e"}.fa-certificate:before{content:"\f0a3"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-suitcase:before{content:"\f0f2"}.fa-person-skating:before,.fa-skating:before{content:"\f7c5"}.fa-filter-circle-dollar:before,.fa-funnel-dollar:before{content:"\f662"}.fa-camera-retro:before{content:"\f083"}.fa-arrow-circle-down:before,.fa-circle-arrow-down:before{content:"\f0ab"}.fa-arrow-right-to-file:before,.fa-file-import:before{content:"\f56f"}.fa-external-link-square:before,.fa-square-arrow-up-right:before{content:"\f14c"}.fa-box-open:before{content:"\f49e"}.fa-scroll:before{content:"\f70e"}.fa-spa:before{content:"\f5bb"}.fa-location-pin-lock:before{content:"\e51f"}.fa-pause:before{content:"\f04c"}.fa-hill-avalanche:before{content:"\e507"}.fa-temperature-0:before,.fa-temperature-empty:before,.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-bomb:before{content:"\f1e2"}.fa-registered:before{content:"\f25d"}.fa-address-card:before,.fa-contact-card:before,.fa-vcard:before{content:"\f2bb"}.fa-balance-scale-right:before,.fa-scale-unbalanced-flip:before{content:"\f516"}.fa-subscript:before{content:"\f12c"}.fa-diamond-turn-right:before,.fa-directions:before{content:"\f5eb"}.fa-burst:before{content:"\e4dc"}.fa-house-laptop:before,.fa-laptop-house:before{content:"\e066"}.fa-face-tired:before,.fa-tired:before{content:"\f5c8"}.fa-money-bills:before{content:"\e1f3"}.fa-smog:before{content:"\f75f"}.fa-crutch:before{content:"\f7f7"}.fa-cloud-arrow-up:before,.fa-cloud-upload-alt:before,.fa-cloud-upload:before{content:"\f0ee"}.fa-palette:before{content:"\f53f"}.fa-arrows-turn-right:before{content:"\e4c0"}.fa-vest:before{content:"\e085"}.fa-ferry:before{content:"\e4ea"}.fa-arrows-down-to-people:before{content:"\e4b9"}.fa-seedling:before,.fa-sprout:before{content:"\f4d8"}.fa-arrows-alt-h:before,.fa-left-right:before{content:"\f337"}.fa-boxes-packing:before{content:"\e4c7"}.fa-arrow-circle-left:before,.fa-circle-arrow-left:before{content:"\f0a8"}.fa-group-arrows-rotate:before{content:"\e4f6"}.fa-bowl-food:before{content:"\e4c6"}.fa-candy-cane:before{content:"\f786"}.fa-arrow-down-wide-short:before,.fa-sort-amount-asc:before,.fa-sort-amount-down:before{content:"\f160"}.fa-cloud-bolt:before,.fa-thunderstorm:before{content:"\f76c"}.fa-remove-format:before,.fa-text-slash:before{content:"\f87d"}.fa-face-smile-wink:before,.fa-smile-wink:before{content:"\f4da"}.fa-file-word:before{content:"\f1c2"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-arrows-h:before,.fa-arrows-left-right:before{content:"\f07e"}.fa-house-lock:before{content:"\e510"}.fa-cloud-arrow-down:before,.fa-cloud-download-alt:before,.fa-cloud-download:before{content:"\f0ed"}.fa-children:before{content:"\e4e1"}.fa-blackboard:before,.fa-chalkboard:before{content:"\f51b"}.fa-user-alt-slash:before,.fa-user-large-slash:before{content:"\f4fa"}.fa-envelope-open:before{content:"\f2b6"}.fa-handshake-alt-slash:before,.fa-handshake-simple-slash:before{content:"\e05f"}.fa-mattress-pillow:before{content:"\e525"}.fa-guarani-sign:before{content:"\e19a"}.fa-arrows-rotate:before,.fa-refresh:before,.fa-sync:before{content:"\f021"}.fa-fire-extinguisher:before{content:"\f134"}.fa-cruzeiro-sign:before{content:"\e152"}.fa-greater-than-equal:before{content:"\f532"}.fa-shield-alt:before,.fa-shield-halved:before{content:"\f3ed"}.fa-atlas:before,.fa-book-atlas:before{content:"\f558"}.fa-virus:before{content:"\e074"}.fa-envelope-circle-check:before{content:"\e4e8"}.fa-layer-group:before{content:"\f5fd"}.fa-arrows-to-dot:before{content:"\e4be"}.fa-archway:before{content:"\f557"}.fa-heart-circle-check:before{content:"\e4fd"}.fa-house-chimney-crack:before,.fa-house-damage:before{content:"\f6f1"}.fa-file-archive:before,.fa-file-zipper:before{content:"\f1c6"}.fa-square:before{content:"\f0c8"}.fa-glass-martini:before,.fa-martini-glass-empty:before{content:"\f000"}.fa-couch:before{content:"\f4b8"}.fa-cedi-sign:before{content:"\e0df"}.fa-italic:before{content:"\f033"}.fa-church:before{content:"\f51d"}.fa-comments-dollar:before{content:"\f653"}.fa-democrat:before{content:"\f747"}.fa-z:before{content:"\5a"}.fa-person-skiing:before,.fa-skiing:before{content:"\f7c9"}.fa-road-lock:before{content:"\e567"}.fa-a:before{content:"\41"}.fa-temperature-arrow-down:before,.fa-temperature-down:before{content:"\e03f"}.fa-feather-alt:before,.fa-feather-pointed:before{content:"\f56b"}.fa-p:before{content:"\50"}.fa-snowflake:before{content:"\f2dc"}.fa-newspaper:before{content:"\f1ea"}.fa-ad:before,.fa-rectangle-ad:before{content:"\f641"}.fa-arrow-circle-right:before,.fa-circle-arrow-right:before{content:"\f0a9"}.fa-filter-circle-xmark:before{content:"\e17b"}.fa-locust:before{content:"\e520"}.fa-sort:before,.fa-unsorted:before{content:"\f0dc"}.fa-list-1-2:before,.fa-list-numeric:before,.fa-list-ol:before{content:"\f0cb"}.fa-person-dress-burst:before{content:"\e544"}.fa-money-check-alt:before,.fa-money-check-dollar:before{content:"\f53d"}.fa-vector-square:before{content:"\f5cb"}.fa-bread-slice:before{content:"\f7ec"}.fa-language:before{content:"\f1ab"}.fa-face-kiss-wink-heart:before,.fa-kiss-wink-heart:before{content:"\f598"}.fa-filter:before{content:"\f0b0"}.fa-question:before{content:"\3f"}.fa-file-signature:before{content:"\f573"}.fa-arrows-alt:before,.fa-up-down-left-right:before{content:"\f0b2"}.fa-house-chimney-user:before{content:"\e065"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-puzzle-piece:before{content:"\f12e"}.fa-money-check:before{content:"\f53c"}.fa-star-half-alt:before,.fa-star-half-stroke:before{content:"\f5c0"}.fa-code:before{content:"\f121"}.fa-glass-whiskey:before,.fa-whiskey-glass:before{content:"\f7a0"}.fa-building-circle-exclamation:before{content:"\e4d3"}.fa-magnifying-glass-chart:before{content:"\e522"}.fa-arrow-up-right-from-square:before,.fa-external-link:before{content:"\f08e"}.fa-cubes-stacked:before{content:"\e4e6"}.fa-krw:before,.fa-won-sign:before,.fa-won:before{content:"\f159"}.fa-virus-covid:before{content:"\e4a8"}.fa-austral-sign:before{content:"\e0a9"}.fa-f:before{content:"\46"}.fa-leaf:before{content:"\f06c"}.fa-road:before{content:"\f018"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-person-circle-plus:before{content:"\e541"}.fa-chart-pie:before,.fa-pie-chart:before{content:"\f200"}.fa-bolt-lightning:before{content:"\e0b7"}.fa-sack-xmark:before{content:"\e56a"}.fa-file-excel:before{content:"\f1c3"}.fa-file-contract:before{content:"\f56c"}.fa-fish-fins:before{content:"\e4f2"}.fa-building-flag:before{content:"\e4d5"}.fa-face-grin-beam:before,.fa-grin-beam:before{content:"\f582"}.fa-object-ungroup:before{content:"\f248"}.fa-poop:before{content:"\f619"}.fa-location-pin:before,.fa-map-marker:before{content:"\f041"}.fa-kaaba:before{content:"\f66b"}.fa-toilet-paper:before{content:"\f71e"}.fa-hard-hat:before,.fa-hat-hard:before,.fa-helmet-safety:before{content:"\f807"}.fa-eject:before{content:"\f052"}.fa-arrow-alt-circle-right:before,.fa-circle-right:before{content:"\f35a"}.fa-plane-circle-check:before{content:"\e555"}.fa-face-rolling-eyes:before,.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-object-group:before{content:"\f247"}.fa-chart-line:before,.fa-line-chart:before{content:"\f201"}.fa-mask-ventilator:before{content:"\e524"}.fa-arrow-right:before{content:"\f061"}.fa-map-signs:before,.fa-signs-post:before{content:"\f277"}.fa-cash-register:before{content:"\f788"}.fa-person-circle-question:before{content:"\e542"}.fa-h:before{content:"\48"}.fa-tarp:before{content:"\e57b"}.fa-screwdriver-wrench:before,.fa-tools:before{content:"\f7d9"}.fa-arrows-to-eye:before{content:"\e4bf"}.fa-plug-circle-bolt:before{content:"\e55b"}.fa-heart:before{content:"\f004"}.fa-mars-and-venus:before{content:"\f224"}.fa-home-user:before,.fa-house-user:before{content:"\e1b0"}.fa-dumpster-fire:before{content:"\f794"}.fa-house-crack:before{content:"\e3b1"}.fa-cocktail:before,.fa-martini-glass-citrus:before{content:"\f561"}.fa-face-surprise:before,.fa-surprise:before{content:"\f5c2"}.fa-bottle-water:before{content:"\e4c5"}.fa-circle-pause:before,.fa-pause-circle:before{content:"\f28b"}.fa-toilet-paper-slash:before{content:"\e072"}.fa-apple-alt:before,.fa-apple-whole:before{content:"\f5d1"}.fa-kitchen-set:before{content:"\e51a"}.fa-r:before{content:"\52"}.fa-temperature-1:before,.fa-temperature-quarter:before,.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-cube:before{content:"\f1b2"}.fa-bitcoin-sign:before{content:"\e0b4"}.fa-shield-dog:before{content:"\e573"}.fa-solar-panel:before{content:"\f5ba"}.fa-lock-open:before{content:"\f3c1"}.fa-elevator:before{content:"\e16d"}.fa-money-bill-transfer:before{content:"\e528"}.fa-money-bill-trend-up:before{content:"\e529"}.fa-house-flood-water-circle-arrow-right:before{content:"\e50f"}.fa-poll-h:before,.fa-square-poll-horizontal:before{content:"\f682"}.fa-circle:before{content:"\f111"}.fa-backward-fast:before,.fa-fast-backward:before{content:"\f049"}.fa-recycle:before{content:"\f1b8"}.fa-user-astronaut:before{content:"\f4fb"}.fa-plane-slash:before{content:"\e069"}.fa-trademark:before{content:"\f25c"}.fa-basketball-ball:before,.fa-basketball:before{content:"\f434"}.fa-satellite-dish:before{content:"\f7c0"}.fa-arrow-alt-circle-up:before,.fa-circle-up:before{content:"\f35b"}.fa-mobile-alt:before,.fa-mobile-screen-button:before{content:"\f3cd"}.fa-volume-high:before,.fa-volume-up:before{content:"\f028"}.fa-users-rays:before{content:"\e593"}.fa-wallet:before{content:"\f555"}.fa-clipboard-check:before{content:"\f46c"}.fa-file-audio:before{content:"\f1c7"}.fa-burger:before,.fa-hamburger:before{content:"\f805"}.fa-wrench:before{content:"\f0ad"}.fa-bugs:before{content:"\e4d0"}.fa-rupee-sign:before,.fa-rupee:before{content:"\f156"}.fa-file-image:before{content:"\f1c5"}.fa-circle-question:before,.fa-question-circle:before{content:"\f059"}.fa-plane-departure:before{content:"\f5b0"}.fa-handshake-slash:before{content:"\e060"}.fa-book-bookmark:before{content:"\e0bb"}.fa-code-branch:before{content:"\f126"}.fa-hat-cowboy:before{content:"\f8c0"}.fa-bridge:before{content:"\e4c8"}.fa-phone-alt:before,.fa-phone-flip:before{content:"\f879"}.fa-truck-front:before{content:"\e2b7"}.fa-cat:before{content:"\f6be"}.fa-anchor-circle-exclamation:before{content:"\e4ab"}.fa-truck-field:before{content:"\e58d"}.fa-route:before{content:"\f4d7"}.fa-clipboard-question:before{content:"\e4e3"}.fa-panorama:before{content:"\e209"}.fa-comment-medical:before{content:"\f7f5"}.fa-teeth-open:before{content:"\f62f"}.fa-file-circle-minus:before{content:"\e4ed"}.fa-tags:before{content:"\f02c"}.fa-wine-glass:before{content:"\f4e3"}.fa-fast-forward:before,.fa-forward-fast:before{content:"\f050"}.fa-face-meh-blank:before,.fa-meh-blank:before{content:"\f5a4"}.fa-parking:before,.fa-square-parking:before{content:"\f540"}.fa-house-signal:before{content:"\e012"}.fa-bars-progress:before,.fa-tasks-alt:before{content:"\f828"}.fa-faucet-drip:before{content:"\e006"}.fa-cart-flatbed:before,.fa-dolly-flatbed:before{content:"\f474"}.fa-ban-smoking:before,.fa-smoking-ban:before{content:"\f54d"}.fa-terminal:before{content:"\f120"}.fa-mobile-button:before{content:"\f10b"}.fa-house-medical-flag:before{content:"\e514"}.fa-basket-shopping:before,.fa-shopping-basket:before{content:"\f291"}.fa-tape:before{content:"\f4db"}.fa-bus-alt:before,.fa-bus-simple:before{content:"\f55e"}.fa-eye:before{content:"\f06e"}.fa-face-sad-cry:before,.fa-sad-cry:before{content:"\f5b3"}.fa-audio-description:before{content:"\f29e"}.fa-person-military-to-person:before{content:"\e54c"}.fa-file-shield:before{content:"\e4f0"}.fa-user-slash:before{content:"\f506"}.fa-pen:before{content:"\f304"}.fa-tower-observation:before{content:"\e586"}.fa-file-code:before{content:"\f1c9"}.fa-signal-5:before,.fa-signal-perfect:before,.fa-signal:before{content:"\f012"}.fa-bus:before{content:"\f207"}.fa-heart-circle-xmark:before{content:"\e501"}.fa-home-lg:before,.fa-house-chimney:before{content:"\e3af"}.fa-window-maximize:before{content:"\f2d0"}.fa-face-frown:before,.fa-frown:before{content:"\f119"}.fa-prescription:before{content:"\f5b1"}.fa-shop:before,.fa-store-alt:before{content:"\f54f"}.fa-floppy-disk:before,.fa-save:before{content:"\f0c7"}.fa-vihara:before{content:"\f6a7"}.fa-balance-scale-left:before,.fa-scale-unbalanced:before{content:"\f515"}.fa-sort-asc:before,.fa-sort-up:before{content:"\f0de"}.fa-comment-dots:before,.fa-commenting:before{content:"\f4ad"}.fa-plant-wilt:before{content:"\e5aa"}.fa-diamond:before{content:"\f219"}.fa-face-grin-squint:before,.fa-grin-squint:before{content:"\f585"}.fa-hand-holding-dollar:before,.fa-hand-holding-usd:before{content:"\f4c0"}.fa-bacterium:before{content:"\e05a"}.fa-hand-pointer:before{content:"\f25a"}.fa-drum-steelpan:before{content:"\f56a"}.fa-hand-scissors:before{content:"\f257"}.fa-hands-praying:before,.fa-praying-hands:before{content:"\f684"}.fa-arrow-right-rotate:before,.fa-arrow-rotate-forward:before,.fa-arrow-rotate-right:before,.fa-redo:before{content:"\f01e"}.fa-biohazard:before{content:"\f780"}.fa-location-crosshairs:before,.fa-location:before{content:"\f601"}.fa-mars-double:before{content:"\f227"}.fa-child-dress:before{content:"\e59c"}.fa-users-between-lines:before{content:"\e591"}.fa-lungs-virus:before{content:"\e067"}.fa-face-grin-tears:before,.fa-grin-tears:before{content:"\f588"}.fa-phone:before{content:"\f095"}.fa-calendar-times:before,.fa-calendar-xmark:before{content:"\f273"}.fa-child-reaching:before{content:"\e59d"}.fa-head-side-virus:before{content:"\e064"}.fa-user-cog:before,.fa-user-gear:before{content:"\f4fe"}.fa-arrow-up-1-9:before,.fa-sort-numeric-up:before{content:"\f163"}.fa-door-closed:before{content:"\f52a"}.fa-shield-virus:before{content:"\e06c"}.fa-dice-six:before{content:"\f526"}.fa-mosquito-net:before{content:"\e52c"}.fa-bridge-water:before{content:"\e4ce"}.fa-person-booth:before{content:"\f756"}.fa-text-width:before{content:"\f035"}.fa-hat-wizard:before{content:"\f6e8"}.fa-pen-fancy:before{content:"\f5ac"}.fa-digging:before,.fa-person-digging:before{content:"\f85e"}.fa-trash:before{content:"\f1f8"}.fa-gauge-simple-med:before,.fa-gauge-simple:before,.fa-tachometer-average:before{content:"\f629"}.fa-book-medical:before{content:"\f7e6"}.fa-poo:before{content:"\f2fe"}.fa-quote-right-alt:before,.fa-quote-right:before{content:"\f10e"}.fa-shirt:before,.fa-t-shirt:before,.fa-tshirt:before{content:"\f553"}.fa-cubes:before{content:"\f1b3"}.fa-divide:before{content:"\f529"}.fa-tenge-sign:before,.fa-tenge:before{content:"\f7d7"}.fa-headphones:before{content:"\f025"}.fa-hands-holding:before{content:"\f4c2"}.fa-hands-clapping:before{content:"\e1a8"}.fa-republican:before{content:"\f75e"}.fa-arrow-left:before{content:"\f060"}.fa-person-circle-xmark:before{content:"\e543"}.fa-ruler:before{content:"\f545"}.fa-align-left:before{content:"\f036"}.fa-dice-d6:before{content:"\f6d1"}.fa-restroom:before{content:"\f7bd"}.fa-j:before{content:"\4a"}.fa-users-viewfinder:before{content:"\e595"}.fa-file-video:before{content:"\f1c8"}.fa-external-link-alt:before,.fa-up-right-from-square:before{content:"\f35d"}.fa-table-cells:before,.fa-th:before{content:"\f00a"}.fa-file-pdf:before{content:"\f1c1"}.fa-bible:before,.fa-book-bible:before{content:"\f647"}.fa-o:before{content:"\4f"}.fa-medkit:before,.fa-suitcase-medical:before{content:"\f0fa"}.fa-user-secret:before{content:"\f21b"}.fa-otter:before{content:"\f700"}.fa-female:before,.fa-person-dress:before{content:"\f182"}.fa-comment-dollar:before{content:"\f651"}.fa-briefcase-clock:before,.fa-business-time:before{content:"\f64a"}.fa-table-cells-large:before,.fa-th-large:before{content:"\f009"}.fa-book-tanakh:before,.fa-tanakh:before{content:"\f827"}.fa-phone-volume:before,.fa-volume-control-phone:before{content:"\f2a0"}.fa-hat-cowboy-side:before{content:"\f8c1"}.fa-clipboard-user:before{content:"\f7f3"}.fa-child:before{content:"\f1ae"}.fa-lira-sign:before{content:"\f195"}.fa-satellite:before{content:"\f7bf"}.fa-plane-lock:before{content:"\e558"}.fa-tag:before{content:"\f02b"}.fa-comment:before{content:"\f075"}.fa-birthday-cake:before,.fa-cake-candles:before,.fa-cake:before{content:"\f1fd"}.fa-envelope:before{content:"\f0e0"}.fa-angle-double-up:before,.fa-angles-up:before{content:"\f102"}.fa-paperclip:before{content:"\f0c6"}.fa-arrow-right-to-city:before{content:"\e4b3"}.fa-ribbon:before{content:"\f4d6"}.fa-lungs:before{content:"\f604"}.fa-arrow-up-9-1:before,.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-litecoin-sign:before{content:"\e1d3"}.fa-border-none:before{content:"\f850"}.fa-circle-nodes:before{content:"\e4e2"}.fa-parachute-box:before{content:"\f4cd"}.fa-indent:before{content:"\f03c"}.fa-truck-field-un:before{content:"\e58e"}.fa-hourglass-empty:before,.fa-hourglass:before{content:"\f254"}.fa-mountain:before{content:"\f6fc"}.fa-user-doctor:before,.fa-user-md:before{content:"\f0f0"}.fa-circle-info:before,.fa-info-circle:before{content:"\f05a"}.fa-cloud-meatball:before{content:"\f73b"}.fa-camera-alt:before,.fa-camera:before{content:"\f030"}.fa-square-virus:before{content:"\e578"}.fa-meteor:before{content:"\f753"}.fa-car-on:before{content:"\e4dd"}.fa-sleigh:before{content:"\f7cc"}.fa-arrow-down-1-9:before,.fa-sort-numeric-asc:before,.fa-sort-numeric-down:before{content:"\f162"}.fa-hand-holding-droplet:before,.fa-hand-holding-water:before{content:"\f4c1"}.fa-water:before{content:"\f773"}.fa-calendar-check:before{content:"\f274"}.fa-braille:before{content:"\f2a1"}.fa-prescription-bottle-alt:before,.fa-prescription-bottle-medical:before{content:"\f486"}.fa-landmark:before{content:"\f66f"}.fa-truck:before{content:"\f0d1"}.fa-crosshairs:before{content:"\f05b"}.fa-person-cane:before{content:"\e53c"}.fa-tent:before{content:"\e57d"}.fa-vest-patches:before{content:"\e086"}.fa-check-double:before{content:"\f560"}.fa-arrow-down-a-z:before,.fa-sort-alpha-asc:before,.fa-sort-alpha-down:before{content:"\f15d"}.fa-money-bill-wheat:before{content:"\e52a"}.fa-cookie:before{content:"\f563"}.fa-arrow-left-rotate:before,.fa-arrow-rotate-back:before,.fa-arrow-rotate-backward:before,.fa-arrow-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-hard-drive:before,.fa-hdd:before{content:"\f0a0"}.fa-face-grin-squint-tears:before,.fa-grin-squint-tears:before{content:"\f586"}.fa-dumbbell:before{content:"\f44b"}.fa-list-alt:before,.fa-rectangle-list:before{content:"\f022"}.fa-tarp-droplet:before{content:"\e57c"}.fa-house-medical-circle-check:before{content:"\e511"}.fa-person-skiing-nordic:before,.fa-skiing-nordic:before{content:"\f7ca"}.fa-calendar-plus:before{content:"\f271"}.fa-plane-arrival:before{content:"\f5af"}.fa-arrow-alt-circle-left:before,.fa-circle-left:before{content:"\f359"}.fa-subway:before,.fa-train-subway:before{content:"\f239"}.fa-chart-gantt:before{content:"\e0e4"}.fa-indian-rupee-sign:before,.fa-indian-rupee:before,.fa-inr:before{content:"\e1bc"}.fa-crop-alt:before,.fa-crop-simple:before{content:"\f565"}.fa-money-bill-1:before,.fa-money-bill-alt:before{content:"\f3d1"}.fa-left-long:before,.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-dna:before{content:"\f471"}.fa-virus-slash:before{content:"\e075"}.fa-minus:before,.fa-subtract:before{content:"\f068"}.fa-chess:before{content:"\f439"}.fa-arrow-left-long:before,.fa-long-arrow-left:before{content:"\f177"}.fa-plug-circle-check:before{content:"\e55c"}.fa-street-view:before{content:"\f21d"}.fa-franc-sign:before{content:"\e18f"}.fa-volume-off:before{content:"\f026"}.fa-american-sign-language-interpreting:before,.fa-asl-interpreting:before,.fa-hands-american-sign-language-interpreting:before,.fa-hands-asl-interpreting:before{content:"\f2a3"}.fa-cog:before,.fa-gear:before{content:"\f013"}.fa-droplet-slash:before,.fa-tint-slash:before{content:"\f5c7"}.fa-mosque:before{content:"\f678"}.fa-mosquito:before{content:"\e52b"}.fa-star-of-david:before{content:"\f69a"}.fa-person-military-rifle:before{content:"\e54b"}.fa-cart-shopping:before,.fa-shopping-cart:before{content:"\f07a"}.fa-vials:before{content:"\f493"}.fa-plug-circle-plus:before{content:"\e55f"}.fa-place-of-worship:before{content:"\f67f"}.fa-grip-vertical:before{content:"\f58e"}.fa-arrow-turn-up:before,.fa-level-up:before{content:"\f148"}.fa-u:before{content:"\55"}.fa-square-root-alt:before,.fa-square-root-variable:before{content:"\f698"}.fa-clock-four:before,.fa-clock:before{content:"\f017"}.fa-backward-step:before,.fa-step-backward:before{content:"\f048"}.fa-pallet:before{content:"\f482"}.fa-faucet:before{content:"\e005"}.fa-baseball-bat-ball:before{content:"\f432"}.fa-s:before{content:"\53"}.fa-timeline:before{content:"\e29c"}.fa-keyboard:before{content:"\f11c"}.fa-caret-down:before{content:"\f0d7"}.fa-clinic-medical:before,.fa-house-chimney-medical:before{content:"\f7f2"}.fa-temperature-3:before,.fa-temperature-three-quarters:before,.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-mobile-android-alt:before,.fa-mobile-screen:before{content:"\f3cf"}.fa-plane-up:before{content:"\e22d"}.fa-piggy-bank:before{content:"\f4d3"}.fa-battery-3:before,.fa-battery-half:before{content:"\f242"}.fa-mountain-city:before{content:"\e52e"}.fa-coins:before{content:"\f51e"}.fa-khanda:before{content:"\f66d"}.fa-sliders-h:before,.fa-sliders:before{content:"\f1de"}.fa-folder-tree:before{content:"\f802"}.fa-network-wired:before{content:"\f6ff"}.fa-map-pin:before{content:"\f276"}.fa-hamsa:before{content:"\f665"}.fa-cent-sign:before{content:"\e3f5"}.fa-flask:before{content:"\f0c3"}.fa-person-pregnant:before{content:"\e31e"}.fa-wand-sparkles:before{content:"\f72b"}.fa-ellipsis-v:before,.fa-ellipsis-vertical:before{content:"\f142"}.fa-ticket:before{content:"\f145"}.fa-power-off:before{content:"\f011"}.fa-long-arrow-alt-right:before,.fa-right-long:before{content:"\f30b"}.fa-flag-usa:before{content:"\f74d"}.fa-laptop-file:before{content:"\e51d"}.fa-teletype:before,.fa-tty:before{content:"\f1e4"}.fa-diagram-next:before{content:"\e476"}.fa-person-rifle:before{content:"\e54e"}.fa-house-medical-circle-exclamation:before{content:"\e512"}.fa-closed-captioning:before{content:"\f20a"}.fa-hiking:before,.fa-person-hiking:before{content:"\f6ec"}.fa-venus-double:before{content:"\f226"}.fa-images:before{content:"\f302"}.fa-calculator:before{content:"\f1ec"}.fa-people-pulling:before{content:"\e535"}.fa-n:before{content:"\4e"}.fa-cable-car:before,.fa-tram:before{content:"\f7da"}.fa-cloud-rain:before{content:"\f73d"}.fa-building-circle-xmark:before{content:"\e4d4"}.fa-ship:before{content:"\f21a"}.fa-arrows-down-to-line:before{content:"\e4b8"}.fa-download:before{content:"\f019"}.fa-face-grin:before,.fa-grin:before{content:"\f580"}.fa-backspace:before,.fa-delete-left:before{content:"\f55a"}.fa-eye-dropper-empty:before,.fa-eye-dropper:before,.fa-eyedropper:before{content:"\f1fb"}.fa-file-circle-check:before{content:"\e5a0"}.fa-forward:before{content:"\f04e"}.fa-mobile-android:before,.fa-mobile-phone:before,.fa-mobile:before{content:"\f3ce"}.fa-face-meh:before,.fa-meh:before{content:"\f11a"}.fa-align-center:before{content:"\f037"}.fa-book-dead:before,.fa-book-skull:before{content:"\f6b7"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-heart-circle-exclamation:before{content:"\e4fe"}.fa-home-alt:before,.fa-home-lg-alt:before,.fa-home:before,.fa-house:before{content:"\f015"}.fa-calendar-week:before{content:"\f784"}.fa-laptop-medical:before{content:"\f812"}.fa-b:before{content:"\42"}.fa-file-medical:before{content:"\f477"}.fa-dice-one:before{content:"\f525"}.fa-kiwi-bird:before{content:"\f535"}.fa-arrow-right-arrow-left:before,.fa-exchange:before{content:"\f0ec"}.fa-redo-alt:before,.fa-rotate-forward:before,.fa-rotate-right:before{content:"\f2f9"}.fa-cutlery:before,.fa-utensils:before{content:"\f2e7"}.fa-arrow-up-wide-short:before,.fa-sort-amount-up:before{content:"\f161"}.fa-mill-sign:before{content:"\e1ed"}.fa-bowl-rice:before{content:"\e2eb"}.fa-skull:before{content:"\f54c"}.fa-broadcast-tower:before,.fa-tower-broadcast:before{content:"\f519"}.fa-truck-pickup:before{content:"\f63c"}.fa-long-arrow-alt-up:before,.fa-up-long:before{content:"\f30c"}.fa-stop:before{content:"\f04d"}.fa-code-merge:before{content:"\f387"}.fa-upload:before{content:"\f093"}.fa-hurricane:before{content:"\f751"}.fa-mound:before{content:"\e52d"}.fa-toilet-portable:before{content:"\e583"}.fa-compact-disc:before{content:"\f51f"}.fa-file-arrow-down:before,.fa-file-download:before{content:"\f56d"}.fa-caravan:before{content:"\f8ff"}.fa-shield-cat:before{content:"\e572"}.fa-bolt:before,.fa-zap:before{content:"\f0e7"}.fa-glass-water:before{content:"\e4f4"}.fa-oil-well:before{content:"\e532"}.fa-vault:before{content:"\e2c5"}.fa-mars:before{content:"\f222"}.fa-toilet:before{content:"\f7d8"}.fa-plane-circle-xmark:before{content:"\e557"}.fa-cny:before,.fa-jpy:before,.fa-rmb:before,.fa-yen-sign:before,.fa-yen:before{content:"\f157"}.fa-rouble:before,.fa-rub:before,.fa-ruble-sign:before,.fa-ruble:before{content:"\f158"}.fa-sun:before{content:"\f185"}.fa-guitar:before{content:"\f7a6"}.fa-face-laugh-wink:before,.fa-laugh-wink:before{content:"\f59c"}.fa-horse-head:before{content:"\f7ab"}.fa-bore-hole:before{content:"\e4c3"}.fa-industry:before{content:"\f275"}.fa-arrow-alt-circle-down:before,.fa-circle-down:before{content:"\f358"}.fa-arrows-turn-to-dots:before{content:"\e4c1"}.fa-florin-sign:before{content:"\e184"}.fa-arrow-down-short-wide:before,.fa-sort-amount-desc:before,.fa-sort-amount-down-alt:before{content:"\f884"}.fa-less-than:before{content:"\3c"}.fa-angle-down:before{content:"\f107"}.fa-car-tunnel:before{content:"\e4de"}.fa-head-side-cough:before{content:"\e061"}.fa-grip-lines:before{content:"\f7a4"}.fa-thumbs-down:before{content:"\f165"}.fa-user-lock:before{content:"\f502"}.fa-arrow-right-long:before,.fa-long-arrow-right:before{content:"\f178"}.fa-anchor-circle-xmark:before{content:"\e4ac"}.fa-ellipsis-h:before,.fa-ellipsis:before{content:"\f141"}.fa-chess-pawn:before{content:"\f443"}.fa-first-aid:before,.fa-kit-medical:before{content:"\f479"}.fa-person-through-window:before{content:"\e5a9"}.fa-toolbox:before{content:"\f552"}.fa-hands-holding-circle:before{content:"\e4fb"}.fa-bug:before{content:"\f188"}.fa-credit-card-alt:before,.fa-credit-card:before{content:"\f09d"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-hand-holding-hand:before{content:"\e4f7"}.fa-book-open-reader:before,.fa-book-reader:before{content:"\f5da"}.fa-mountain-sun:before{content:"\e52f"}.fa-arrows-left-right-to-line:before{content:"\e4ba"}.fa-dice-d20:before{content:"\f6cf"}.fa-truck-droplet:before{content:"\e58c"}.fa-file-circle-xmark:before{content:"\e5a1"}.fa-temperature-arrow-up:before,.fa-temperature-up:before{content:"\e040"}.fa-medal:before{content:"\f5a2"}.fa-bed:before{content:"\f236"}.fa-h-square:before,.fa-square-h:before{content:"\f0fd"}.fa-podcast:before{content:"\f2ce"}.fa-temperature-4:before,.fa-temperature-full:before,.fa-thermometer-4:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-bell:before{content:"\f0f3"}.fa-superscript:before{content:"\f12b"}.fa-plug-circle-xmark:before{content:"\e560"}.fa-star-of-life:before{content:"\f621"}.fa-phone-slash:before{content:"\f3dd"}.fa-paint-roller:before{content:"\f5aa"}.fa-hands-helping:before,.fa-handshake-angle:before{content:"\f4c4"}.fa-location-dot:before,.fa-map-marker-alt:before{content:"\f3c5"}.fa-file:before{content:"\f15b"}.fa-greater-than:before{content:"\3e"}.fa-person-swimming:before,.fa-swimmer:before{content:"\f5c4"}.fa-arrow-down:before{content:"\f063"}.fa-droplet:before,.fa-tint:before{content:"\f043"}.fa-eraser:before{content:"\f12d"}.fa-earth-america:before,.fa-earth-americas:before,.fa-earth:before,.fa-globe-americas:before{content:"\f57d"}.fa-person-burst:before{content:"\e53b"}.fa-dove:before{content:"\f4ba"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-socks:before{content:"\f696"}.fa-inbox:before{content:"\f01c"}.fa-section:before{content:"\e447"}.fa-gauge-high:before,.fa-tachometer-alt-fast:before,.fa-tachometer-alt:before{content:"\f625"}.fa-envelope-open-text:before{content:"\f658"}.fa-hospital-alt:before,.fa-hospital-wide:before,.fa-hospital:before{content:"\f0f8"}.fa-wine-bottle:before{content:"\f72f"}.fa-chess-rook:before{content:"\f447"}.fa-bars-staggered:before,.fa-reorder:before,.fa-stream:before{content:"\f550"}.fa-dharmachakra:before{content:"\f655"}.fa-hotdog:before{content:"\f80f"}.fa-blind:before,.fa-person-walking-with-cane:before{content:"\f29d"}.fa-drum:before{content:"\f569"}.fa-ice-cream:before{content:"\f810"}.fa-heart-circle-bolt:before{content:"\e4fc"}.fa-fax:before{content:"\f1ac"}.fa-paragraph:before{content:"\f1dd"}.fa-check-to-slot:before,.fa-vote-yea:before{content:"\f772"}.fa-star-half:before{content:"\f089"}.fa-boxes-alt:before,.fa-boxes-stacked:before,.fa-boxes:before{content:"\f468"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-assistive-listening-systems:before,.fa-ear-listen:before{content:"\f2a2"}.fa-tree-city:before{content:"\e587"}.fa-play:before{content:"\f04b"}.fa-font:before{content:"\f031"}.fa-rupiah-sign:before{content:"\e23d"}.fa-magnifying-glass:before,.fa-search:before{content:"\f002"}.fa-ping-pong-paddle-ball:before,.fa-table-tennis-paddle-ball:before,.fa-table-tennis:before{content:"\f45d"}.fa-diagnoses:before,.fa-person-dots-from-line:before{content:"\f470"}.fa-trash-can-arrow-up:before,.fa-trash-restore-alt:before{content:"\f82a"}.fa-naira-sign:before{content:"\e1f6"}.fa-cart-arrow-down:before{content:"\f218"}.fa-walkie-talkie:before{content:"\f8ef"}.fa-file-edit:before,.fa-file-pen:before{content:"\f31c"}.fa-receipt:before{content:"\f543"}.fa-pen-square:before,.fa-pencil-square:before,.fa-square-pen:before{content:"\f14b"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-person-circle-exclamation:before{content:"\e53f"}.fa-chevron-down:before{content:"\f078"}.fa-battery-5:before,.fa-battery-full:before,.fa-battery:before{content:"\f240"}.fa-skull-crossbones:before{content:"\f714"}.fa-code-compare:before{content:"\e13a"}.fa-list-dots:before,.fa-list-ul:before{content:"\f0ca"}.fa-school-lock:before{content:"\e56f"}.fa-tower-cell:before{content:"\e585"}.fa-down-long:before,.fa-long-arrow-alt-down:before{content:"\f309"}.fa-ranking-star:before{content:"\e561"}.fa-chess-king:before{content:"\f43f"}.fa-person-harassing:before{content:"\e549"}.fa-brazilian-real-sign:before{content:"\e46c"}.fa-landmark-alt:before,.fa-landmark-dome:before{content:"\f752"}.fa-arrow-up:before{content:"\f062"}.fa-television:before,.fa-tv-alt:before,.fa-tv:before{content:"\f26c"}.fa-shrimp:before{content:"\e448"}.fa-list-check:before,.fa-tasks:before{content:"\f0ae"}.fa-jug-detergent:before{content:"\e519"}.fa-circle-user:before,.fa-user-circle:before{content:"\f2bd"}.fa-user-shield:before{content:"\f505"}.fa-wind:before{content:"\f72e"}.fa-car-burst:before,.fa-car-crash:before{content:"\f5e1"}.fa-y:before{content:"\59"}.fa-person-snowboarding:before,.fa-snowboarding:before{content:"\f7ce"}.fa-shipping-fast:before,.fa-truck-fast:before{content:"\f48b"}.fa-fish:before{content:"\f578"}.fa-user-graduate:before{content:"\f501"}.fa-adjust:before,.fa-circle-half-stroke:before{content:"\f042"}.fa-clapperboard:before{content:"\e131"}.fa-circle-radiation:before,.fa-radiation-alt:before{content:"\f7ba"}.fa-baseball-ball:before,.fa-baseball:before{content:"\f433"}.fa-jet-fighter-up:before{content:"\e518"}.fa-diagram-project:before,.fa-project-diagram:before{content:"\f542"}.fa-copy:before{content:"\f0c5"}.fa-volume-mute:before,.fa-volume-times:before,.fa-volume-xmark:before{content:"\f6a9"}.fa-hand-sparkles:before{content:"\e05d"}.fa-grip-horizontal:before,.fa-grip:before{content:"\f58d"}.fa-share-from-square:before,.fa-share-square:before{content:"\f14d"}.fa-child-combatant:before,.fa-child-rifle:before{content:"\e4e0"}.fa-gun:before{content:"\e19b"}.fa-phone-square:before,.fa-square-phone:before{content:"\f098"}.fa-add:before,.fa-plus:before{content:"\2b"}.fa-expand:before{content:"\f065"}.fa-computer:before{content:"\e4e5"}.fa-close:before,.fa-multiply:before,.fa-remove:before,.fa-times:before,.fa-xmark:before{content:"\f00d"}.fa-arrows-up-down-left-right:before,.fa-arrows:before{content:"\f047"}.fa-chalkboard-teacher:before,.fa-chalkboard-user:before{content:"\f51c"}.fa-peso-sign:before{content:"\e222"}.fa-building-shield:before{content:"\e4d8"}.fa-baby:before{content:"\f77c"}.fa-users-line:before{content:"\e592"}.fa-quote-left-alt:before,.fa-quote-left:before{content:"\f10d"}.fa-tractor:before{content:"\f722"}.fa-trash-arrow-up:before,.fa-trash-restore:before{content:"\f829"}.fa-arrow-down-up-lock:before{content:"\e4b0"}.fa-lines-leaning:before{content:"\e51e"}.fa-ruler-combined:before{content:"\f546"}.fa-copyright:before{content:"\f1f9"}.fa-equals:before{content:"\3d"}.fa-blender:before{content:"\f517"}.fa-teeth:before{content:"\f62e"}.fa-ils:before,.fa-shekel-sign:before,.fa-shekel:before,.fa-sheqel-sign:before,.fa-sheqel:before{content:"\f20b"}.fa-map:before{content:"\f279"}.fa-rocket:before{content:"\f135"}.fa-photo-film:before,.fa-photo-video:before{content:"\f87c"}.fa-folder-minus:before{content:"\f65d"}.fa-store:before{content:"\f54e"}.fa-arrow-trend-up:before{content:"\e098"}.fa-plug-circle-minus:before{content:"\e55e"}.fa-sign-hanging:before,.fa-sign:before{content:"\f4d9"}.fa-bezier-curve:before{content:"\f55b"}.fa-bell-slash:before{content:"\f1f6"}.fa-tablet-android:before,.fa-tablet:before{content:"\f3fb"}.fa-school-flag:before{content:"\e56e"}.fa-fill:before{content:"\f575"}.fa-angle-up:before{content:"\f106"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-holly-berry:before{content:"\f7aa"}.fa-chevron-left:before{content:"\f053"}.fa-bacteria:before{content:"\e059"}.fa-hand-lizard:before{content:"\f258"}.fa-notdef:before{content:"\e1fe"}.fa-disease:before{content:"\f7fa"}.fa-briefcase-medical:before{content:"\f469"}.fa-genderless:before{content:"\f22d"}.fa-chevron-right:before{content:"\f054"}.fa-retweet:before{content:"\f079"}.fa-car-alt:before,.fa-car-rear:before{content:"\f5de"}.fa-pump-soap:before{content:"\e06b"}.fa-video-slash:before{content:"\f4e2"}.fa-battery-2:before,.fa-battery-quarter:before{content:"\f243"}.fa-radio:before{content:"\f8d7"}.fa-baby-carriage:before,.fa-carriage-baby:before{content:"\f77d"}.fa-traffic-light:before{content:"\f637"}.fa-thermometer:before{content:"\f491"}.fa-vr-cardboard:before{content:"\f729"}.fa-hand-middle-finger:before{content:"\f806"}.fa-percent:before,.fa-percentage:before{content:"\25"}.fa-truck-moving:before{content:"\f4df"}.fa-glass-water-droplet:before{content:"\e4f5"}.fa-display:before{content:"\e163"}.fa-face-smile:before,.fa-smile:before{content:"\f118"}.fa-thumb-tack:before,.fa-thumbtack:before{content:"\f08d"}.fa-trophy:before{content:"\f091"}.fa-person-praying:before,.fa-pray:before{content:"\f683"}.fa-hammer:before{content:"\f6e3"}.fa-hand-peace:before{content:"\f25b"}.fa-rotate:before,.fa-sync-alt:before{content:"\f2f1"}.fa-spinner:before{content:"\f110"}.fa-robot:before{content:"\f544"}.fa-peace:before{content:"\f67c"}.fa-cogs:before,.fa-gears:before{content:"\f085"}.fa-warehouse:before{content:"\f494"}.fa-arrow-up-right-dots:before{content:"\e4b7"}.fa-splotch:before{content:"\f5bc"}.fa-face-grin-hearts:before,.fa-grin-hearts:before{content:"\f584"}.fa-dice-four:before{content:"\f524"}.fa-sim-card:before{content:"\f7c4"}.fa-transgender-alt:before,.fa-transgender:before{content:"\f225"}.fa-mercury:before{content:"\f223"}.fa-arrow-turn-down:before,.fa-level-down:before{content:"\f149"}.fa-person-falling-burst:before{content:"\e547"}.fa-award:before{content:"\f559"}.fa-ticket-alt:before,.fa-ticket-simple:before{content:"\f3ff"}.fa-building:before{content:"\f1ad"}.fa-angle-double-left:before,.fa-angles-left:before{content:"\f100"}.fa-qrcode:before{content:"\f029"}.fa-clock-rotate-left:before,.fa-history:before{content:"\f1da"}.fa-face-grin-beam-sweat:before,.fa-grin-beam-sweat:before{content:"\f583"}.fa-arrow-right-from-file:before,.fa-file-export:before{content:"\f56e"}.fa-shield-blank:before,.fa-shield:before{content:"\f132"}.fa-arrow-up-short-wide:before,.fa-sort-amount-up-alt:before{content:"\f885"}.fa-house-medical:before{content:"\e3b2"}.fa-golf-ball-tee:before,.fa-golf-ball:before{content:"\f450"}.fa-chevron-circle-left:before,.fa-circle-chevron-left:before{content:"\f137"}.fa-house-chimney-window:before{content:"\e00d"}.fa-pen-nib:before{content:"\f5ad"}.fa-tent-arrow-turn-left:before{content:"\e580"}.fa-tents:before{content:"\e582"}.fa-magic:before,.fa-wand-magic:before{content:"\f0d0"}.fa-dog:before{content:"\f6d3"}.fa-carrot:before{content:"\f787"}.fa-moon:before{content:"\f186"}.fa-wine-glass-alt:before,.fa-wine-glass-empty:before{content:"\f5ce"}.fa-cheese:before{content:"\f7ef"}.fa-yin-yang:before{content:"\f6ad"}.fa-music:before{content:"\f001"}.fa-code-commit:before{content:"\f386"}.fa-temperature-low:before{content:"\f76b"}.fa-biking:before,.fa-person-biking:before{content:"\f84a"}.fa-broom:before{content:"\f51a"}.fa-shield-heart:before{content:"\e574"}.fa-gopuram:before{content:"\f664"}.fa-earth-oceania:before,.fa-globe-oceania:before{content:"\e47b"}.fa-square-xmark:before,.fa-times-square:before,.fa-xmark-square:before{content:"\f2d3"}.fa-hashtag:before{content:"\23"}.fa-expand-alt:before,.fa-up-right-and-down-left-from-center:before{content:"\f424"}.fa-oil-can:before{content:"\f613"}.fa-t:before{content:"\54"}.fa-hippo:before{content:"\f6ed"}.fa-chart-column:before{content:"\e0e3"}.fa-infinity:before{content:"\f534"}.fa-vial-circle-check:before{content:"\e596"}.fa-person-arrow-down-to-line:before{content:"\e538"}.fa-voicemail:before{content:"\f897"}.fa-fan:before{content:"\f863"}.fa-person-walking-luggage:before{content:"\e554"}.fa-arrows-alt-v:before,.fa-up-down:before{content:"\f338"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-calendar:before{content:"\f133"}.fa-trailer:before{content:"\e041"}.fa-bahai:before,.fa-haykal:before{content:"\f666"}.fa-sd-card:before{content:"\f7c2"}.fa-dragon:before{content:"\f6d5"}.fa-shoe-prints:before{content:"\f54b"}.fa-circle-plus:before,.fa-plus-circle:before{content:"\f055"}.fa-face-grin-tongue-wink:before,.fa-grin-tongue-wink:before{content:"\f58b"}.fa-hand-holding:before{content:"\f4bd"}.fa-plug-circle-exclamation:before{content:"\e55d"}.fa-chain-broken:before,.fa-chain-slash:before,.fa-link-slash:before,.fa-unlink:before{content:"\f127"}.fa-clone:before{content:"\f24d"}.fa-person-walking-arrow-loop-left:before{content:"\e551"}.fa-arrow-up-z-a:before,.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-fire-alt:before,.fa-fire-flame-curved:before{content:"\f7e4"}.fa-tornado:before{content:"\f76f"}.fa-file-circle-plus:before{content:"\e494"}.fa-book-quran:before,.fa-quran:before{content:"\f687"}.fa-anchor:before{content:"\f13d"}.fa-border-all:before{content:"\f84c"}.fa-angry:before,.fa-face-angry:before{content:"\f556"}.fa-cookie-bite:before{content:"\f564"}.fa-arrow-trend-down:before{content:"\e097"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-draw-polygon:before{content:"\f5ee"}.fa-balance-scale:before,.fa-scale-balanced:before{content:"\f24e"}.fa-gauge-simple-high:before,.fa-tachometer-fast:before,.fa-tachometer:before{content:"\f62a"}.fa-shower:before{content:"\f2cc"}.fa-desktop-alt:before,.fa-desktop:before{content:"\f390"}.fa-m:before{content:"\4d"}.fa-table-list:before,.fa-th-list:before{content:"\f00b"}.fa-comment-sms:before,.fa-sms:before{content:"\f7cd"}.fa-book:before{content:"\f02d"}.fa-user-plus:before{content:"\f234"}.fa-check:before{content:"\f00c"}.fa-battery-4:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-house-circle-check:before{content:"\e509"}.fa-angle-left:before{content:"\f104"}.fa-diagram-successor:before{content:"\e47a"}.fa-truck-arrow-right:before{content:"\e58b"}.fa-arrows-split-up-and-left:before{content:"\e4bc"}.fa-fist-raised:before,.fa-hand-fist:before{content:"\f6de"}.fa-cloud-moon:before{content:"\f6c3"}.fa-briefcase:before{content:"\f0b1"}.fa-person-falling:before{content:"\e546"}.fa-image-portrait:before,.fa-portrait:before{content:"\f3e0"}.fa-user-tag:before{content:"\f507"}.fa-rug:before{content:"\e569"}.fa-earth-europe:before,.fa-globe-europe:before{content:"\f7a2"}.fa-cart-flatbed-suitcase:before,.fa-luggage-cart:before{content:"\f59d"}.fa-rectangle-times:before,.fa-rectangle-xmark:before,.fa-times-rectangle:before,.fa-window-close:before{content:"\f410"}.fa-baht-sign:before{content:"\e0ac"}.fa-book-open:before{content:"\f518"}.fa-book-journal-whills:before,.fa-journal-whills:before{content:"\f66a"}.fa-handcuffs:before{content:"\e4f8"}.fa-exclamation-triangle:before,.fa-triangle-exclamation:before,.fa-warning:before{content:"\f071"}.fa-database:before{content:"\f1c0"}.fa-arrow-turn-right:before,.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-bottle-droplet:before{content:"\e4c4"}.fa-mask-face:before{content:"\e1d7"}.fa-hill-rockslide:before{content:"\e508"}.fa-exchange-alt:before,.fa-right-left:before{content:"\f362"}.fa-paper-plane:before{content:"\f1d8"}.fa-road-circle-exclamation:before{content:"\e565"}.fa-dungeon:before{content:"\f6d9"}.fa-align-right:before{content:"\f038"}.fa-money-bill-1-wave:before,.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-life-ring:before{content:"\f1cd"}.fa-hands:before,.fa-sign-language:before,.fa-signing:before{content:"\f2a7"}.fa-calendar-day:before{content:"\f783"}.fa-ladder-water:before,.fa-swimming-pool:before,.fa-water-ladder:before{content:"\f5c5"}.fa-arrows-up-down:before,.fa-arrows-v:before{content:"\f07d"}.fa-face-grimace:before,.fa-grimace:before{content:"\f57f"}.fa-wheelchair-alt:before,.fa-wheelchair-move:before{content:"\e2ce"}.fa-level-down-alt:before,.fa-turn-down:before{content:"\f3be"}.fa-person-walking-arrow-right:before{content:"\e552"}.fa-envelope-square:before,.fa-square-envelope:before{content:"\f199"}.fa-dice:before{content:"\f522"}.fa-bowling-ball:before{content:"\f436"}.fa-brain:before{content:"\f5dc"}.fa-band-aid:before,.fa-bandage:before{content:"\f462"}.fa-calendar-minus:before{content:"\f272"}.fa-circle-xmark:before,.fa-times-circle:before,.fa-xmark-circle:before{content:"\f057"}.fa-gifts:before{content:"\f79c"}.fa-hotel:before{content:"\f594"}.fa-earth-asia:before,.fa-globe-asia:before{content:"\f57e"}.fa-id-card-alt:before,.fa-id-card-clip:before{content:"\f47f"}.fa-magnifying-glass-plus:before,.fa-search-plus:before{content:"\f00e"}.fa-thumbs-up:before{content:"\f164"}.fa-user-clock:before{content:"\f4fd"}.fa-allergies:before,.fa-hand-dots:before{content:"\f461"}.fa-file-invoice:before{content:"\f570"}.fa-window-minimize:before{content:"\f2d1"}.fa-coffee:before,.fa-mug-saucer:before{content:"\f0f4"}.fa-brush:before{content:"\f55d"}.fa-mask:before{content:"\f6fa"}.fa-magnifying-glass-minus:before,.fa-search-minus:before{content:"\f010"}.fa-ruler-vertical:before{content:"\f548"}.fa-user-alt:before,.fa-user-large:before{content:"\f406"}.fa-train-tram:before{content:"\e5b4"}.fa-user-nurse:before{content:"\f82f"}.fa-syringe:before{content:"\f48e"}.fa-cloud-sun:before{content:"\f6c4"}.fa-stopwatch-20:before{content:"\e06f"}.fa-square-full:before{content:"\f45c"}.fa-magnet:before{content:"\f076"}.fa-jar:before{content:"\e516"}.fa-note-sticky:before,.fa-sticky-note:before{content:"\f249"}.fa-bug-slash:before{content:"\e490"}.fa-arrow-up-from-water-pump:before{content:"\e4b6"}.fa-bone:before{content:"\f5d7"}.fa-user-injured:before{content:"\f728"}.fa-face-sad-tear:before,.fa-sad-tear:before{content:"\f5b4"}.fa-plane:before{content:"\f072"}.fa-tent-arrows-down:before{content:"\e581"}.fa-exclamation:before{content:"\21"}.fa-arrows-spin:before{content:"\e4bb"}.fa-print:before{content:"\f02f"}.fa-try:before,.fa-turkish-lira-sign:before,.fa-turkish-lira:before{content:"\e2bb"}.fa-dollar-sign:before,.fa-dollar:before,.fa-usd:before{content:"\24"}.fa-x:before{content:"\58"}.fa-magnifying-glass-dollar:before,.fa-search-dollar:before{content:"\f688"}.fa-users-cog:before,.fa-users-gear:before{content:"\f509"}.fa-person-military-pointing:before{content:"\e54a"}.fa-bank:before,.fa-building-columns:before,.fa-institution:before,.fa-museum:before,.fa-university:before{content:"\f19c"}.fa-umbrella:before{content:"\f0e9"}.fa-trowel:before{content:"\e589"}.fa-d:before{content:"\44"}.fa-stapler:before{content:"\e5af"}.fa-masks-theater:before,.fa-theater-masks:before{content:"\f630"}.fa-kip-sign:before{content:"\e1c4"}.fa-hand-point-left:before{content:"\f0a5"}.fa-handshake-alt:before,.fa-handshake-simple:before{content:"\f4c6"}.fa-fighter-jet:before,.fa-jet-fighter:before{content:"\f0fb"}.fa-share-alt-square:before,.fa-square-share-nodes:before{content:"\f1e1"}.fa-barcode:before{content:"\f02a"}.fa-plus-minus:before{content:"\e43c"}.fa-video-camera:before,.fa-video:before{content:"\f03d"}.fa-graduation-cap:before,.fa-mortar-board:before{content:"\f19d"}.fa-hand-holding-medical:before{content:"\e05c"}.fa-person-circle-check:before{content:"\e53e"}.fa-level-up-alt:before,.fa-turn-up:before{content:"\f3bf"} +.fa-sr-only,.fa-sr-only-focusable:not(:focus),.sr-only,.sr-only-focusable:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host,:root{--fa-style-family-brands:"Font Awesome 6 Brands";--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}.fa-brands,.fab{font-weight:400}.fa-monero:before{content:"\f3d0"}.fa-hooli:before{content:"\f427"}.fa-yelp:before{content:"\f1e9"}.fa-cc-visa:before{content:"\f1f0"}.fa-lastfm:before{content:"\f202"}.fa-shopware:before{content:"\f5b5"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-aws:before{content:"\f375"}.fa-redhat:before{content:"\f7bc"}.fa-yoast:before{content:"\f2b1"}.fa-cloudflare:before{content:"\e07d"}.fa-ups:before{content:"\f7e0"}.fa-wpexplorer:before{content:"\f2de"}.fa-dyalog:before{content:"\f399"}.fa-bity:before{content:"\f37a"}.fa-stackpath:before{content:"\f842"}.fa-buysellads:before{content:"\f20d"}.fa-first-order:before{content:"\f2b0"}.fa-modx:before{content:"\f285"}.fa-guilded:before{content:"\e07e"}.fa-vnv:before{content:"\f40b"}.fa-js-square:before,.fa-square-js:before{content:"\f3b9"}.fa-microsoft:before{content:"\f3ca"}.fa-qq:before{content:"\f1d6"}.fa-orcid:before{content:"\f8d2"}.fa-java:before{content:"\f4e4"}.fa-invision:before{content:"\f7b0"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-centercode:before{content:"\f380"}.fa-glide-g:before{content:"\f2a6"}.fa-drupal:before{content:"\f1a9"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-unity:before{content:"\e049"}.fa-whmcs:before{content:"\f40d"}.fa-rocketchat:before{content:"\f3e8"}.fa-vk:before{content:"\f189"}.fa-untappd:before{content:"\f405"}.fa-mailchimp:before{content:"\f59e"}.fa-css3-alt:before{content:"\f38b"}.fa-reddit-square:before,.fa-square-reddit:before{content:"\f1a2"}.fa-vimeo-v:before{content:"\f27d"}.fa-contao:before{content:"\f26d"}.fa-square-font-awesome:before{content:"\e5ad"}.fa-deskpro:before{content:"\f38f"}.fa-sistrix:before{content:"\f3ee"}.fa-instagram-square:before,.fa-square-instagram:before{content:"\e055"}.fa-battle-net:before{content:"\f835"}.fa-the-red-yeti:before{content:"\f69d"}.fa-hacker-news-square:before,.fa-square-hacker-news:before{content:"\f3af"}.fa-edge:before{content:"\f282"}.fa-napster:before{content:"\f3d2"}.fa-snapchat-square:before,.fa-square-snapchat:before{content:"\f2ad"}.fa-google-plus-g:before{content:"\f0d5"}.fa-artstation:before{content:"\f77a"}.fa-markdown:before{content:"\f60f"}.fa-sourcetree:before{content:"\f7d3"}.fa-google-plus:before{content:"\f2b3"}.fa-diaspora:before{content:"\f791"}.fa-foursquare:before{content:"\f180"}.fa-stack-overflow:before{content:"\f16c"}.fa-github-alt:before{content:"\f113"}.fa-phoenix-squadron:before{content:"\f511"}.fa-pagelines:before{content:"\f18c"}.fa-algolia:before{content:"\f36c"}.fa-red-river:before{content:"\f3e3"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-safari:before{content:"\f267"}.fa-google:before{content:"\f1a0"}.fa-font-awesome-alt:before,.fa-square-font-awesome-stroke:before{content:"\f35c"}.fa-atlassian:before{content:"\f77b"}.fa-linkedin-in:before{content:"\f0e1"}.fa-digital-ocean:before{content:"\f391"}.fa-nimblr:before{content:"\f5a8"}.fa-chromecast:before{content:"\f838"}.fa-evernote:before{content:"\f839"}.fa-hacker-news:before{content:"\f1d4"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-adversal:before{content:"\f36a"}.fa-creative-commons:before{content:"\f25e"}.fa-watchman-monitoring:before{content:"\e087"}.fa-fonticons:before{content:"\f280"}.fa-weixin:before{content:"\f1d7"}.fa-shirtsinbulk:before{content:"\f214"}.fa-codepen:before{content:"\f1cb"}.fa-git-alt:before{content:"\f841"}.fa-lyft:before{content:"\f3c3"}.fa-rev:before{content:"\f5b2"}.fa-windows:before{content:"\f17a"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-square-viadeo:before,.fa-viadeo-square:before{content:"\f2aa"}.fa-meetup:before{content:"\f2e0"}.fa-centos:before{content:"\f789"}.fa-adn:before{content:"\f170"}.fa-cloudsmith:before{content:"\f384"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-dribbble-square:before,.fa-square-dribbble:before{content:"\f397"}.fa-codiepie:before{content:"\f284"}.fa-node:before{content:"\f419"}.fa-mix:before{content:"\f3cb"}.fa-steam:before{content:"\f1b6"}.fa-cc-apple-pay:before{content:"\f416"}.fa-scribd:before{content:"\f28a"}.fa-openid:before{content:"\f19b"}.fa-instalod:before{content:"\e081"}.fa-expeditedssl:before{content:"\f23e"}.fa-sellcast:before{content:"\f2da"}.fa-square-twitter:before,.fa-twitter-square:before{content:"\f081"}.fa-r-project:before{content:"\f4f7"}.fa-delicious:before{content:"\f1a5"}.fa-freebsd:before{content:"\f3a4"}.fa-vuejs:before{content:"\f41f"}.fa-accusoft:before{content:"\f369"}.fa-ioxhost:before{content:"\f208"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-app-store:before{content:"\f36f"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-itunes-note:before{content:"\f3b5"}.fa-golang:before{content:"\e40f"}.fa-kickstarter:before{content:"\f3bb"}.fa-grav:before{content:"\f2d6"}.fa-weibo:before{content:"\f18a"}.fa-uncharted:before{content:"\e084"}.fa-firstdraft:before{content:"\f3a1"}.fa-square-youtube:before,.fa-youtube-square:before{content:"\f431"}.fa-wikipedia-w:before{content:"\f266"}.fa-rendact:before,.fa-wpressr:before{content:"\f3e4"}.fa-angellist:before{content:"\f209"}.fa-galactic-republic:before{content:"\f50c"}.fa-nfc-directional:before{content:"\e530"}.fa-skype:before{content:"\f17e"}.fa-joget:before{content:"\f3b7"}.fa-fedora:before{content:"\f798"}.fa-stripe-s:before{content:"\f42a"}.fa-meta:before{content:"\e49b"}.fa-laravel:before{content:"\f3bd"}.fa-hotjar:before{content:"\f3b1"}.fa-bluetooth-b:before{content:"\f294"}.fa-sticker-mule:before{content:"\f3f7"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-hips:before{content:"\f452"}.fa-behance:before{content:"\f1b4"}.fa-reddit:before{content:"\f1a1"}.fa-discord:before{content:"\f392"}.fa-chrome:before{content:"\f268"}.fa-app-store-ios:before{content:"\f370"}.fa-cc-discover:before{content:"\f1f2"}.fa-wpbeginner:before{content:"\f297"}.fa-confluence:before{content:"\f78d"}.fa-mdb:before{content:"\f8ca"}.fa-dochub:before{content:"\f394"}.fa-accessible-icon:before{content:"\f368"}.fa-ebay:before{content:"\f4f4"}.fa-amazon:before{content:"\f270"}.fa-unsplash:before{content:"\e07c"}.fa-yarn:before{content:"\f7e3"}.fa-square-steam:before,.fa-steam-square:before{content:"\f1b7"}.fa-500px:before{content:"\f26e"}.fa-square-vimeo:before,.fa-vimeo-square:before{content:"\f194"}.fa-asymmetrik:before{content:"\f372"}.fa-font-awesome-flag:before,.fa-font-awesome-logo-full:before,.fa-font-awesome:before{content:"\f2b4"}.fa-gratipay:before{content:"\f184"}.fa-apple:before{content:"\f179"}.fa-hive:before{content:"\e07f"}.fa-gitkraken:before{content:"\f3a6"}.fa-keybase:before{content:"\f4f5"}.fa-apple-pay:before{content:"\f415"}.fa-padlet:before{content:"\e4a0"}.fa-amazon-pay:before{content:"\f42c"}.fa-github-square:before,.fa-square-github:before{content:"\f092"}.fa-stumbleupon:before{content:"\f1a4"}.fa-fedex:before{content:"\f797"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-shopify:before{content:"\e057"}.fa-neos:before{content:"\f612"}.fa-hackerrank:before{content:"\f5f7"}.fa-researchgate:before{content:"\f4f8"}.fa-swift:before{content:"\f8e1"}.fa-angular:before{content:"\f420"}.fa-speakap:before{content:"\f3f3"}.fa-angrycreative:before{content:"\f36e"}.fa-y-combinator:before{content:"\f23b"}.fa-empire:before{content:"\f1d1"}.fa-envira:before{content:"\f299"}.fa-gitlab-square:before,.fa-square-gitlab:before{content:"\e5ae"}.fa-studiovinari:before{content:"\f3f8"}.fa-pied-piper:before{content:"\f2ae"}.fa-wordpress:before{content:"\f19a"}.fa-product-hunt:before{content:"\f288"}.fa-firefox:before{content:"\f269"}.fa-linode:before{content:"\f2b8"}.fa-goodreads:before{content:"\f3a8"}.fa-odnoklassniki-square:before,.fa-square-odnoklassniki:before{content:"\f264"}.fa-jsfiddle:before{content:"\f1cc"}.fa-sith:before{content:"\f512"}.fa-themeisle:before{content:"\f2b2"}.fa-page4:before{content:"\f3d7"}.fa-hashnode:before{content:"\e499"}.fa-react:before{content:"\f41b"}.fa-cc-paypal:before{content:"\f1f4"}.fa-squarespace:before{content:"\f5be"}.fa-cc-stripe:before{content:"\f1f5"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-bitcoin:before{content:"\f379"}.fa-keycdn:before{content:"\f3ba"}.fa-opera:before{content:"\f26a"}.fa-itch-io:before{content:"\f83a"}.fa-umbraco:before{content:"\f8e8"}.fa-galactic-senate:before{content:"\f50d"}.fa-ubuntu:before{content:"\f7df"}.fa-draft2digital:before{content:"\f396"}.fa-stripe:before{content:"\f429"}.fa-houzz:before{content:"\f27c"}.fa-gg:before{content:"\f260"}.fa-dhl:before{content:"\f790"}.fa-pinterest-square:before,.fa-square-pinterest:before{content:"\f0d3"}.fa-xing:before{content:"\f168"}.fa-blackberry:before{content:"\f37b"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-playstation:before{content:"\f3df"}.fa-quinscape:before{content:"\f459"}.fa-less:before{content:"\f41d"}.fa-blogger-b:before{content:"\f37d"}.fa-opencart:before{content:"\f23d"}.fa-vine:before{content:"\f1ca"}.fa-paypal:before{content:"\f1ed"}.fa-gitlab:before{content:"\f296"}.fa-typo3:before{content:"\f42b"}.fa-reddit-alien:before{content:"\f281"}.fa-yahoo:before{content:"\f19e"}.fa-dailymotion:before{content:"\e052"}.fa-affiliatetheme:before{content:"\f36b"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-bootstrap:before{content:"\f836"}.fa-odnoklassniki:before{content:"\f263"}.fa-nfc-symbol:before{content:"\e531"}.fa-ethereum:before{content:"\f42e"}.fa-speaker-deck:before{content:"\f83c"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-patreon:before{content:"\f3d9"}.fa-avianex:before{content:"\f374"}.fa-ello:before{content:"\f5f1"}.fa-gofore:before{content:"\f3a7"}.fa-bimobject:before{content:"\f378"}.fa-facebook-f:before{content:"\f39e"}.fa-google-plus-square:before,.fa-square-google-plus:before{content:"\f0d4"}.fa-mandalorian:before{content:"\f50f"}.fa-first-order-alt:before{content:"\f50a"}.fa-osi:before{content:"\f41a"}.fa-google-wallet:before{content:"\f1ee"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-periscope:before{content:"\f3da"}.fa-fulcrum:before{content:"\f50b"}.fa-cloudscale:before{content:"\f383"}.fa-forumbee:before{content:"\f211"}.fa-mizuni:before{content:"\f3cc"}.fa-schlix:before{content:"\f3ea"}.fa-square-xing:before,.fa-xing-square:before{content:"\f169"}.fa-bandcamp:before{content:"\f2d5"}.fa-wpforms:before{content:"\f298"}.fa-cloudversify:before{content:"\f385"}.fa-usps:before{content:"\f7e1"}.fa-megaport:before{content:"\f5a3"}.fa-magento:before{content:"\f3c4"}.fa-spotify:before{content:"\f1bc"}.fa-optin-monster:before{content:"\f23c"}.fa-fly:before{content:"\f417"}.fa-aviato:before{content:"\f421"}.fa-itunes:before{content:"\f3b4"}.fa-cuttlefish:before{content:"\f38c"}.fa-blogger:before{content:"\f37c"}.fa-flickr:before{content:"\f16e"}.fa-viber:before{content:"\f409"}.fa-soundcloud:before{content:"\f1be"}.fa-digg:before{content:"\f1a6"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-symfony:before{content:"\f83d"}.fa-maxcdn:before{content:"\f136"}.fa-etsy:before{content:"\f2d7"}.fa-facebook-messenger:before{content:"\f39f"}.fa-audible:before{content:"\f373"}.fa-think-peaks:before{content:"\f731"}.fa-bilibili:before{content:"\e3d9"}.fa-erlang:before{content:"\f39d"}.fa-cotton-bureau:before{content:"\f89e"}.fa-dashcube:before{content:"\f210"}.fa-42-group:before,.fa-innosoft:before{content:"\e080"}.fa-stack-exchange:before{content:"\f18d"}.fa-elementor:before{content:"\f430"}.fa-pied-piper-square:before,.fa-square-pied-piper:before{content:"\e01e"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-palfed:before{content:"\f3d8"}.fa-superpowers:before{content:"\f2dd"}.fa-resolving:before{content:"\f3e7"}.fa-xbox:before{content:"\f412"}.fa-searchengin:before{content:"\f3eb"}.fa-tiktok:before{content:"\e07b"}.fa-facebook-square:before,.fa-square-facebook:before{content:"\f082"}.fa-renren:before{content:"\f18b"}.fa-linux:before{content:"\f17c"}.fa-glide:before{content:"\f2a5"}.fa-linkedin:before{content:"\f08c"}.fa-hubspot:before{content:"\f3b2"}.fa-deploydog:before{content:"\f38e"}.fa-twitch:before{content:"\f1e8"}.fa-ravelry:before{content:"\f2d9"}.fa-mixer:before{content:"\e056"}.fa-lastfm-square:before,.fa-square-lastfm:before{content:"\f203"}.fa-vimeo:before{content:"\f40a"}.fa-mendeley:before{content:"\f7b3"}.fa-uniregistry:before{content:"\f404"}.fa-figma:before{content:"\f799"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-dropbox:before{content:"\f16b"}.fa-instagram:before{content:"\f16d"}.fa-cmplid:before{content:"\e360"}.fa-facebook:before{content:"\f09a"}.fa-gripfire:before{content:"\f3ac"}.fa-jedi-order:before{content:"\f50e"}.fa-uikit:before{content:"\f403"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-phabricator:before{content:"\f3db"}.fa-ussunnah:before{content:"\f407"}.fa-earlybirds:before{content:"\f39a"}.fa-trade-federation:before{content:"\f513"}.fa-autoprefixer:before{content:"\f41c"}.fa-whatsapp:before{content:"\f232"}.fa-slideshare:before{content:"\f1e7"}.fa-google-play:before{content:"\f3ab"}.fa-viadeo:before{content:"\f2a9"}.fa-line:before{content:"\f3c0"}.fa-google-drive:before{content:"\f3aa"}.fa-servicestack:before{content:"\f3ec"}.fa-simplybuilt:before{content:"\f215"}.fa-bitbucket:before{content:"\f171"}.fa-imdb:before{content:"\f2d8"}.fa-deezer:before{content:"\e077"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-jira:before{content:"\f7b1"}.fa-docker:before{content:"\f395"}.fa-screenpal:before{content:"\e570"}.fa-bluetooth:before{content:"\f293"}.fa-gitter:before{content:"\f426"}.fa-d-and-d:before{content:"\f38d"}.fa-microblog:before{content:"\e01a"}.fa-cc-diners-club:before{content:"\f24c"}.fa-gg-circle:before{content:"\f261"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-yandex:before{content:"\f413"}.fa-readme:before{content:"\f4d5"}.fa-html5:before{content:"\f13b"}.fa-sellsy:before{content:"\f213"}.fa-sass:before{content:"\f41e"}.fa-wirsindhandwerk:before,.fa-wsh:before{content:"\e2d0"}.fa-buromobelexperte:before{content:"\f37f"}.fa-salesforce:before{content:"\f83b"}.fa-octopus-deploy:before{content:"\e082"}.fa-medapps:before{content:"\f3c6"}.fa-ns8:before{content:"\f3d5"}.fa-pinterest-p:before{content:"\f231"}.fa-apper:before{content:"\f371"}.fa-fort-awesome:before{content:"\f286"}.fa-waze:before{content:"\f83f"}.fa-cc-jcb:before{content:"\f24b"}.fa-snapchat-ghost:before,.fa-snapchat:before{content:"\f2ab"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-rust:before{content:"\e07a"}.fa-wix:before{content:"\f5cf"}.fa-behance-square:before,.fa-square-behance:before{content:"\f1b5"}.fa-supple:before{content:"\f3f9"}.fa-rebel:before{content:"\f1d0"}.fa-css3:before{content:"\f13c"}.fa-staylinked:before{content:"\f3f5"}.fa-kaggle:before{content:"\f5fa"}.fa-space-awesome:before{content:"\e5ac"}.fa-deviantart:before{content:"\f1bd"}.fa-cpanel:before{content:"\f388"}.fa-goodreads-g:before{content:"\f3a9"}.fa-git-square:before,.fa-square-git:before{content:"\f1d2"}.fa-square-tumblr:before,.fa-tumblr-square:before{content:"\f174"}.fa-trello:before{content:"\f181"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-get-pocket:before{content:"\f265"}.fa-perbyte:before{content:"\e083"}.fa-grunt:before{content:"\f3ad"}.fa-weebly:before{content:"\f5cc"}.fa-connectdevelop:before{content:"\f20e"}.fa-leanpub:before{content:"\f212"}.fa-black-tie:before{content:"\f27e"}.fa-themeco:before{content:"\f5c6"}.fa-python:before{content:"\f3e2"}.fa-android:before{content:"\f17b"}.fa-bots:before{content:"\e340"}.fa-free-code-camp:before{content:"\f2c5"}.fa-hornbill:before{content:"\f592"}.fa-js:before{content:"\f3b8"}.fa-ideal:before{content:"\e013"}.fa-git:before{content:"\f1d3"}.fa-dev:before{content:"\f6cc"}.fa-sketch:before{content:"\f7c6"}.fa-yandex-international:before{content:"\f414"}.fa-cc-amex:before{content:"\f1f3"}.fa-uber:before{content:"\f402"}.fa-github:before{content:"\f09b"}.fa-php:before{content:"\f457"}.fa-alipay:before{content:"\f642"}.fa-youtube:before{content:"\f167"}.fa-skyatlas:before{content:"\f216"}.fa-firefox-browser:before{content:"\e007"}.fa-replyd:before{content:"\f3e6"}.fa-suse:before{content:"\f7d6"}.fa-jenkins:before{content:"\f3b6"}.fa-twitter:before{content:"\f099"}.fa-rockrms:before{content:"\f3e9"}.fa-pinterest:before{content:"\f0d2"}.fa-buffer:before{content:"\f837"}.fa-npm:before{content:"\f3d4"}.fa-yammer:before{content:"\f840"}.fa-btc:before{content:"\f15a"}.fa-dribbble:before{content:"\f17d"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-internet-explorer:before{content:"\f26b"}.fa-stubber:before{content:"\e5c7"}.fa-telegram-plane:before,.fa-telegram:before{content:"\f2c6"}.fa-old-republic:before{content:"\f510"}.fa-odysee:before{content:"\e5c6"}.fa-square-whatsapp:before,.fa-whatsapp-square:before{content:"\f40c"}.fa-node-js:before{content:"\f3d3"}.fa-edge-legacy:before{content:"\e078"}.fa-slack-hash:before,.fa-slack:before{content:"\f198"}.fa-medrt:before{content:"\f3c8"}.fa-usb:before{content:"\f287"}.fa-tumblr:before{content:"\f173"}.fa-vaadin:before{content:"\f408"}.fa-quora:before{content:"\f2c4"}.fa-reacteurope:before{content:"\f75d"}.fa-medium-m:before,.fa-medium:before{content:"\f23a"}.fa-amilia:before{content:"\f36d"}.fa-mixcloud:before{content:"\f289"}.fa-flipboard:before{content:"\f44d"}.fa-viacoin:before{content:"\f237"}.fa-critical-role:before{content:"\f6c9"}.fa-sitrox:before{content:"\e44a"}.fa-discourse:before{content:"\f393"}.fa-joomla:before{content:"\f1aa"}.fa-mastodon:before{content:"\f4f6"}.fa-airbnb:before{content:"\f834"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-buy-n-large:before{content:"\f8a6"}.fa-gulp:before{content:"\f3ae"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-strava:before{content:"\f428"}.fa-ember:before{content:"\f423"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-teamspeak:before{content:"\f4f9"}.fa-pushed:before{content:"\f3e1"}.fa-wordpress-simple:before{content:"\f411"}.fa-nutritionix:before{content:"\f3d6"}.fa-wodu:before{content:"\e088"}.fa-google-pay:before{content:"\e079"}.fa-intercom:before{content:"\f7af"}.fa-zhihu:before{content:"\f63f"}.fa-korvue:before{content:"\f42f"}.fa-pix:before{content:"\e43a"}.fa-steam-symbol:before{content:"\f3f6"}:host,:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}@font-face{font-family:"Font Awesome 5 Brands";font-display:block;font-weight:400;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:900;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"Font Awesome 5 Free";font-display:block;font-weight:400;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype");unicode-range:u+f003,u+f006,u+f014,u+f016-f017,u+f01a-f01b,u+f01d,u+f022,u+f03e,u+f044,u+f046,u+f05c-f05d,u+f06e,u+f070,u+f087-f088,u+f08a,u+f094,u+f096-f097,u+f09d,u+f0a0,u+f0a2,u+f0a4-f0a7,u+f0c5,u+f0c7,u+f0e5-f0e6,u+f0eb,u+f0f6-f0f8,u+f10c,u+f114-f115,u+f118-f11a,u+f11c-f11d,u+f133,u+f147,u+f14e,u+f150-f152,u+f185-f186,u+f18e,u+f190-f192,u+f196,u+f1c1-f1c9,u+f1d9,u+f1db,u+f1e3,u+f1ea,u+f1f7,u+f1f9,u+f20a,u+f247-f248,u+f24a,u+f24d,u+f255-f25b,u+f25d,u+f271-f274,u+f278,u+f27b,u+f28c,u+f28e,u+f29c,u+f2b5,u+f2b7,u+f2ba,u+f2bc,u+f2be,u+f2c0-f2c1,u+f2c3,u+f2d0,u+f2d2,u+f2d4,u+f2dc}@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");unicode-range:u+f041,u+f047,u+f065-f066,u+f07d-f07e,u+f080,u+f08b,u+f08e,u+f090,u+f09a,u+f0ac,u+f0ae,u+f0b2,u+f0d0,u+f0d6,u+f0e4,u+f0ec,u+f10a-f10b,u+f123,u+f13e,u+f148-f149,u+f14c,u+f156,u+f15e,u+f160-f161,u+f163,u+f175-f178,u+f195,u+f1f8,u+f219,u+f27a} \ No newline at end of file diff --git a/markbind/fontawesome/webfonts/fa-brands-400.eot b/markbind/fontawesome/webfonts/fa-brands-400.eot deleted file mode 100644 index cba6c6c..0000000 Binary files a/markbind/fontawesome/webfonts/fa-brands-400.eot and /dev/null differ diff --git a/markbind/fontawesome/webfonts/fa-brands-400.svg b/markbind/fontawesome/webfonts/fa-brands-400.svg deleted file mode 100644 index b9881a4..0000000 --- a/markbind/fontawesome/webfonts/fa-brands-400.svg +++ /dev/null @@ -1,3717 +0,0 @@ - - - - -Created by FontForge 20201107 at Wed Aug 4 12:25:29 2021 - By Robert Madole -Copyright (c) Font Awesome - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/markbind/fontawesome/webfonts/fa-brands-400.ttf b/markbind/fontawesome/webfonts/fa-brands-400.ttf index 8d75ded..774d51a 100644 Binary files a/markbind/fontawesome/webfonts/fa-brands-400.ttf and b/markbind/fontawesome/webfonts/fa-brands-400.ttf differ diff --git a/markbind/fontawesome/webfonts/fa-brands-400.woff b/markbind/fontawesome/webfonts/fa-brands-400.woff deleted file mode 100644 index 3375bef..0000000 Binary files a/markbind/fontawesome/webfonts/fa-brands-400.woff and /dev/null differ diff --git a/markbind/fontawesome/webfonts/fa-brands-400.woff2 b/markbind/fontawesome/webfonts/fa-brands-400.woff2 index 402f81c..71e3185 100644 Binary files a/markbind/fontawesome/webfonts/fa-brands-400.woff2 and b/markbind/fontawesome/webfonts/fa-brands-400.woff2 differ diff --git a/markbind/fontawesome/webfonts/fa-regular-400.eot b/markbind/fontawesome/webfonts/fa-regular-400.eot deleted file mode 100644 index a4e5989..0000000 Binary files a/markbind/fontawesome/webfonts/fa-regular-400.eot and /dev/null differ diff --git a/markbind/fontawesome/webfonts/fa-regular-400.svg b/markbind/fontawesome/webfonts/fa-regular-400.svg deleted file mode 100644 index 463af27..0000000 --- a/markbind/fontawesome/webfonts/fa-regular-400.svg +++ /dev/null @@ -1,801 +0,0 @@ - - - - -Created by FontForge 20201107 at Wed Aug 4 12:25:29 2021 - By Robert Madole -Copyright (c) Font Awesome - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/markbind/fontawesome/webfonts/fa-regular-400.ttf b/markbind/fontawesome/webfonts/fa-regular-400.ttf index 7157aaf..8a9d634 100644 Binary files a/markbind/fontawesome/webfonts/fa-regular-400.ttf and b/markbind/fontawesome/webfonts/fa-regular-400.ttf differ diff --git a/markbind/fontawesome/webfonts/fa-regular-400.woff b/markbind/fontawesome/webfonts/fa-regular-400.woff deleted file mode 100644 index ad077c6..0000000 Binary files a/markbind/fontawesome/webfonts/fa-regular-400.woff and /dev/null differ diff --git a/markbind/fontawesome/webfonts/fa-regular-400.woff2 b/markbind/fontawesome/webfonts/fa-regular-400.woff2 index 5632894..7f02168 100644 Binary files a/markbind/fontawesome/webfonts/fa-regular-400.woff2 and b/markbind/fontawesome/webfonts/fa-regular-400.woff2 differ diff --git a/markbind/fontawesome/webfonts/fa-solid-900.eot b/markbind/fontawesome/webfonts/fa-solid-900.eot deleted file mode 100644 index e994171..0000000 Binary files a/markbind/fontawesome/webfonts/fa-solid-900.eot and /dev/null differ diff --git a/markbind/fontawesome/webfonts/fa-solid-900.svg b/markbind/fontawesome/webfonts/fa-solid-900.svg deleted file mode 100644 index 00296e9..0000000 --- a/markbind/fontawesome/webfonts/fa-solid-900.svg +++ /dev/null @@ -1,5034 +0,0 @@ - - - - -Created by FontForge 20201107 at Wed Aug 4 12:25:29 2021 - By Robert Madole -Copyright (c) Font Awesome - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/markbind/fontawesome/webfonts/fa-solid-900.ttf b/markbind/fontawesome/webfonts/fa-solid-900.ttf index 25abf38..993dbe1 100644 Binary files a/markbind/fontawesome/webfonts/fa-solid-900.ttf and b/markbind/fontawesome/webfonts/fa-solid-900.ttf differ diff --git a/markbind/fontawesome/webfonts/fa-solid-900.woff b/markbind/fontawesome/webfonts/fa-solid-900.woff deleted file mode 100644 index 23ee663..0000000 Binary files a/markbind/fontawesome/webfonts/fa-solid-900.woff and /dev/null differ diff --git a/markbind/fontawesome/webfonts/fa-solid-900.woff2 b/markbind/fontawesome/webfonts/fa-solid-900.woff2 index 2217164..5c16cd3 100644 Binary files a/markbind/fontawesome/webfonts/fa-solid-900.woff2 and b/markbind/fontawesome/webfonts/fa-solid-900.woff2 differ diff --git a/markbind/fontawesome/webfonts/fa-v4compatibility.ttf b/markbind/fontawesome/webfonts/fa-v4compatibility.ttf new file mode 100644 index 0000000..ab6ae22 Binary files /dev/null and b/markbind/fontawesome/webfonts/fa-v4compatibility.ttf differ diff --git a/markbind/fontawesome/webfonts/fa-v4compatibility.woff2 b/markbind/fontawesome/webfonts/fa-v4compatibility.woff2 new file mode 100644 index 0000000..9027e38 Binary files /dev/null and b/markbind/fontawesome/webfonts/fa-v4compatibility.woff2 differ diff --git a/markbind/js/jquery.min.js b/markbind/js/jquery.min.js deleted file mode 100644 index b061403..0000000 --- a/markbind/js/jquery.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */ -!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.1",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||j,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,j=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function qe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function Le(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function He(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Oe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):("number"==typeof f.top&&(f.top+="px"),"number"==typeof f.left&&(f.left+="px"),c.css(f))}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=$e(y.pixelPosition,function(e,t){if(t)return t=Be(e,n),Me.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0(()=>{var e={330:()=>{function t(){document.querySelectorAll(".".concat("page-nav-clone")).forEach((function(t){t.remove()}))}window.addEventListener("beforeprint",(function(){var e=document.querySelector("#".concat("mb-page-nav")),n=document.querySelectorAll(".".concat("page-nav-print"));e&&n.length>=1&&(t(),n.forEach((function(t){t.appendChild(function(t){var e=t.cloneNode(!0);return e.removeAttribute("id"),e.querySelectorAll("a.active").forEach((function(t){t.classList.remove("active")})),e.classList.add("page-nav-clone"),e}(e))})))})),window.addEventListener("afterprint",(function(){t()}))},561:t=>{t.exports={bind:function(t){t.dataset.isShown="true",t.style.position="relative";var e=t.getAttribute("alt")||"Expand Content",n=jQuery('
');jQuery(t).contents().appendTo(n),jQuery(t).empty(),jQuery(t).append(n),jQuery(t).attr("class","".concat(t.className," closeable-wrapper"));var i=jQuery('');jQuery(t).append(i);var o=jQuery('"));jQuery(t).append(o),i.click((function(){t.dataset.isShown="false",o.show(),i.hide(),n.get()[0].style.display="none"})),o.click((function(){t.dataset.isShown="true",o.hide(),n.get()[0].style.display=""})),jQuery(t).on("mouseover",(function(){"false"!==t.dataset.isShown&&i.show()})),jQuery(t).on("mouseout",(function(){"false"!==t.dataset.isShown&&i.hide()}))}}},383:(t,e,n)=>{"use strict";var i,o=(i=n(740))&&"object"==typeof i&&"default"in i?i.default:i;function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e1&&void 0!==arguments[1]&&arguments[1],n=t.to,i=t.from;if(n&&(i||!1!==e)&&this.transports[n])if(e)this.transports[n]=[];else{var o=this.$_getTransportIndex(t);if(o>=0){var r=this.transports[n].slice(0);r.splice(o,1),this.transports[n]=r}}},registerTarget:function(t,e,n){a&&(this.trackInstances&&!n&&this.targets[t]&&console.warn("[portal-vue]: Target ".concat(t," already exists")),this.$set(this.targets,t,Object.freeze([e])))},unregisterTarget:function(t){this.$delete(this.targets,t)},registerSource:function(t,e,n){a&&(this.trackInstances&&!n&&this.sources[t]&&console.warn("[portal-vue]: source ".concat(t," already exists")),this.$set(this.sources,t,Object.freeze([e])))},unregisterSource:function(t){this.$delete(this.sources,t)},hasTarget:function(t){return!(!this.targets[t]||!this.targets[t][0])},hasSource:function(t){return!(!this.sources[t]||!this.sources[t][0])},hasContentFor:function(t){return!!this.transports[t]&&!!this.transports[t].length},$_getTransportIndex:function(t){var e=t.to,n=t.from;for(var i in this.transports[e])if(this.transports[e][i].from===n)return+i;return-1}}}))(c),p=1,f=o.extend({name:"portal",props:{disabled:{type:Boolean},name:{type:String,default:function(){return String(p++)}},order:{type:Number,default:0},slim:{type:Boolean},slotProps:{type:Object,default:function(){return{}}},tag:{type:String,default:"DIV"},to:{type:String,default:function(){return String(Math.round(1e7*Math.random()))}}},created:function(){var t=this;this.$nextTick((function(){h.registerSource(t.name,t)}))},mounted:function(){this.disabled||this.sendUpdate()},updated:function(){this.disabled?this.clear():this.sendUpdate()},beforeDestroy:function(){h.unregisterSource(this.name),this.clear()},watch:{to:function(t,e){e&&e!==t&&this.clear(e),this.sendUpdate()}},methods:{clear:function(t){var e={from:this.name,to:t||this.to};h.close(e)},normalizeSlots:function(){return this.$scopedSlots.default?[this.$scopedSlots.default]:this.$slots.default},normalizeOwnChildren:function(t){return"function"==typeof t?t(this.slotProps):t},sendUpdate:function(){var t=this.normalizeSlots();if(t){var e={from:this.name,to:this.to,passengers:s(t),order:this.order};h.open(e)}else this.clear()}},render:function(t){var e=this.$slots.default||this.$scopedSlots.default||[],n=this.tag;return e&&this.disabled?e.length<=1&&this.slim?this.normalizeOwnChildren(e)[0]:t(n,[this.normalizeOwnChildren(e)]):this.slim?t():t(n,{class:{"v-portal":!0},style:{display:"none"},key:"v-portal-placeholder"})}}),v=o.extend({name:"portalTarget",props:{multiple:{type:Boolean,default:!1},name:{type:String,required:!0},slim:{type:Boolean,default:!1},slotProps:{type:Object,default:function(){return{}}},tag:{type:String,default:"div"},transition:{type:[String,Object,Function]}},data:function(){return{transports:h.transports,firstRender:!0}},created:function(){var t=this;this.$nextTick((function(){h.registerTarget(t.name,t)}))},watch:{ownTransports:function(){this.$emit("change",this.children().length>0)},name:function(t,e){h.unregisterTarget(e),h.registerTarget(t,this)}},mounted:function(){var t=this;this.transition&&this.$nextTick((function(){t.firstRender=!1}))},beforeDestroy:function(){h.unregisterTarget(this.name)},computed:{ownTransports:function(){var t=this.transports[this.name]||[];return this.multiple?t:0===t.length?[]:[t[t.length-1]]},passengers:function(){return function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t.reduce((function(t,n){var i=n.passengers[0],o="function"==typeof i?i(e):n.passengers;return t.concat(o)}),[])}(this.ownTransports,this.slotProps)}},methods:{children:function(){return 0!==this.passengers.length?this.passengers:this.$scopedSlots.default?this.$scopedSlots.default(this.slotProps):this.$slots.default||[]},noWrapper:function(){var t=this.slim&&!this.transition;return t&&this.children().length>1&&console.warn("[portal-vue]: PortalTarget with `slim` option received more than one child element."),t}},render:function(t){var e=this.noWrapper(),n=this.children(),i=this.transition||this.tag;return e?n[0]:this.slim&&!i?t():t(i,{props:{tag:this.transition&&this.tag?this.tag:void 0},class:{"vue-portal-target":!0}},n)}}),m=0,g=["disabled","name","order","slim","slotProps","tag","to"],y=["multiple","transition"],w=o.extend({name:"MountingPortal",inheritAttrs:!1,props:{append:{type:[Boolean,String]},bail:{type:Boolean},mountTo:{type:String,required:!0},disabled:{type:Boolean},name:{type:String,default:function(){return"mounted_"+String(m++)}},order:{type:Number,default:0},slim:{type:Boolean},slotProps:{type:Object,default:function(){return{}}},tag:{type:String,default:"DIV"},to:{type:String,default:function(){return String(Math.round(1e7*Math.random()))}},multiple:{type:Boolean,default:!1},targetSlim:{type:Boolean},targetSlotProps:{type:Object,default:function(){return{}}},targetTag:{type:String,default:"div"},transition:{type:[String,Object,Function]}},created:function(){if("undefined"!=typeof document){var t=document.querySelector(this.mountTo);if(t){var e=this.$props;if(h.targets[e.name])e.bail?console.warn("[portal-vue]: Target ".concat(e.name," is already mounted.\n Aborting because 'bail: true' is set")):this.portalTarget=h.targets[e.name];else{var n=e.append;if(n){var i="string"==typeof n?n:"DIV",o=document.createElement(i);t.appendChild(o),t=o}var r=l(this.$props,y);r.slim=this.targetSlim,r.tag=this.targetTag,r.slotProps=this.targetSlotProps,r.name=this.to,this.portalTarget=new v({el:t,parent:this.$parent||this,propsData:r})}}else console.error("[portal-vue]: Mount Point '".concat(this.mountTo,"' not found in document"))}},beforeDestroy:function(){var t=this.portalTarget;if(this.append){var e=t.$el;e.parentNode.removeChild(e)}t.$destroy()},render:function(t){if(!this.portalTarget)return console.warn("[portal-vue] Target wasn't mounted"),t();if(!this.$scopedSlots.manual){var e=l(this.$props,g);return t(f,{props:e,attrs:this.$attrs,on:this.$listeners,scopedSlots:this.$scopedSlots},this.$slots.default)}var n=this.$scopedSlots.manual({to:this.to});return Array.isArray(n)&&(n=n[0]),n||t()}});e.h_=f,e.YC=v},740:e=>{"use strict";e.exports=t}},n={};function i(t){var o=n[t];if(void 0!==o)return o.exports;var r=n[t]={exports:{}};return e[t](r,r.exports,i),r.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var o={};return(()=>{"use strict";function t(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function e(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);nlr});function d(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function h(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function p(t,e){void 0===e&&(e={});const{x:n,y:i,platform:o,rects:r,elements:s,strategy:a}=t,{boundary:l="clippingParents",rootBoundary:c="viewport",elementContext:u="floating",altBoundary:p=!1,padding:f=0}=e,v=d(f),m=s[p?"floating"===u?"reference":"floating":u],g=await o.getClippingClientRect({element:await o.isElement(m)?m:m.contextElement||await o.getDocumentElement({element:s.floating}),boundary:l,rootBoundary:c}),y=h(await o.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===u?{...r.floating,x:n,y:i}:r.reference,offsetParent:await o.getOffsetParent({element:s.floating}),strategy:a}));return{top:g.top-y.top+v.top,bottom:y.bottom-g.bottom+v.bottom,left:g.left-y.left+v.left,right:y.right-g.right+v.right}}const f=Math.min,v=Math.max;function m(t,e,n){return v(t,f(e,n))}const g={left:"right",right:"left",bottom:"top",top:"bottom"};function y(t){return t.replace(/left|right|bottom|top/g,t=>g[t])}function w(t,e){const n="start"===a(t),i=l(t),o=c(i);let r="x"===i?n?"right":"left":n?"bottom":"top";return e.reference[o]>e.floating[o]&&(r=y(r)),{main:r,cross:y(r)}}const b={start:"end",end:"start"};function _(t){return t.replace(/start|end/g,t=>b[t])}const S=["top","right","bottom","left"],x=S.reduce((t,e)=>t.concat(e,e+"-start",e+"-end"),[]);const C=function(t){return void 0===t&&(t={}),{name:"autoPlacement",options:t,async fn(e){var n,i,o,r,l,c;const{x:u,y:d,rects:h,middlewareData:f,placement:v}=e,{alignment:m=null,allowedPlacements:g=x,autoAlignment:y=!0,...b}=t;if(null!=(n=f.autoPlacement)&&n.skip)return{};const S=function(t,e,n){return(t?[...n.filter(e=>a(e)===t),...n.filter(e=>a(e)!==t)]:n.filter(t=>s(t)===t)).filter(n=>!t||(a(n)===t||!!e&&_(n)!==n))}(m,y,g),C=await p(e,b),$=null!=(i=null==(o=f.autoPlacement)?void 0:o.index)?i:0,k=S[$],{main:T,cross:E}=w(k,h);if(v!==k)return{x:u,y:d,reset:{placement:S[0]}};const O=[C[s(k)],C[T],C[E]],P=[...null!=(r=null==(l=f.autoPlacement)?void 0:l.overflows)?r:[],{placement:k,overflows:O}],B=S[$+1];if(B)return{data:{index:$+1,overflows:P},reset:{placement:B}};const N=P.slice().sort((t,e)=>t.overflows[0]-e.overflows[0]),A=null==(c=N.find(t=>{let{overflows:e}=t;return e.every(t=>t<=0)}))?void 0:c.placement;return{data:{skip:!0},reset:{placement:null!=A?A:N[0].placement}}}}};const $=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,i;const{placement:o,middlewareData:r,rects:a,initialPlacement:l}=e;if(null!=(n=r.flip)&&n.skip)return{};const{mainAxis:c=!0,crossAxis:u=!0,fallbackPlacements:d,fallbackStrategy:h="bestFit",flipAlignment:f=!0,...v}=t,m=s(o),g=[l,...d||(m===l||!f?[y(l)]:function(t){const e=y(t);return[_(t),e,_(e)]}(l))],b=await p(e,v),S=[];let x=(null==(i=r.flip)?void 0:i.overflows)||[];if(c&&S.push(b[m]),u){const{main:t,cross:e}=w(o,a);S.push(b[t],b[e])}if(x=[...x,{placement:o,overflows:S}],!S.every(t=>t<=0)){var C,$;const t=(null!=(C=null==($=r.flip)?void 0:$.index)?C:0)+1,e=g[t];if(e)return{data:{index:t,overflows:x},reset:{placement:e}};let n="bottom";switch(h){case"bestFit":{var k;const t=null==(k=x.slice().sort((t,e)=>t.overflows.filter(t=>t>0).reduce((t,e)=>t+e,0)-e.overflows.filter(t=>t>0).reduce((t,e)=>t+e,0))[0])?void 0:k.placement;t&&(n=t);break}case"initialPlacement":n=l}return{data:{skip:!0},reset:{placement:n}}}return{}}}};const k=function(t){return void 0===t&&(t=0),{name:"offset",options:t,fn(e){const{x:n,y:i,placement:o,rects:r}=e,a=function(t){let{placement:e,rects:n,value:i}=t;const o=s(e),r=["left","top"].includes(o)?-1:1,a="function"==typeof i?i({...n,placement:e}):i,{mainAxis:c,crossAxis:u}="number"==typeof a?{mainAxis:a,crossAxis:0}:{mainAxis:0,crossAxis:0,...a};return"x"===l(o)?{x:u,y:c*r}:{x:c*r,y:u}}({placement:o,rects:r,value:t});return{x:n+a.x,y:i+a.y,data:a}}}};function T(t){return"x"===t?"y":"x"}function E(t){return"[object Window]"===(null==t?void 0:t.toString())}function O(t){if(null==t)return window;if(!E(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function P(t){return O(t).getComputedStyle(t)}function B(t){return E(t)?"":t?(t.nodeName||"").toLowerCase():""}function N(t){return t instanceof O(t).HTMLElement}function A(t){return t instanceof O(t).Element}function L(t){return t instanceof O(t).ShadowRoot||t instanceof ShadowRoot}function z(t){const{overflow:e,overflowX:n,overflowY:i}=P(t);return/auto|scroll|overlay|hidden/.test(e+i+n)}function M(t){return["table","td","th"].includes(B(t))}function H(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=P(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const D=Math.min,R=Math.max,j=Math.round;function I(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let i=1,o=1;return e&&N(t)&&(i=t.offsetWidth>0&&j(n.width)/t.offsetWidth||1,o=t.offsetHeight>0&&j(n.height)/t.offsetHeight||1),{width:n.width/i,height:n.height/o,top:n.top/o,right:n.right/i,bottom:n.bottom/o,left:n.left/i,x:n.left/i,y:n.top/o}}function q(t){return(e=t,(e instanceof O(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function W(t){return E(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function F(t){return I(q(t)).left+W(t).scrollLeft}function V(t,e,n){const i=N(e),o=q(e),r=I(t,i&&function(t){const e=I(t);return j(e.width)!==t.offsetWidth||j(e.height)!==t.offsetHeight}(e));let s={scrollLeft:0,scrollTop:0};const a={x:0,y:0};if(i||!i&&"fixed"!==n)if(("body"!==B(e)||z(o))&&(s=W(e)),N(e)){const t=I(e,!0);a.x=t.x+e.clientLeft,a.y=t.y+e.clientTop}else o&&(a.x=F(o));return{x:r.left+s.scrollLeft-a.x,y:r.top+s.scrollTop-a.y,width:r.width,height:r.height}}function Q(t){return"html"===B(t)?t:t.assignedSlot||t.parentNode||(L(t)?t.host:null)||q(t)}function U(t){return N(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function K(t){const e=O(t);let n=U(t);for(;n&&M(n)&&"static"===getComputedStyle(n).position;)n=U(n);return n&&("html"===B(n)||"body"===B(n)&&"static"===getComputedStyle(n).position&&!H(n))?e:n||function(t){let e=Q(t);for(;N(e)&&!["html","body"].includes(B(e));){if(H(e))return e;e=e.parentNode}return null}(t)||e}function X(t){return{width:t.offsetWidth,height:t.offsetHeight}}function Y(t,e){var n;void 0===e&&(e=[]);const i=function t(e){return["html","body","#document"].includes(B(e))?e.ownerDocument.body:N(e)&&z(e)?e:t(Q(e))}(t),o=i===(null==(n=t.ownerDocument)?void 0:n.body),r=O(i),s=o?[r].concat(r.visualViewport||[],z(i)?i:[]):i,a=e.concat(s);return o?a:a.concat(Y(Q(s)))}function G(t,e){return"viewport"===e?h(function(t){const e=O(t),n=q(t),i=e.visualViewport;let o=n.clientWidth,r=n.clientHeight,s=0,a=0;return i&&(o=i.width,r=i.height,Math.abs(e.innerWidth/i.scale-i.width)<.01&&(s=i.offsetLeft,a=i.offsetTop)),{width:o,height:r,x:s,y:a}}(t)):A(e)?function(t){const e=I(t),n=e.top+t.clientTop,i=e.left+t.clientLeft;return{top:n,left:i,x:i,y:n,right:i+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(e):h(function(t){var e;const n=q(t),i=W(t),o=null==(e=t.ownerDocument)?void 0:e.body,r=R(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),s=R(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0);let a=-i.scrollLeft+F(t);const l=-i.scrollTop;return"rtl"===P(o||n).direction&&(a+=R(n.clientWidth,o?o.clientWidth:0)-r),{width:r,height:s,x:a,y:l}}(q(t)))}function J(t){const e=Y(Q(t)),n=["absolute","fixed"].includes(P(t).position)&&N(t)?K(t):t;return A(n)?e.filter(t=>A(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&L(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==B(t)):[]}const Z={getElementRects:t=>{let{reference:e,floating:n,strategy:i}=t;return{reference:V(e,K(n),i),floating:{...X(n),x:0,y:0}}},convertOffsetParentRelativeRectToViewportRelativeRect:t=>function(t){let{rect:e,offsetParent:n,strategy:i}=t;const o=N(n),r=q(n);if(n===r)return e;let s={scrollLeft:0,scrollTop:0};const a={x:0,y:0};if((o||!o&&"fixed"!==i)&&(("body"!==B(n)||z(r))&&(s=W(n)),N(n))){const t=I(n,!0);a.x=t.x+n.clientLeft,a.y=t.y+n.clientTop}return{...e,x:e.x-s.scrollLeft+a.x,y:e.y-s.scrollTop+a.y}}(t),getOffsetParent:t=>{let{element:e}=t;return K(e)},isElement:t=>A(t),getDocumentElement:t=>{let{element:e}=t;return q(e)},getClippingClientRect:t=>function(t){let{element:e,boundary:n,rootBoundary:i}=t;const o=[..."clippingParents"===n?J(e):[].concat(n),i],r=o[0],s=o.reduce((t,n)=>{const i=G(e,n);return t.top=R(i.top,t.top),t.right=D(i.right,t.right),t.bottom=D(i.bottom,t.bottom),t.left=R(i.left,t.left),t},G(e,r));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}(t),getDimensions:t=>{let{element:e}=t;return X(e)},getClientRects:t=>{let{element:e}=t;return e.getClientRects()}},tt=(t,e,n)=>(async(t,e,n)=>{const{placement:i="bottom",strategy:o="absolute",middleware:r=[],platform:s}=n;let a=await s.getElementRects({reference:t,floating:e,strategy:o}),{x:l,y:c}=u({...a,placement:i}),d=i,h={};for(let n=0;ne in t?it(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,ut=(t,e)=>{for(var n in e||(e={}))at.call(e,n)&&ct(t,n,e[n]);if(st)for(var n of st(e))lt.call(e,n)&&ct(t,n,e[n]);return t},dt=(t,e)=>ot(t,rt(e));const ht={disabled:!1,distance:5,skidding:0,container:"body",boundary:void 0,instantMove:!1,disposeTimeout:5e3,popperTriggers:[],strategy:"absolute",preventOverflow:!0,flip:!0,shift:!0,overflowPadding:0,arrowPadding:0,arrowOverflow:!0,themes:{tooltip:{placement:"top",triggers:["hover","focus","touch"],hideTriggers:t=>[...t,"click"],delay:{show:200,hide:0},handleResize:!1,html:!1,loadingContent:"..."},dropdown:{placement:"bottom",triggers:["click"],delay:0,handleResize:!0,autoHide:!0},menu:{$extend:"dropdown",triggers:["hover","focus"],popperTriggers:["hover","focus"],delay:{show:0,hide:400}}}};function pt(t,e){let n,i=ht.themes[t]||{};do{n=i[e],void 0===n?i.$extend?i=ht.themes[i.$extend]||{}:(i=null,n=ht[e]):i=null}while(i);return n}let ft=!1;if("undefined"!=typeof window){ft=!1;try{const t=Object.defineProperty({},"passive",{get(){ft=!0}});window.addEventListener("test",null,t)}catch(t){}}let vt=!1;"undefined"!=typeof window&&"undefined"!=typeof navigator&&(vt=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream);const mt=["auto","top","bottom","left","right"].reduce((t,e)=>t.concat([e,e+"-start",e+"-end"]),[]),gt={hover:"mouseenter",focus:"focus",click:"click",touch:"touchstart"},yt={hover:"mouseleave",focus:"blur",click:"click",touch:"touchend"};function wt(){return new Promise(t=>requestAnimationFrame(()=>{requestAnimationFrame(t)}))}const bt=[];let _t=null,St=function(){};function xt(t){return function(){return pt(this.$props.theme,t)}}"undefined"!=typeof window&&(St=window.Element);const Ct="__floating-vue__popper";var $t=()=>({name:"VPopper",props:{theme:{type:String,required:!0},targetNodes:{type:Function,required:!0},referenceNode:{type:Function,required:!0},popperNode:{type:Function,required:!0},shown:{type:Boolean,default:!1},showGroup:{type:String,default:null},ariaId:{default:null},disabled:{type:Boolean,default:xt("disabled")},positioningDisabled:{type:Boolean,default:xt("positioningDisabled")},placement:{type:String,default:xt("placement"),validator:t=>mt.includes(t)},delay:{type:[String,Number,Object],default:xt("delay")},distance:{type:[Number,String],default:xt("distance")},skidding:{type:[Number,String],default:xt("skidding")},triggers:{type:Array,default:xt("triggers")},showTriggers:{type:[Array,Function],default:xt("showTriggers")},hideTriggers:{type:[Array,Function],default:xt("hideTriggers")},popperTriggers:{type:Array,default:xt("popperTriggers")},popperShowTriggers:{type:[Array,Function],default:xt("popperShowTriggers")},popperHideTriggers:{type:[Array,Function],default:xt("popperHideTriggers")},container:{type:[String,Object,St,Boolean],default:xt("container")},boundary:{type:[String,St],default:xt("boundary")},strategy:{type:String,validator:t=>["absolute","fixed"].includes(t),default:xt("strategy")},autoHide:{type:Boolean,default:xt("autoHide")},handleResize:{type:Boolean,default:xt("handleResize")},instantMove:{type:Boolean,default:xt("instantMove")},eagerMount:{type:Boolean,default:xt("eagerMount")},popperClass:{type:[String,Array,Object],default:xt("popperClass")},computeTransformOrigin:{type:Boolean,default:xt("computeTransformOrigin")},autoMinSize:{type:Boolean,default:xt("autoMinSize")},autoSize:{type:[Boolean,String],default:xt("autoSize")},autoMaxSize:{type:Boolean,default:xt("autoMaxSize")},autoBoundaryMaxSize:{type:Boolean,default:xt("autoBoundaryMaxSize")},preventOverflow:{type:Boolean,default:xt("preventOverflow")},overflowPadding:{type:[Number,String],default:xt("overflowPadding")},arrowPadding:{type:[Number,String],default:xt("arrowPadding")},arrowOverflow:{type:Boolean,default:xt("arrowOverflow")},flip:{type:Boolean,default:xt("flip")},shift:{type:Boolean,default:xt("shift")},shiftCrossAxis:{type:Boolean,default:xt("shiftCrossAxis")}},provide(){return{[Ct]:{parentPopper:this}}},inject:{[Ct]:{default:null}},data(){return{isShown:!1,isMounted:!1,skipTransition:!1,classes:{showFrom:!1,showTo:!1,hideFrom:!1,hideTo:!0},result:{x:0,y:0,placement:"",strategy:this.strategy,arrow:{x:0,y:0,centerOffset:0},transformOrigin:null},shownChildren:new Set}},computed:{popperId(){return null!=this.ariaId?this.ariaId:this.randomId},shouldMountContent(){return this.eagerMount||this.isMounted},slotData(){return{popperId:this.popperId,isShown:this.isShown,shouldMountContent:this.shouldMountContent,skipTransition:this.skipTransition,autoHide:this.autoHide,show:this.show,hide:this.hide,handleResize:this.handleResize,onResize:this.onResize,classes:dt(ut({},this.classes),{popperClass:this.popperClass}),result:this.positioningDisabled?null:this.result}},parentPopper(){var t;return null==(t=this[Ct])?void 0:t.parentPopper}},watch:ut(ut({shown:"$_autoShowHide",disabled(t){t?this.dispose():this.init()},async container(){this.isShown&&(this.$_ensureTeleport(),await this.$_computePosition())}},["triggers","positioningDisabled"].reduce((t,e)=>(t[e]="$_refreshListeners",t),{})),["placement","distance","skidding","boundary","strategy","overflowPadding","arrowPadding","preventOverflow","shift","shiftCrossAxis","flip"].reduce((t,e)=>(t[e]="$_computePosition",t),{})),created(){this.$_isDisposed=!0,this.randomId="popper_"+[Math.random(),Date.now()].map(t=>t.toString(36).substring(2,10)).join("_"),this.autoMinSize&&console.warn('[floating-vue] `autoMinSize` option is deprecated. Use `autoSize="min"` instead.'),this.autoMaxSize&&console.warn("[floating-vue] `autoMaxSize` option is deprecated. Use `autoBoundaryMaxSize` instead.")},mounted(){this.init(),this.$_detachPopperNode()},activated(){this.$_autoShowHide()},deactivated(){this.hide()},beforeDestroy(){this.dispose()},methods:{show({event:t=null,skipDelay:e=!1,force:n=!1}={}){var i,o;(null==(i=this.parentPopper)?void 0:i.lockedChild)&&this.parentPopper.lockedChild!==this||(this.$_pendingHide=!1,!n&&this.disabled||((null==(o=this.parentPopper)?void 0:o.lockedChild)===this&&(this.parentPopper.lockedChild=null),this.$_scheduleShow(t,e),this.$emit("show"),this.$_showFrameLocked=!0,requestAnimationFrame(()=>{this.$_showFrameLocked=!1})),this.$emit("update:shown",!0))},hide({event:t=null,skipDelay:e=!1}={}){var n;this.$_hideInProgress||(this.shownChildren.size>0?this.$_pendingHide=!0:this.$_isAimingPopper()?this.parentPopper&&(this.parentPopper.lockedChild=this,clearTimeout(this.parentPopper.lockedChildTimer),this.parentPopper.lockedChildTimer=setTimeout(()=>{this.parentPopper.lockedChild===this&&(this.parentPopper.lockedChild.hide({skipDelay:e}),this.parentPopper.lockedChild=null)},1e3)):((null==(n=this.parentPopper)?void 0:n.lockedChild)===this&&(this.parentPopper.lockedChild=null),this.$_pendingHide=!1,this.$_scheduleHide(t,e),this.$emit("hide"),this.$emit("update:shown",!1)))},init(){this.$_isDisposed&&(this.$_isDisposed=!1,this.isMounted=!1,this.$_events=[],this.$_preventShow=!1,this.$_referenceNode=this.referenceNode(),this.$_targetNodes=this.targetNodes().filter(t=>t.nodeType===t.ELEMENT_NODE),this.$_popperNode=this.popperNode(),this.$_innerNode=this.$_popperNode.querySelector(".v-popper__inner"),this.$_arrowNode=this.$_popperNode.querySelector(".v-popper__arrow-container"),this.$_swapTargetAttrs("title","data-original-title"),this.$_detachPopperNode(),this.triggers.length&&this.$_addEventListeners(),this.shown&&this.show())},dispose(){this.$_isDisposed||(this.$_isDisposed=!0,this.$_removeEventListeners(),this.hide({skipDelay:!0}),this.$_detachPopperNode(),this.isMounted=!1,this.isShown=!1,this.$_updateParentShownChildren(!1),this.$_swapTargetAttrs("data-original-title","title"),this.$emit("dispose"))},async onResize(){this.isShown&&(await this.$_computePosition(),this.$emit("resize"))},async $_computePosition(){var t;if(this.$_isDisposed||this.positioningDisabled)return;const e={strategy:this.strategy,middleware:[]};(this.distance||this.skidding)&&e.middleware.push(k({mainAxis:this.distance,crossAxis:this.skidding}));const n=this.placement.startsWith("auto");if(n?e.middleware.push(C({alignment:null!=(t=this.placement.split("-")[1])?t:""})):e.placement=this.placement,this.preventOverflow&&(this.shift&&e.middleware.push(function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:i,placement:o}=e,{mainAxis:r=!0,crossAxis:a=!1,limiter:c={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...u}=t,d={x:n,y:i},h=await p(e,u),f=l(s(o)),v=T(f);let g=d[f],y=d[v];if(r){const t="y"===f?"bottom":"right";g=m(g+h["y"===f?"top":"left"],g,g-h[t])}if(a){const t="y"===v?"bottom":"right";y=m(y+h["y"===v?"top":"left"],y,y-h[t])}const w=c.fn({...e,[f]:g,[v]:y});return{...w,data:{x:w.x-n,y:w.y-i}}}}}({padding:this.overflowPadding,boundary:this.boundary,crossAxis:this.shiftCrossAxis})),!n&&this.flip&&e.middleware.push($({padding:this.overflowPadding,boundary:this.boundary}))),e.middleware.push((t=>({name:"arrow",options:t,async fn(e){const{element:n,padding:i=0}=null!=t?t:{},{x:o,y:r,placement:a,rects:u,platform:h}=e;if(null==n)return{};const p=d(i),f={x:o,y:r},v=l(s(a)),g=c(v),y=await h.getDimensions({element:n}),w="y"===v?"top":"left",b="y"===v?"bottom":"right",_=u.reference[g]+u.reference[v]-f[v]-u.floating[g],S=f[v]-u.reference[v],x=await h.getOffsetParent({element:n}),C=x?"y"===v?x.clientHeight||0:x.clientWidth||0:0,$=_/2-S/2,k=p[w],T=C-y[g]-p[b],E=C/2-y[g]/2+$,O=m(k,E,T);return{data:{[v]:O,centerOffset:E-O}}}}))({element:this.$_arrowNode,padding:this.arrowPadding})),this.arrowOverflow&&e.middleware.push({name:"arrowOverflow",fn:({placement:t,rects:e,middlewareData:n})=>{let i;const{centerOffset:o}=n.arrow;return i=t.startsWith("top")||t.startsWith("bottom")?Math.abs(o)>e.reference.width/2:Math.abs(o)>e.reference.height/2,{data:{overflow:i}}}}),this.autoMinSize||this.autoSize){const t=this.autoSize?this.autoSize:this.autoMinSize?"min":null;e.middleware.push({name:"autoSize",fn:({rects:e,placement:n,middlewareData:i})=>{var o;if(null==(o=i.autoSize)?void 0:o.skip)return{};let r,s;return n.startsWith("top")||n.startsWith("bottom")?r=e.reference.width:s=e.reference.height,this.$_innerNode.style["min"===t?"minWidth":"max"===t?"maxWidth":"width"]=null!=r?r+"px":null,this.$_innerNode.style["min"===t?"minHeight":"max"===t?"maxHeight":"height"]=null!=s?s+"px":null,{data:{skip:!0},reset:{rects:!0}}}})}(this.autoMaxSize||this.autoBoundaryMaxSize)&&(this.$_innerNode.style.maxWidth=null,this.$_innerNode.style.maxHeight=null,e.middleware.push(function(t){return void 0===t&&(t={}),{name:"size",options:t,async fn(e){var n;const{placement:i,rects:o,middlewareData:r}=e,{apply:l,...c}=t;if(null!=(n=r.size)&&n.skip)return{};const u=await p(e,c),d=s(i),h="end"===a(i);let f,m;"top"===d||"bottom"===d?(f=d,m=h?"left":"right"):(m=d,f=h?"top":"bottom");const g=v(u.left,0),y=v(u.right,0),w=v(u.top,0),b=v(u.bottom,0),_={height:o.floating.height-(["left","right"].includes(i)?2*(0!==w||0!==b?w+b:v(u.top,u.bottom)):u[f]),width:o.floating.width-(["top","bottom"].includes(i)?2*(0!==g||0!==y?g+y:v(u.left,u.right)):u[m])};return null==l||l({..._,...o}),{data:{skip:!0},reset:{rects:!0}}}}}({boundary:this.boundary,padding:this.overflowPadding,apply:({width:t,height:e})=>{this.$_innerNode.style.maxWidth=null!=t?t+"px":null,this.$_innerNode.style.maxHeight=null!=e?e+"px":null}})));const i=await tt(this.$_referenceNode,this.$_popperNode,e);Object.assign(this.result,{x:i.x,y:i.y,placement:i.placement,strategy:i.strategy,arrow:ut(ut({},i.middlewareData.arrow),i.middlewareData.arrowOverflow)})},$_scheduleShow(t=null,e=!1){if(this.$_updateParentShownChildren(!0),this.$_hideInProgress=!1,clearTimeout(this.$_scheduleTimer),_t&&this.instantMove&&_t.instantMove&&_t!==this.parentPopper)return _t.$_applyHide(!0),void this.$_applyShow(!0);e?this.$_applyShow():this.$_scheduleTimer=setTimeout(this.$_applyShow.bind(this),this.$_computeDelay("show"))},$_scheduleHide(t=null,e=!1){this.shownChildren.size>0?this.$_pendingHide=!0:(this.$_updateParentShownChildren(!1),this.$_hideInProgress=!0,clearTimeout(this.$_scheduleTimer),this.isShown&&(_t=this),e?this.$_applyHide():this.$_scheduleTimer=setTimeout(this.$_applyHide.bind(this),this.$_computeDelay("hide")))},$_computeDelay(t){const e=this.delay;return parseInt(e&&e[t]||e||0)},async $_applyShow(t=!1){clearTimeout(this.$_disposeTimer),clearTimeout(this.$_scheduleTimer),this.skipTransition=t,this.isShown||(this.$_ensureTeleport(),await wt(),await this.$_computePosition(),await this.$_applyShowEffect(),this.positioningDisabled||this.$_registerEventListeners([...Y(this.$_referenceNode),...Y(this.$_popperNode)],"scroll",()=>{this.$_computePosition()}))},async $_applyShowEffect(){if(this.$_hideInProgress)return;if(this.computeTransformOrigin){const t=this.$_referenceNode.getBoundingClientRect(),e=this.$_popperNode.querySelector(".v-popper__wrapper"),n=e.parentNode.getBoundingClientRect(),i=t.x+t.width/2-(n.left+e.offsetLeft),o=t.y+t.height/2-(n.top+e.offsetTop);this.result.transformOrigin=`${i}px ${o}px`}this.isShown=!0,this.$_applyAttrsToTarget({"aria-describedby":this.popperId,"data-popper-shown":""});const t=this.showGroup;if(t){let e;for(let n=0;n0)return this.$_pendingHide=!0,void(this.$_hideInProgress=!1);if(clearTimeout(this.$_scheduleTimer),!this.isShown)return;this.skipTransition=t,function(t,e){const n=t.indexOf(e);-1!==n&&t.splice(n,1)}(bt,this),_t===this&&(_t=null),this.isShown=!1,this.$_applyAttrsToTarget({"aria-describedby":void 0,"data-popper-shown":void 0}),clearTimeout(this.$_disposeTimer);const e=pt(this.theme,"disposeTimeout");null!==e&&(this.$_disposeTimer=setTimeout(()=>{this.$_popperNode&&(this.$_detachPopperNode(),this.isMounted=!1)},e)),this.$_removeEventListeners("scroll"),this.$emit("apply-hide"),this.classes.showFrom=!1,this.classes.showTo=!1,this.classes.hideFrom=!0,this.classes.hideTo=!1,await wt(),this.classes.hideFrom=!1,this.classes.hideTo=!0},$_autoShowHide(){this.shown?this.show():this.hide()},$_ensureTeleport(){if(this.$_isDisposed)return;let t=this.container;if("string"==typeof t?t=window.document.querySelector(t):!1===t&&(t=this.$_targetNodes[0].parentNode),!t)throw new Error("No container for popover: "+this.container);t.appendChild(this.$_popperNode),this.isMounted=!0},$_addEventListeners(){const t=t=>{this.isShown&&!this.$_hideInProgress||(t.usedByTooltip=!0,!this.$_preventShow&&this.show({event:t}))};this.$_registerTriggerListeners(this.$_targetNodes,gt,this.triggers,this.showTriggers,t),this.$_registerTriggerListeners([this.$_popperNode],gt,this.popperTriggers,this.popperShowTriggers,t);const e=t=>{t.usedByTooltip||this.hide({event:t})};this.$_registerTriggerListeners(this.$_targetNodes,yt,this.triggers,this.hideTriggers,e),this.$_registerTriggerListeners([this.$_popperNode],yt,this.popperTriggers,this.popperHideTriggers,e)},$_registerEventListeners(t,e,n){this.$_events.push({targetNodes:t,eventType:e,handler:n}),t.forEach(t=>t.addEventListener(e,n,ft?{passive:!0}:void 0))},$_registerTriggerListeners(t,e,n,i,o){let r=n;null!=i&&(r="function"==typeof i?i(r):i),r.forEach(n=>{const i=e[n];i&&this.$_registerEventListeners(t,i,o)})},$_removeEventListeners(t){const e=[];this.$_events.forEach(n=>{const{targetNodes:i,eventType:o,handler:r}=n;t&&t!==o?e.push(n):i.forEach(t=>t.removeEventListener(o,r))}),this.$_events=e},$_refreshListeners(){this.$_isDisposed||(this.$_removeEventListeners(),this.$_addEventListeners())},$_handleGlobalClose(t,e=!1){this.$_showFrameLocked||(this.hide({event:t}),t.closePopover?this.$emit("close-directive"):this.$emit("auto-hide"),e&&(this.$_preventShow=!0,setTimeout(()=>{this.$_preventShow=!1},300)))},$_detachPopperNode(){this.$_popperNode.parentNode&&this.$_popperNode.parentNode.removeChild(this.$_popperNode)},$_swapTargetAttrs(t,e){for(const n of this.$_targetNodes){const i=n.getAttribute(t);i&&(n.removeAttribute(t),n.setAttribute(e,i))}},$_applyAttrsToTarget(t){for(const e of this.$_targetNodes)for(const n in t){const i=t[n];null==i?e.removeAttribute(n):e.setAttribute(n,i)}},$_updateParentShownChildren(t){let e=this.parentPopper;for(;e;)t?e.shownChildren.add(this.randomId):(e.shownChildren.delete(this.randomId),e.$_pendingHide&&e.hide()),e=e.parentPopper},$_isAimingPopper(){const t=this.$el.getBoundingClientRect();if(Nt>=t.left&&Nt<=t.right&&At>=t.top&&At<=t.bottom){const t=this.$_popperNode.getBoundingClientRect(),e=Nt-Pt,n=At-Bt,i=t.left+t.width/2-Pt+(t.top+t.height/2)-Bt+t.width+t.height,o=Pt+e*i,r=Bt+n*i;return Lt(Pt,Bt,o,r,t.left,t.top,t.left,t.bottom)||Lt(Pt,Bt,o,r,t.left,t.top,t.right,t.top)||Lt(Pt,Bt,o,r,t.right,t.top,t.right,t.bottom)||Lt(Pt,Bt,o,r,t.left,t.bottom,t.right,t.bottom)}return!1}},render(){return this.$scopedSlots.default(this.slotData)[0]}});function kt(t){for(let e=0;e=0;i--){const o=bt[i];try{const i=o.$_containsGlobalTarget=Et(o,t);o.$_pendingHide=!1,requestAnimationFrame(()=>{if(o.$_pendingHide=!1,!n[o.randomId]&&Ot(o,i,t)){if(o.$_handleGlobalClose(t,e),!t.closeAllPopover&&t.closePopover&&i){let t=o.parentPopper;for(;t;)n[t.randomId]=!0,t=t.parentPopper;return}let r=o.parentPopper;for(;r&&Ot(r,r.$_containsGlobalTarget,t);)r.$_handleGlobalClose(t,e),r=r.parentPopper}})}catch(t){}}}function Et(t,e){const n=t.popperNode();return t.$_mouseDownContains||n.contains(e.target)}function Ot(t,e,n){return n.closeAllPopover||n.closePopover&&e||t.autoHide&&!e}"undefined"!=typeof document&&"undefined"!=typeof window&&(vt?(document.addEventListener("touchstart",kt,!ft||{passive:!0,capture:!0}),document.addEventListener("touchend",(function(t){Tt(t,!0)}),!ft||{passive:!0,capture:!0})):(window.addEventListener("mousedown",kt,!0),window.addEventListener("click",(function(t){Tt(t)}),!0)),window.addEventListener("resize",(function(t){for(let e=0;e=0&&l<=1&&c>=0&&c<=1}var zt;function Mt(){Mt.init||(Mt.init=!0,zt=-1!==function(){var t=window.navigator.userAgent,e=t.indexOf("MSIE ");if(e>0)return parseInt(t.substring(e+5,t.indexOf(".",e)),10);if(t.indexOf("Trident/")>0){var n=t.indexOf("rv:");return parseInt(t.substring(n+3,t.indexOf(".",n)),10)}var i=t.indexOf("Edge/");return i>0?parseInt(t.substring(i+5,t.indexOf(".",i)),10):-1}())}function Ht(t,e,n,i,o,r,s,a,l,c){"boolean"!=typeof s&&(l=a,a=s,s=!1);var u,d="function"==typeof n?n.options:n;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),r?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},d._ssrRegister=u):e&&(u=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),u)if(d.functional){var h=d.render;d.render=function(t,e){return u.call(e),h(t,e)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,u):[u]}return n}"undefined"!=typeof window&&window.addEventListener("mousemove",t=>{Pt=Nt,Bt=At,Nt=t.clientX,At=t.clientY},ft?{passive:!0}:void 0);var Dt={name:"ResizeObserver",props:{emitOnMount:{type:Boolean,default:!1},ignoreWidth:{type:Boolean,default:!1},ignoreHeight:{type:Boolean,default:!1}},mounted:function(){var t=this;Mt(),this.$nextTick((function(){t._w=t.$el.offsetWidth,t._h=t.$el.offsetHeight,t.emitOnMount&&t.emitSize()}));var e=document.createElement("object");this._resizeObject=e,e.setAttribute("aria-hidden","true"),e.setAttribute("tabindex",-1),e.onload=this.addResizeHandlers,e.type="text/html",zt&&this.$el.appendChild(e),e.data="about:blank",zt||this.$el.appendChild(e)},beforeDestroy:function(){this.removeResizeHandlers()},methods:{compareAndNotify:function(){(!this.ignoreWidth&&this._w!==this.$el.offsetWidth||!this.ignoreHeight&&this._h!==this.$el.offsetHeight)&&(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitSize())},emitSize:function(){this.$emit("notify",{width:this._w,height:this._h})},addResizeHandlers:function(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers:function(){this._resizeObject&&this._resizeObject.onload&&(!zt&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),this.$el.removeChild(this._resizeObject),this._resizeObject.onload=null,this._resizeObject=null)}}},Rt=function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"resize-observer",attrs:{tabindex:"-1"}})};Rt._withStripped=!0;var jt=Ht({render:Rt,staticRenderFns:[]},void 0,Dt,"data-v-8859cc6c",!1,void 0,!1,void 0,void 0,void 0);var It={version:"1.0.1",install:function(t){t.component("resize-observer",jt),t.component("ResizeObserver",jt)}},qt=null;"undefined"!=typeof window?qt=window.Vue:void 0!==i.g&&(qt=i.g.Vue),qt&&qt.use(It);var Wt={computed:{themeClass(){return function(t){const e=[t];let n=ht.themes[t]||{};do{n.$extend&&!n.$resetCss?(e.push(n.$extend),n=ht.themes[n.$extend]||{}):n=null}while(n);return e.map(t=>"v-popper--theme-"+t)}(this.theme)}}},Ft={name:"VPopperContent",components:{ResizeObserver:jt},mixins:[Wt],props:{popperId:String,theme:String,shown:Boolean,mounted:Boolean,skipTransition:Boolean,autoHide:Boolean,handleResize:Boolean,classes:Object,result:Object},methods:{toPx:t=>null==t||isNaN(t)?null:t+"px"}};function Vt(t,e,n,i,o,r,s,a){var l,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),s?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=l):o&&(l=a?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(c.functional){c._injectStyles=l;var u=c.render;c.render=function(t,e){return l.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:c}}const Qt={};var Ut=Vt(Ft,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"popover",staticClass:"v-popper__popper",class:[t.themeClass,t.classes.popperClass,{"v-popper__popper--shown":t.shown,"v-popper__popper--hidden":!t.shown,"v-popper__popper--show-from":t.classes.showFrom,"v-popper__popper--show-to":t.classes.showTo,"v-popper__popper--hide-from":t.classes.hideFrom,"v-popper__popper--hide-to":t.classes.hideTo,"v-popper__popper--skip-transition":t.skipTransition,"v-popper__popper--arrow-overflow":t.result&&t.result.arrow.overflow,"v-popper__popper--no-positioning":!t.result}],style:t.result?{position:t.result.strategy,transform:"translate3d("+Math.round(t.result.x)+"px,"+Math.round(t.result.y)+"px,0)"}:void 0,attrs:{id:t.popperId,"aria-hidden":t.shown?"false":"true",tabindex:t.autoHide?0:void 0,"data-popper-placement":t.result?t.result.placement:void 0},on:{keyup:function(e){if(!e.type.indexOf("key")&&t._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;t.autoHide&&t.$emit("hide")}}},[n("div",{staticClass:"v-popper__backdrop",on:{click:function(e){t.autoHide&&t.$emit("hide")}}}),n("div",{staticClass:"v-popper__wrapper",style:t.result?{transformOrigin:t.result.transformOrigin}:void 0},[n("div",{ref:"inner",staticClass:"v-popper__inner"},[t.mounted?[n("div",[t._t("default")],2),t.handleResize?n("ResizeObserver",{on:{notify:function(e){return t.$emit("resize",e)}}}):t._e()]:t._e()],2),n("div",{ref:"arrow",staticClass:"v-popper__arrow-container",style:t.result?{left:t.toPx(t.result.arrow.x),top:t.toPx(t.result.arrow.y)}:void 0},[n("div",{staticClass:"v-popper__arrow-outer"}),n("div",{staticClass:"v-popper__arrow-inner"})])])])}),[],!1,Kt,null,null,null);function Kt(t){for(let t in Qt)this[t]=Qt[t]}var Xt=function(){return Ut.exports}(),Yt={methods:{show(...t){return this.$refs.popper.show(...t)},hide(...t){return this.$refs.popper.hide(...t)},dispose(...t){return this.$refs.popper.dispose(...t)},onResize(...t){return this.$refs.popper.onResize(...t)}}},Gt={name:"VPopperWrapper",components:{Popper:$t(),PopperContent:Xt},mixins:[Yt,Wt],inheritAttrs:!1,props:{theme:{type:String,default(){return this.$options.vPopperTheme}}},methods:{getTargetNodes(){return Array.from(this.$refs.reference.children).filter(t=>t!==this.$refs.popperContent.$el)}}};const Jt={};var Zt=Vt(Gt,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("Popper",t._g(t._b({ref:"popper",attrs:{theme:t.theme,"target-nodes":t.getTargetNodes,"reference-node":function(){return t.$refs.reference},"popper-node":function(){return t.$refs.popperContent.$el}},scopedSlots:t._u([{key:"default",fn:function(e){var i=e.popperId,o=e.isShown,r=e.shouldMountContent,s=e.skipTransition,a=e.autoHide,l=e.show,c=e.hide,u=e.handleResize,d=e.onResize,h=e.classes,p=e.result;return[n("div",{ref:"reference",staticClass:"v-popper",class:[t.themeClass,{"v-popper--shown":o}]},[t._t("default",null,{shown:o,show:l,hide:c}),n("PopperContent",{ref:"popperContent",attrs:{"popper-id":i,theme:t.theme,shown:o,mounted:r,"skip-transition":s,"auto-hide":a,"handle-resize":u,classes:h,result:p},on:{hide:c,resize:d}},[t._t("popper",null,{shown:o,hide:c})],2)],2)]}}],null,!0)},"Popper",t.$attrs,!1),t.$listeners))}),[],!1,te,null,null,null);function te(t){for(let t in Jt)this[t]=Jt[t]}var ee=function(){return Zt.exports}(),ne=dt(ut({},ee),{name:"VDropdown",vPopperTheme:"dropdown"});const ie={};var oe=Vt(ne,void 0,void 0,!1,re,null,null,null);function re(t){for(let t in ie)this[t]=ie[t]}var se=function(){return oe.exports}(),ae=dt(ut({},ee),{name:"VMenu",vPopperTheme:"menu"});const le={};var ce=Vt(ae,void 0,void 0,!1,ue,null,null,null);function ue(t){for(let t in le)this[t]=le[t]}var de=function(){return ce.exports}(),he=dt(ut({},ee),{name:"VTooltip",vPopperTheme:"tooltip"});const pe={};var fe=Vt(he,void 0,void 0,!1,ve,null,null,null);function ve(t){for(let t in pe)this[t]=pe[t]}var me=function(){return fe.exports}(),ge={name:"VTooltipDirective",components:{Popper:$t(),PopperContent:Xt},mixins:[Yt],inheritAttrs:!1,props:{theme:{type:String,default:"tooltip"},html:{type:Boolean,default(){return pt(this.theme,"html")}},content:{type:[String,Number,Function],default:null},loadingContent:{type:String,default(){return pt(this.theme,"loadingContent")}}},data:()=>({asyncContent:null}),computed:{isContentAsync(){return"function"==typeof this.content},loading(){return this.isContentAsync&&null==this.asyncContent},finalContent(){return this.isContentAsync?this.loading?this.loadingContent:this.asyncContent:this.content}},watch:{content:{handler(){this.fetchContent(!0)},immediate:!0},async finalContent(t){await this.$nextTick(),this.$refs.popper.onResize()}},created(){this.$_fetchId=0},methods:{fetchContent(t){if("function"==typeof this.content&&this.$_isShown&&(t||!this.$_loading&&null==this.asyncContent)){this.asyncContent=null,this.$_loading=!0;const t=++this.$_fetchId,e=this.content(this);e.then?e.then(e=>this.onResult(t,e)):this.onResult(t,e)}},onResult(t,e){t===this.$_fetchId&&(this.$_loading=!1,this.asyncContent=e)},onShow(){this.$_isShown=!0,this.fetchContent()},onHide(){this.$_isShown=!1}}};const ye={};var we=Vt(ge,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("Popper",t._g(t._b({ref:"popper",attrs:{theme:t.theme,"popper-node":function(){return t.$refs.popperContent.$el}},on:{"apply-show":t.onShow,"apply-hide":t.onHide},scopedSlots:t._u([{key:"default",fn:function(e){var i=e.popperId,o=e.isShown,r=e.shouldMountContent,s=e.skipTransition,a=e.autoHide,l=e.hide,c=e.handleResize,u=e.onResize,d=e.classes,h=e.result;return[n("PopperContent",{ref:"popperContent",class:{"v-popper--tooltip-loading":t.loading},attrs:{"popper-id":i,theme:t.theme,shown:o,mounted:r,"skip-transition":s,"auto-hide":a,"handle-resize":c,classes:d,result:h},on:{hide:l,resize:u}},[t.html?n("div",{domProps:{innerHTML:t._s(t.finalContent)}}):n("div",{domProps:{textContent:t._s(t.finalContent)}})])]}}])},"Popper",t.$attrs,!1),t.$listeners))}),[],!1,be,null,null,null);function be(t){for(let t in ye)this[t]=ye[t]}var _e=function(){return we.exports}();function Se(t,e,n){let i;const o=typeof e;return i="string"===o?{content:e}:e&&"object"===o?e:{content:!1},i.placement=function(t,e){let n=t.placement;if(!n&&e)for(const t of mt)e[t]&&(n=t);return n||(n=pt(t.theme||"tooltip","placement")),n}(i,n),i.targetNodes=()=>[t],i.referenceNode=()=>t,i}function xe(t,e,n){const i=Se(t,e,n),o=t.$_popper=new(nt())({mixins:[Yt],data:()=>({options:i}),render(t){const e=this.options,{theme:n,html:i,content:o,loadingContent:r}=e,s=((t,e)=>{var n={};for(var i in t)at.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&st)for(var i of st(t))e.indexOf(i)<0&<.call(t,i)&&(n[i]=t[i]);return n})(e,["theme","html","content","loadingContent"]);return t(_e,{props:{theme:n,html:i,content:o,loadingContent:r},attrs:s,ref:"popper"})},devtools:{hide:!0}}),r=document.createElement("div");return document.body.appendChild(r),o.$mount(r),t.classList&&t.classList.add("v-popper--has-tooltip"),o}function Ce(t){t.$_popper&&(t.$_popper.$destroy(),delete t.$_popper,delete t.$_popperOldShown),t.classList&&t.classList.remove("v-popper--has-tooltip")}function $e(t,{value:e,oldValue:n,modifiers:i}){const o=Se(t,e,i);if(!o.content||pt(o.theme||"tooltip","disabled"))Ce(t);else{let n;t.$_popper?(n=t.$_popper,n.options=o):n=xe(t,e,i),void 0!==e.shown&&e.shown!==t.$_popperOldShown&&(t.$_popperOldShown=e.shown,e.shown?n.show():n.hide())}}var ke={bind:$e,update:$e,unbind(t){Ce(t)}};function Te(t){t.addEventListener("click",Oe),t.addEventListener("touchstart",Pe,!!ft&&{passive:!0})}function Ee(t){t.removeEventListener("click",Oe),t.removeEventListener("touchstart",Pe),t.removeEventListener("touchend",Be),t.removeEventListener("touchcancel",Ne)}function Oe(t){const e=t.currentTarget;t.closePopover=!e.$_vclosepopover_touch,t.closeAllPopover=e.$_closePopoverModifiers&&!!e.$_closePopoverModifiers.all}function Pe(t){if(1===t.changedTouches.length){const e=t.currentTarget;e.$_vclosepopover_touch=!0;const n=t.changedTouches[0];e.$_vclosepopover_touchPoint=n,e.addEventListener("touchend",Be),e.addEventListener("touchcancel",Ne)}}function Be(t){const e=t.currentTarget;if(e.$_vclosepopover_touch=!1,1===t.changedTouches.length){const n=t.changedTouches[0],i=e.$_vclosepopover_touchPoint;t.closePopover=Math.abs(n.screenY-i.screenY)<20&&Math.abs(n.screenX-i.screenX)<20,t.closeAllPopover=e.$_closePopoverModifiers&&!!e.$_closePopoverModifiers.all}}function Ne(t){t.currentTarget.$_vclosepopover_touch=!1}var Ae={bind(t,{value:e,modifiers:n}){t.$_closePopoverModifiers=n,(void 0===e||e)&&Te(t)},update(t,{value:e,oldValue:n,modifiers:i}){t.$_closePopoverModifiers=i,e!==n&&(void 0===e||e?Te(t):Ee(t))},unbind(t){Ee(t)}};const Le=se,ze=me;const Me={version:"1.0.0-beta.14",install:function(t,e={}){t.$_vTooltipInstalled||(t.$_vTooltipInstalled=!0,function t(e,n){for(const i in n)Object.prototype.hasOwnProperty.call(n,i)&&("object"==typeof n[i]&&e[i]?t(e[i],n[i]):e[i]=n[i])}(ht,e),t.directive("tooltip",ke),t.directive("close-popper",Ae),t.component("v-tooltip",me),t.component("VTooltip",me),t.component("v-dropdown",se),t.component("VDropdown",se),t.component("v-menu",de),t.component("VMenu",de))},options:ht};let He=null;"undefined"!=typeof window?He=window.Vue:void 0!==i.g&&(He=i.g.Vue),He&&He.use(Me);var De=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["alert box-container",t.containerStyle(),t.addClass,{"d-flex":t.seamlessHeaderBool()}],style:t.customStyle()},[t.seamlessHeaderBool()?n("div",{staticClass:"d-flex"},[t.iconBool()?n("div",{class:["icon-wrapper",t.iconStyle()],style:t.customIconColorStyle()},[t._t("icon",(function(){return[n("i",{class:["fas",t.getFontAwesomeIconStyle()]})]}))],2):t._e(),t._v(" "),n("div",{staticClass:"vertical-divider",class:t.getBootstrapAlertStyle(),attrs:{"aria-hidden":"true"}})]):t._e(),t._v(" "),n("div",{staticClass:"header-and-body"},[t.headerBool()?n("div",{class:["box-header-wrapper",{"alert-dismissible":t.dismissible}]},[t.iconBool()&&!t.seamlessHeaderBool()?n("div",{class:["icon-wrapper",t.iconStyle()],style:t.customIconColorStyle()},[t._t("icon",(function(){return[n("i",{class:["fas",t.getFontAwesomeIconStyle()]})]}))],2):t._e(),t._v(" "),n("div",{staticClass:"box-header"},[t._t("header")],2),t._v(" "),t.dismissible?n("button",{staticClass:"btn-close close-with-heading",attrs:{type:"button","data-bs-dismiss":"alert","aria-label":"Close"}}):t._e()]):t._e(),t._v(" "),n("div",{class:["box-body-wrapper",{"alert-dismissible":t.dismissible&&!t.headerBool(),"box-body-wrapper-with-heading":t.headerBool()}]},[t.iconBool()&&!t.headerBool()?n("div",{class:["icon-wrapper",t.iconStyle()],style:t.customIconColorStyle()},[t._t("icon",(function(){return[n("i",{class:["fas",t.getFontAwesomeIconStyle()]})]}))],2):t._e(),t._v(" "),t.seamlessNoHeaderBool()?n("div",{staticClass:"vertical-divider",class:t.getBootstrapAlertStyle(),attrs:{"aria-hidden":"true"}}):t._e(),t._v(" "),n("div",{staticClass:"contents",style:t.customColorStyle()},[t._t("default")],2),t._v(" "),t.dismissible&&!t.headerBool()?n("button",{staticClass:"btn-close",attrs:{type:"button","data-bs-dismiss":"alert","aria-label":"Close"}}):t._e()])])])};De._withStripped=!0;var Re=function(t){return"string"==typeof t?""===t||"true"===t||"false"!==t&&"null"!==t&&"undefined"!==t&&t:t};function je(t){return"string"==typeof t?""===t||"true"===t||"false"!==t&&"null"!==t&&"undefined"!==t&&t:t}function Ie(t){return"number"==typeof t?t:null==t||isNaN(Number(t))?null:Number(t)}function qe(t){var e=t.split("#"),n="";return e.length>1&&(n=e[1]),n}function We(t,e,n,i,o,r,s,a){var l,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),s?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=l):o&&(l=a?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(c.functional){c._injectStyles=l;var u=c.render;c.render=function(t,e){return l.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:c}}var Fe=We({props:{dismissible:{type:Boolean,default:!1},backgroundColor:{type:String,default:null},borderColor:{type:String,default:null},borderLeftColor:{type:String,default:null},color:{type:String,default:null},icon:{type:String,default:null},iconSize:{type:String,default:null},iconColor:{type:String,default:null},type:{type:String,default:""},addClass:{type:String,default:""},light:{type:Boolean,default:!1},seamless:{type:Boolean,default:!1},noIcon:{type:Boolean,default:!1},noBackground:{type:Boolean,default:!1},noBorder:{type:Boolean,default:!1},theme:{type:String,default:""}},computed:{bootStrapStyle:function(){return function(t,e){var n,i,o=["warning","info","definition","success","danger","tip","important","wrong"].includes(t)?t:"",r=["primary","secondary","success","danger","warning","info","light","dark"].includes(e)?e:"";if(r)n=r;else switch(o){case"warning":n="warning";break;case"info":n="info";break;case"definition":n="primary";break;case"success":case"tip":n="success";break;case"important":case"wrong":n="danger";break;default:n="default"}switch(o){case"wrong":i="fa-times";break;case"warning":i="fa-exclamation";break;case"info":i="fa-info";break;case"success":i="fa-check";break;case"important":i="fa-flag";break;case"tip":i="fa-lightbulb";break;case"definition":i="fa-atlas";break;default:i=""}return{style:n,icon:i}}(this.type,this.theme)}},methods:{isSeamless:function(){return!this.light&&this.seamless},seamlessNoHeaderBool:function(){return this.isSeamless()&&!this.headerBool()},seamlessHeaderBool:function(){return this.isSeamless()&&this.headerBool()},headerBool:function(){return!!this.$scopedSlots.header},iconBool:function(){var t=!!this.$scopedSlots.icon;return!this.noIcon&&this.type||t},containerStyle:function(){var t;return t=this.light?"".concat(this.getBootstrapBorderStyle()," alert-border-left"):this.seamless?"seamless":this.getBootstrapAlertStyle(),this.noBackground&&(t+=" no-background"),this.noBorder&&(t+=" no-border"),t},customStyle:function(){var t={};return this.backgroundColor&&(t.backgroundColor=this.backgroundColor,t.borderColor=this.backgroundColor),this.borderColor&&(t.border="1px solid ".concat(this.borderColor)),this.borderLeftColor&&(t.borderLeft="5px solid ".concat(this.borderLeftColor)),t},customColorStyle:function(){return this.color?{color:this.color}:{}},iconStyle:function(){var t="";return this.iconSize&&(t+="fa-".concat(this.iconSize)),(this.light||this.seamless)&&(t+=" ".concat(this.getBootstrapTextStyle())),t},customIconColorStyle:function(){return this.iconColor?{color:this.iconColor}:{}},getBootstrapAlertStyle:function(){return"alert-".concat(this.bootStrapStyle.style)},getBootstrapTextStyle:function(){return"text-".concat(this.bootStrapStyle.style)},getBootstrapBorderStyle:function(){return"border-".concat(this.bootStrapStyle.style)},getFontAwesomeIconStyle:function(){return this.bootStrapStyle.icon}}},De,[],!1,null,"b8113688",null);Fe.options.__file="vue-components/src/Box.vue";const Ve=Fe.exports;var Qe=i(561),Ue=i.n(Qe),Ke=function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isLi?n("li",{ref:"dropdown",class:[{disabled:t.disabledBool},"dropdown",t.addClass]},[t._t("button",(function(){return[n("a",{staticClass:"dropdown-toggle",class:{disabled:t.disabledBool},attrs:{role:"button","data-bs-toggle":"dropdown"}},[t._t("header")],2)]})),t._v(" "),t._t("dropdown-menu",(function(){return[n("ul",{staticClass:"dropdown-menu",class:[{show:t.show},{"dropdown-menu-end":t.menuAlignRight}]},[t._t("default")],2)]}))],2):t.isSubmenu?n("submenu",{ref:"submenu",scopedSlots:t._u([t._l(t.$scopedSlots,(function(e,n){return{key:n,fn:function(){return[t._t(n)]},proxy:!0}}))],null,!0)}):n("div",{ref:"dropdown",class:[{disabled:t.disabledBool},"btn-group",t.addClass]},[t._t("before"),t._v(" "),t._t("button",(function(){return[n("button",{staticClass:"btn dropdown-toggle",class:[t.btnType,t.btnWithBefore,{"dropdown-toggle-split":t.hasBefore}],attrs:{type:"button",disabled:t.disabledBool,"data-bs-reference":"parent","data-bs-toggle":"dropdown"}},[t._t("header")],2)]})),t._v(" "),t._t("dropdown-menu",(function(){return[n("ul",{staticClass:"dropdown-menu",class:[{show:t.show},{"dropdown-menu-end":t.menuAlignRight}]},[t._t("default")],2)]}))],2)};Ke._withStripped=!0;var Xe=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("li",{ref:"submenu",class:[t.addClass,"dropdown-submenu",{dropend:t.dropright,dropstart:t.dropleft}]},[t._t("button",(function(){return[n("a",{staticClass:"dropdown-item submenu-toggle",class:{disabled:t.disabled},attrs:{role:"button","data-bs-toggle":"dropdown"}},[t._t("header")],2)]})),t._v(" "),t._t("dropdown-menu",(function(){return[n("ul",{staticClass:"dropdown-menu"},[t._t("default")],2)]}))],2)};function Ye(t,e){for(var n=0;n1&&void 0!==arguments[1])||arguments[1];return this&&this.length&&t?(this.each((function(e){tn.push({el:e,callback:t})})),Ge||(Ge=function(t){tn.forEach((function(e){e.el&&(e.el.contains(t.target)||e.el===t.target||e.callback.call(e.el,t,e.el))}))},document.addEventListener("click",Ge,!1),e&&document.addEventListener("touchstart",Ge,!1)),this):this}},{key:"offBlur",value:function(t){return this.each((function(e){tn=tn.filter((function(n){return!(n&&n.el===e&&(!t||n.callback===t))&&e}))})),this}}])&&Ye(e.prototype,n),i&&Ye(e,i),Object.defineProperty(e,"prototype",{writable:!1}),t}(),an=sn.prototype;function ln(t,e){var n=[];return Je.forEach.call(t,(function(i){if(nn(i))~n.indexOf(i)||n.push(i);else if(on(i))for(var o in i)n.push(i[o]);else if(null!==i)return t.get=an.get,t.set=an.set,t.call=an.call,t.owner=e,t})),hn(n,e)}Object.getOwnPropertyNames(Je).forEach((function(t){"join"!==t&&"copyWithin"!==t&&"fill"!==t&&void 0===an[t]&&(an[t]=Je[t])})),window&&window.Symbol&&Symbol.iterator&&(an[Symbol.iterator]=an.values=Je[Symbol.iterator]);var cn=document&&document.createElement("div");function un(t){var e=this;an[t]||(cn[t]instanceof Function?an[t]=function(){for(var n=[],i=!0,o=arguments.length,r=new Array(o),s=0;sn))},preventOverflow:function(t){t.removeAttribute("style");var e=0,n=(window.innerWidth,window.innerHeight),i=t.getBoundingClientRect();if(void 0!==i){var o=i.y,r=(i.x,i.x,t.offsetWidth,i.y+t.offsetHeight);r>n?t.setAttribute("style","bottom: auto; top: ".concat(-(r-n),"px;")):owindow.innerWidth)e.setAttribute("style","left: 0px;");else{var i=e.parentNode.getBoundingClientRect(),o=i.left+e.offsetWidth-window.innerWidth,r=o<0?i.left:i.left-o;e.setAttribute("style","left: ".concat(r,"px;"))}}var mn=We({props:{addClass:{type:String,default:""},disabled:{type:[Boolean,String],default:!1}},data:function(){return{show:!1,dropright:!0,dropleft:!1}},inject:{isParentNavbar:{default:!1}},computed:{disabledBool:function(){return je(this.disabled)}},methods:{hideSubmenu:function(){this.show=!1,pn(this.$refs.submenu).find("ul.dropdown-menu").each((function(t){return t.classList.toggle("show",!1)})),this.alignMenuRight()},showSubmenu:function(){var t=this;this.show=!0,pn(this.$refs.submenu).findChildren("ul").each((function(e){e.classList.toggle("show",!0),window.innerWidth<768&&t.isParentNavbar?vn(e):(fn.isRightAlign(e)?t.alignMenuRight():t.alignMenuLeft(),fn.preventOverflow(e))}))},alignMenuRight:function(){this.dropright=!0,this.dropleft=!1},alignMenuLeft:function(){this.dropright=!1,this.dropleft=!0}},mounted:function(){var t=this,e=pn(this.$refs.submenu);this.show&&this.showSubmenu(),e.onBlur((function(){t.hideSubmenu()}),!1),e.findChildren("a,button").on("click",(function(e){return e.preventDefault(),e.stopPropagation(),t.disabledBool||(t.show?t.hideSubmenu():t.showSubmenu()),!1})),e.findChildren("a,button").on("mouseover",(function(n){if(n.preventDefault(),window.innerWidth>767){if(e.findChildren("ul.show").length>0||t.disabledBool)return!1;n.currentTarget.click(),t.$parent.$parent.$children.forEach((function(e){e.$el===t.$el?e.$refs.submenu.showSubmenu():e.$refs.submenu.hideSubmenu()}))}return!1}))},beforeDestroy:function(){var t=pn(this.$refs.submenu);t.offBlur(),t.findChildren("a,button").off(),t.findChildren("ul").off()}},Xe,[],!1,null,"3d2bfc10",null);mn.options.__file="vue-components/src/Submenu.vue";const gn=mn.exports;var yn=We({components:{Submenu:gn},props:{disabled:{type:[Boolean,String],default:!1},type:{type:String,default:"light"},menuAlignRight:{type:Boolean,default:!1},addClass:{type:String,default:""}},provide:{hasParentDropdown:!0},inject:{hasParentDropdown:{default:void 0},isParentNavbar:{default:!1}},data:function(){return{show:!1}},computed:{btnType:function(){return"btn-".concat(this.type)},disabledBool:function(){return je(this.disabled)},isLi:function(){return this.$parent._navbar||this.$parent.menu||this.$parent._tabset},isSubmenu:function(){return this.hasParentDropdown},menu:function(){return!this.$parent||this.$parent.navbar},submenu:function(){return this.$parent&&(this.$parent.menu||this.$parent.submenu)},slots:function(){return this.$scopedSlots.default},hasBefore:function(){return!!this.$scopedSlots.before},btnWithBefore:function(){return this.hasBefore?"btn-with-before":""}},methods:{blur:function(){var t=this;this.unblur(),this._hide=setTimeout((function(){t._hide=null,t.hideDropdownMenu()}),100)},unblur:function(){this._hide&&(clearTimeout(this._hide),this._hide=null)},hideDropdownMenu:function(){var t=this;this.show=!1,pn(this.$refs.dropdown).findChildren("ul").each((function(e){e.classList.toggle("show",!1),window.innerWidth<768&&t.isParentNavbar&&e.style.removeProperty("left")}))},showDropdownMenu:function(){var t=this;this.show=!0,pn(this.$refs.dropdown).findChildren("ul").each((function(e){e.classList.toggle("show",!0),window.innerWidth<768&&t.isParentNavbar&&vn(e)}))}},mounted:function(){var t=this,e=pn(this.$refs.dropdown);this.$slots.button&&e.findChildren(".dropdown-toggle").forEach((function(t){return t.setAttribute("data-bs-toggle","dropdown")})),this.show&&this.showDropdownMenu(),e.onBlur((function(){t.hideDropdownMenu()}),!1),e.findChildren("a,button.dropdown-toggle").on("click",(function(e){return e.preventDefault(),t.disabledBool||(t.show?t.hideDropdownMenu():t.showDropdownMenu()),!1})),e.findChildren("ul").on("click","li>a",(function(e){e.target.classList.contains("submenu-toggle")||t.hideDropdownMenu()}))},beforeDestroy:function(){var t=pn(this.$refs.dropdown);t.offBlur(),t.findChildren("a,button").off(),t.findChildren("ul").off()}},Ke,[],!1,null,"2e98b3f0",null);yn.options.__file="vue-components/src/Dropdown.vue";const wn=yn.exports;var bn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("nav",{ref:"navbar",class:["navbar","navbar-expand-md","d-print-none",t.themeOptions,t.addClass,t.fixedOptions]},[n("div",{staticClass:"container-fluid"},[n("div",{staticClass:"navbar-left"},[t._t("brand")],2),t._v(" "),n("div",{ref:"navbarDefault",staticClass:"navbar-default"},[n("ul",{staticClass:"navbar-nav me-auto mt-2 mt-lg-0"},[t._t("default")],2)]),t._v(" "),t.slots.right?n("ul",{staticClass:"navbar-nav navbar-right"},[t._t("right")],2):t._e()])]),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isLowerNavbarShowing,expression:"isLowerNavbarShowing"}],ref:"lowerNavbar",staticClass:"lower-navbar-container"},[t._t("lower-navbar",(function(){return[n("site-nav-button"),t._v(" "),n("page-nav-button")]}))],2)])};function _n(t){return function(t){if(Array.isArray(t))return e(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||n(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function Sn(t){return t.endsWith(".html")?t.toLowerCase():t.endsWith("/")?"".concat(t,"index.html").toLowerCase():t.endsWith("/")?t.toLowerCase():"".concat(t,".html").toLowerCase()}bn._withStripped=!0;var xn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.showSiteNav?n("overlay",{attrs:{type:"siteNav","portal-name":t.portalName},scopedSlots:t._u([{key:"navMenuIcon",fn:function(){return[n("div",{class:["toggle-site-nav-button"]},[n("span"),t._v(" "),n("span"),t._v(" "),n("span")])]},proxy:!0}],null,!1,3920804522)}):t._e()};xn._withStripped=!0;var Cn=We({data:function(){return{portalName:void 0,show:!1}},computed:{showSiteNav:function(){return this.show&&this.portalName}},methods:{toggleSiteNavButton:function(){window.innerWidth<992?this.show=!0:this.show=!1}},mounted:function(){null!==document.querySelector("#site-nav a")?this.portalName="site-nav":null!==document.querySelector(".site-nav-root a")&&(this.portalName="mb-site-nav"),this.toggleSiteNavButton(),pn(window).on("resize",this.toggleSiteNavButton)},beforeDestroy:function(){pn(window).off("resize",this.toggleSiteNavButton)}},xn,[],!1,null,"69eece42",null);Cn.options.__file="vue-components/src/SiteNavButton.vue";const $n=Cn.exports;var kn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.showPageNav?n("overlay",{attrs:{type:"pageNav","portal-name":t.portalName},scopedSlots:t._u([{key:"navMenuIcon",fn:function(){return[n("div",{class:["toggle-page-nav-button"]},[n("span"),t._v(" "),n("span"),t._v(" "),n("span")])]},proxy:!0}],null,!1,171840498)}):t._e()};kn._withStripped=!0;var Tn=We({data:function(){return{portalName:void 0,show:!1}},computed:{showPageNav:function(){return this.show&&this.portalName}},methods:{togglePageNavButton:function(){window.innerWidth<1300?this.show=!0:this.show=!1}},mounted:function(){null!==document.querySelector("#page-nav a")?this.portalName="page-nav":null!==document.querySelector("#mb-page-nav a")&&(this.portalName="mb-page-nav"),this.togglePageNavButton(),pn(window).on("resize",this.togglePageNavButton)},beforeDestroy:function(){pn(window).off("resize",this.togglePageNavButton)}},kn,[],!1,null,"3c57aa97",null);Tn.options.__file="vue-components/src/PageNavButton.vue";const En=Tn.exports;var On=We({components:{SiteNavButton:$n,PageNavButton:En},props:{type:{type:String,default:"primary"},addClass:{type:String,default:""},fixed:{type:[Boolean,String],default:!1},defaultHighlightOn:{type:String,default:"sibling-or-child"}},provide:function(){return{toggleLowerNavbar:this.toggleLowerNavbar,isParentNavbar:!0}},data:function(){return{id:"bs-example-navbar-collapse-1",styles:{},isLowerNavbarShowing:!1}},computed:{fixedBool:function(){return je(this.fixed)},fixedOptions:function(){return this.fixedBool?"navbar-fixed":""},slots:function(){return this.$scopedSlots},themeOptions:function(){switch(this.type){case"none":return"";case"light":return"navbar-light bg-light";case"dark":return"navbar-dark bg-dark";case"primary":default:return"navbar-dark bg-primary"}}},methods:{splitUrl:function(t){var e=new URL(Sn(t));return"".concat(e.pathname).substr(1).split("/")},isEqualExceptLast:function(t,e){for(var n=0;n0?this.isLowerNavbarShowing=!0:this.isLowerNavbarShowing=!1}},created:function(){this._navbar=!0},mounted:function(){var t=this,e=pn('.dropdown>[data-bs-toggle="dropdown"]',this.$el).parent();e.on("click",".dropdown-toggle",(function(t){t.preventDefault(),e.each((function(e){e.contains(t.target)&&e.classList.toggle("open")}))})).on("click",".dropdown-menu>li>a",(function(t){e.each((function(e){e.contains(t.target)&&e.classList.remove("open")}))})).onBlur((function(t){e.each((function(e){e.contains(t.target)||e.classList.remove("open")}))})),this.highlightLink(window.location.href);var n=pn(this.$refs.navbarDefault).find(".current")[0];n&&window.innerWidth<768&&n.offsetLeft+n.offsetWidth>window.innerWidth&&(this.$refs.navbarDefault.scrollLeft=n.offsetLeft+n.offsetWidth-window.innerWidth),this.toggleLowerNavbar(),pn(window).on("resize",this.toggleLowerNavbar),pn(this.$refs.navbarDefault).on("wheel",(function(e){window.innerWidth<768&&!function(t){for(var e=0;e0},srcWithoutFragment:function(){return this.src.split("#")[0]},shouldShowHeader:function(){return!this.localExpanded||!this.expandHeaderless},shouldShowPeek:function(){return this.peek&&!this.localExpanded},collapsedPanelHeight:function(){return this.peek?125:0}},data:function(){return{localExpanded:!1,localMinimized:!1,wasRetrieverLoaded:!1,isRetrieverLoadDone:!this.src,fragment:""}},methods:{toggle:function(){var t=this;this.wasRetrieverLoaded?(this.localExpanded?(this.$refs.panel.style.maxHeight="".concat(this.$refs.panel.scrollHeight,"px"),requestAnimationFrame((function(){if(t.$el.getBoundingClientRect().top<0){var e=jQuery("header[sticky]").height()||0;jQuery("html").animate({scrollTop:window.scrollY+t.$el.getBoundingClientRect().top-e-3},500,"swing")}t.$refs.panel.style.maxHeight="".concat(t.collapsedPanelHeight,"px")}))):this.$refs.panel.style.maxHeight="".concat(this.$refs.panel.scrollHeight,"px"),this.localExpanded=!this.localExpanded):this.open()},close:function(){this.localMinimized=!0,this.localExpanded=!1},open:function(){var t=this;this.localMinimized=!1,this.$nextTick((function(){t.initPanel(),t.localExpanded=!0,t.wasRetrieverLoaded=!0,t.$nextTick((function(){t.$refs.panel.style.maxHeight="".concat(t.$refs.panel.scrollHeight,"px")}))}))},openPopup:function(){window.open(this.popupUrl)},retrieverUpdateMaxHeight:function(){this.isRetrieverLoadDone=!0,this.localExpanded&&(this.expandedBool?this.$refs.panel.style.maxHeight="none":this.$refs.panel.style.maxHeight="".concat(this.$refs.panel.scrollHeight,"px"))},initPanel:function(){var t=this;this.$refs.panel.addEventListener("transitionend",(function(e){t.localExpanded&&t.isRetrieverLoadDone&&e.target===t.$refs.panel&&(t.$refs.panel.style.maxHeight="none")})),this.localExpanded?this.$refs.panel.style.maxHeight="none":this.$refs.panel.style.maxHeight="".concat(this.collapsedPanelHeight,"px")}},created:function(){if(this.src){var t=qe(this.src);t&&(this.fragment=t)}var e=!this.expandableBool&&"false"!==this.expanded;this.localExpanded=e||this.expandedBool,null===this.localExpanded&&(this.localExpanded=!1),this.wasRetrieverLoaded=this.localExpanded||this.peek,this.localMinimized=this.minimizedBool},mounted:function(){this.localMinimized||this.initPanel()}};var Ln=function(){var t=this.$createElement,e=this._self._c||t;return e("button",{class:["collapse-button","btn",this.isLightBg?"btn-outline-secondary":"btn-outline-light"],attrs:{type:"button"}},[e("span",{class:["collapse-icon","glyphicon","glyphicon-menu-down",{opened:this.isOpenBool}],attrs:{"aria-hidden":"true"}})])};Ln._withStripped=!0;var zn=We({props:{isOpen:{type:[Boolean,String],default:!1},isLightBg:{type:Boolean,default:!0}},computed:{isOpenBool:function(){return je(this.isOpen)}}},Ln,[],!1,null,null,null);zn.options.__file="vue-components/src/panels/PanelSwitch.vue";const Mn=zn.exports;var Hn=function(){var t=this.$createElement;return(this._self._c||t)("div",[this._v("\n Loading...\n")])};function Dn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}Hn._withStripped=!0;var Rn=We({props:{src:{type:String,default:null},fragment:{type:String,default:null},delay:{type:[Boolean,String],default:!1},hasFetched:{type:Boolean,default:!1}},data:function(){return{hasFetchedCopy:this.hasFetched}},computed:{delayBool:function(){return je(this.delay)},hash:function(){return qe(this.src)||this.fragment},srcWithoutHash:function(){return this.src.split("#")[0]}},methods:{fetch:function(){var e=this;this.srcWithoutHash&&(this.hasFetchedCopy||jQuery.get(this.srcWithoutHash).done((function(n){var i=n;if(e.hash){var o=jQuery("").append(jQuery.parseHTML(i));i=jQuery("#".concat(e.hash),o).html()}if(e.hasFetchedCopy=!0,void 0===i&&e.hash)e.$el.innerHTML="Error: Failed to retrieve page fragment:"+" ".concat(e.srcWithoutHash,"#").concat(e.hash);else{var r=function(e){for(var n=1;n\n".concat(i,"\n"),data:function(){return r}}))).$mount(e.$el),e.$emit("src-loaded")}})).fail((function(t){console.error(t.responseText),e.$el.innerHTML="Error: Failed to retrieve content from source: "+"".concat(e.srcWithoutHash,""),e.$emit("src-loaded")})))}},mounted:function(){this.$nextTick((function(){this.srcWithoutHash||(this.$el.innerHTML=""),this.delayBool||this.fetch()}))}},Hn,[],!1,null,null,null);Rn.options.__file="vue-components/src/Retriever.vue";const jn=Rn.exports;var In=We({mixins:[An],components:{panelSwitch:Mn,retriever:jn},computed:{showCaret:function(){return this.isSeamless&&this.expandableBool},isSeamless:function(){return"seamless"===this.type},btnType:function(){return this.isSeamless||"light"===this.type?"btn-outline-secondary":"btn-outline-".concat(this.type||"secondary")},borderType:function(){return this.isSeamless?"border-0":this.type?"light"===this.type?"":"border-".concat(this.type):""},cardType:function(){return this.isSeamless?"bg-white":"bg-".concat(this.type||"light")},isLightBg:function(){return"bg-light"===this.cardType||"bg-white"===this.cardType||"bg-warning"===this.cardType}}},Nn,[],!1,null,"5681bde8",null);In.options.__file="vue-components/src/panels/NestedPanel.vue";const qn=In.exports;var Wn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.localMinimized?n("span",{ref:"cardContainer",class:["card-container",t.addClass]},[t.hasId?n("span",{staticClass:"anchor",attrs:{id:t.panelId}}):t._e(),t._v(" "),n("span",{staticClass:"morph"},[n("button",{staticClass:"morph-display-wrapper btn card-title morph-title",on:{click:function(e){return t.minimalOpen()}}},[t.noMinimizedSwitch?t._e():n("div",{class:["glyphicon","glyphicon-chevron-right"]}),t._v(" "),t._t("_alt",(function(){return[n("span",{staticClass:"card-title"},[t._t("header")],2)]}))],2)])]):n("div",{ref:"cardContainer",class:["card-container",t.addClass]},[t.hasId?n("span",{staticClass:"anchor",attrs:{id:t.panelId}}):t._e(),t._v(" "),n("div",{staticClass:"card card-flex"},[n("div",{class:["header-wrapper",{"header-wrapper-bottom":t.isHeaderAtBottom,"header-toggle":t.isExpandableCard}],on:{click:function(e){e.preventDefault(),e.stopPropagation(),t.isExpandableCard&&t.minimalToggle()}}},[n("transition",{attrs:{name:"header-fade"}},[n("span",{directives:[{name:"show",rawName:"v-show",value:!t.isHeaderAtBottom,expression:"!isHeaderAtBottom"}],ref:"headerWrapper",class:["card-title",{ellipses:!t.hasHeaderBool}]},[n("span",{staticClass:"card-title-inline"},[t._t("header")],2),t._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:t.showDownSwitch,expression:"showDownSwitch"}],staticClass:"minimal-button glyphicon glyphicon-menu-down minimal-menu-down",attrs:{"aria-hidden":"true"}})])]),t._v(" "),n("div",{class:["button-wrapper",{"button-wrapper-expanded":t.isHeaderAtBottom}]},[t._t("button",(function(){return[n("button",{directives:[{name:"show",rawName:"v-show",value:!t.noCloseBool,expression:"!noCloseBool"}],staticClass:"minimal-button",attrs:{type:"button"},on:{click:function(e){return e.stopPropagation(),t.minimalClose()}}},[n("span",{staticClass:"glyphicon glyphicon-remove minimal-close-button",attrs:{"aria-hidden":"true"}})]),t._v(" "),n("button",{directives:[{name:"show",rawName:"v-show",value:null!==t.popupUrl,expression:"popupUrl !== null"}],staticClass:"minimal-button",attrs:{type:"button"},on:{click:function(e){return e.stopPropagation(),t.openPopup()}}},[n("span",{staticClass:"glyphicon glyphicon-new-window minimal-popup-button",attrs:{"aria-hidden":"true"}})]),t._v(" "),n("button",{directives:[{name:"show",rawName:"v-show",value:t.isHeaderAtBottom&&t.isExpandableCard&&t.bottomSwitchBool,expression:"isHeaderAtBottom && isExpandableCard && bottomSwitchBool"}],staticClass:"minimal-button",attrs:{type:"button"}},[n("span",{staticClass:"glyphicon glyphicon-menu-up minimal-menu-up",attrs:{"aria-hidden":"true"}})])]}))],2)],1),t._v(" "),n("div",{ref:"panel",staticClass:"card-collapse",class:{"card-peek-collapsed":t.shouldShowPeek}},[t.wasRetrieverLoaded||t.preloadBool?n("div",{staticClass:"card-body"},[t._t("default"),t._v(" "),t.hasSrc?n("retriever",{ref:"retriever",attrs:{src:t.srcWithoutFragment,fragment:t.fragment},on:{"src-loaded":t.retrieverUpdateMaxHeight}}):t._e()],2):t._e()])])])};Wn._withStripped=!0;var Fn=We({mixins:[An],components:{retriever:jn},data:function(){return{isHeaderAtBottom:!1}},computed:{showDownSwitch:function(){return this.hasHeaderBool&&this.isExpandableCard&&!this.noSwitchBool}},methods:{minimalToggle:function(){var t=this;if(this.localExpanded){this.$refs.panel.addEventListener("transitionend",(function e(n){n.target===t.$refs.panel&&(t.isHeaderAtBottom=!1,t.$refs.panel.removeEventListener("transitionend",e))}))}else this.isHeaderAtBottom=!0;this.toggle()},minimalOpen:function(){this.open(),this.isHeaderAtBottom=!0},minimalClose:function(){this.close(),this.isHeaderAtBottom=!1}},created:function(){this.isHeaderAtBottom=this.localExpanded}},Wn,[],!1,null,"e932f598",null);Fn.options.__file="vue-components/src/panels/MinimalPanel.vue";var Vn=We({components:{nestedPanel:qn,minimalPanel:Fn.exports},props:{panelId:{type:String,default:null},type:{type:String,default:null}},computed:{isMinimal:function(){return"minimal"===this.type}}},Bn,[],!1,null,null,null);Vn.options.__file="vue-components/src/Panel.vue";const Qn=Vn.exports;var Un=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["annotate-image-wrapper",t.addClass]},[n("img",{ref:"pic",staticClass:"annotate-image",attrs:{src:t.src,alt:t.alt,width:t.computedWidth,loading:t.computedLoadType},on:{"~load":function(e){return t.getWidth.apply(null,arguments)}}}),t._v(" "),n("div",{staticStyle:{top:"0",left:"0",height:"0"}},[t._t("default")],2)])};Un._withStripped=!0;var Kn=We({props:{src:{type:String,default:null},alt:{type:String,default:null},height:{type:String,default:""},width:{type:String,default:""},eager:{type:Boolean,default:!1},addClass:{type:String,default:""}},computed:{hasWidth:function(){return""!==this.width},hasHeight:function(){return""!==this.height},computedWidth:function(){return this.hasWidth?this.width:this.widthFromHeight},computedLoadType:function(){return this.eager?"eager":"lazy"}},data:function(){return{widthFromHeight:""}},methods:{getWidth:function(){if(!this.hasWidth&&this.hasHeight){var t=this.$refs.pic,e=t.naturalHeight,n=t.naturalWidth/e;this.widthFromHeight=Math.round(Ie(this.height)*n)}}},provide:function(){return{width:this.width,height:this.height,src:this.src}}},Un,[],!1,null,null,null);Kn.options.__file="vue-components/src/annotations/Annotate.vue";const Xn=Kn.exports;var Yn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[t.hasBottomText&&t.hasLabel?n("div",{staticClass:"legend-wrapper"},[n("div",{staticClass:"text-header"},[t._v("\n "+t._s(t.computedBottomHeader)+"\n ")]),t._v(" "),t.hasContent?n("div",[t._v("\n "+t._s(t.content)+"\n ")]):t._e()]):t._e(),t._v(" "),n("div",{staticClass:"annotate-point"},[t.isMounted?n("div",{staticClass:"popover-annotation"},[n("div",{style:t.pointPosition},[t.isMounted?n("v-popover",{attrs:{placement:t.placement,delay:0,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,distance:t.computeDistance,disabled:!t.hasPopover,skidding:t.computeSkidding,"arrow-padding":t.computeArrowPadding,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[t.hasContent||t.hasHeader?n("div",{staticClass:"popover-container"},[t.hasHeader?n("h3",{staticClass:"popover-header"},[t._v("\n "+t._s(t.header)+"\n ")]):t._e(),t._v(" "),t.hasContent?n("div",{staticClass:"popover-body"},[t._v("\n "+t._s(t.content)+"\n ")]):t._e()]):t._e()]},proxy:!0}],null,!1,2937687922)},[n("div",{staticClass:"hover-wrapper"},[n("button",{staticClass:"hover-point",style:t.pointStyle}),t._v(" "),n("div",{staticClass:"hover-label",style:t.labelStyle},[t._v("\n "+t._s(t.label)+"\n ")])])]):t._e()],1)]):t._e()])])};Yn._withStripped=!0;var Gn=We({props:{content:{type:String,default:""},header:{type:String,default:""},placement:{type:String,default:"top"},x:{type:String,default:null},y:{type:String,default:null},color:{type:String,default:"green"},textColor:{type:String,default:"black"},fontSize:{type:String,default:"14"},opacity:{type:String,default:"0.3"},size:{type:String,default:"40"},label:{type:String,default:""},legend:{type:String,default:"popover"},trigger:{type:String,default:"click"}},data:function(){return{targetEl:{},isMounted:!1,width:this.width,height:this.height,src:this.src}},inject:["width","height","src"],computed:{pointPosition:function(){var t=this;this.computeImage((function(){t.width=t.parentEl.offsetWidth,t.height=t.parentEl.offsetHeight}));var e=100*(this.toDecimal(this.x)-this.size/2/this.width),n=100*(this.toDecimal(this.y)-this.size/2/this.height);return{left:"".concat(e,"%"),top:"".concat(n,"%"),position:"absolute",pointerEvents:"all"}},pointStyle:function(){var t=this.hasPopover?"pointer":"default";return{backgroundColor:this.color,opacity:this.opacity,width:"".concat(this.size,"px"),height:"".concat(this.size,"px"),cursor:t}},labelStyle:function(){return{fontSize:"".concat(Math.min(this.fontSize,this.size),"px"),color:this.textColor}},triggers:function(){return this.trigger.split(" ")},computeDistance:function(){return"top"===this.placement?Ie(this.size*(2/3)):Ie(this.size/10)},computeSkidding:function(){return"left"===this.placement||"right"===this.placement?-Ie(this.size/4):0},computeArrowPadding:function(){return"left"===this.placement||"right"===this.placement?Ie(this.size/2):0},hasHeader:function(){return""!==this.header},hasContent:function(){return""!==this.content},hasWidth:function(){return""!==this.width},hasHeight:function(){return""!==this.height},hasLabel:function(){return""!==this.label},hasBottomText:function(){return"bottom"===this.legend||"both"===this.legend},hasPopover:function(){return"popover"===this.legend||"both"===this.legend},computedBottomHeader:function(){return""!==this.label&&""===this.header?this.label:""===this.label&&""!==this.header?this.header:"".concat(this.label,": ").concat(this.header)}},methods:{computeImage:function(t){var e=new Image;e.onload=function(){t()},e.src=this.src},toDecimal:function(t){return parseFloat(t)/100}},mounted:function(){this.targetEl=this.$el,this.isMounted=!0,this.parentEl=this.$el.parentElement.parentElement.querySelector(".annotate-image")}},Yn,[],!1,null,null,null);Gn.options.__file="vue-components/src/annotations/AnnotatePoint.vue";const Jn=Gn.exports;var Zn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:["image-wrapper",t.addClass]},[n("img",{ref:"pic",staticClass:"img-fluid rounded",attrs:{src:t.src,alt:t.alt,width:t.computedWidth,loading:t.computedLoadType},on:{"~load":function(e){return t.computeWidth.apply(null,arguments)}}}),t._v(" "),n("span",{staticClass:"image-caption"},[t._t("default")],2)])};Zn._withStripped=!0;var ti=We({props:{src:{type:String,default:null},alt:{type:String,default:null},height:{type:String,default:""},width:{type:String,default:""},eager:{type:Boolean,default:!1},addClass:{type:String,default:""}},computed:{hasWidth:function(){return""!==this.width},hasHeight:function(){return""!==this.height},computedWidth:function(){return this.hasWidth?this.width:this.widthFromHeight},computedLoadType:function(){return this.eager?"eager":"lazy"}},data:function(){return{widthFromHeight:""}},methods:{computeWidth:function(){if(!this.hasWidth&&this.hasHeight){var t=this.$refs.pic,e=t.naturalHeight,n=t.naturalWidth/e;this.widthFromHeight=Math.round(Ie(this.height)*n).toString()}}}},Zn,[],!1,null,null,null);ti.options.__file="vue-components/src/Pic.vue";const ei=ti.exports;var ni=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["quiz-container",t.addClass]},[3===t.state?n("div",{staticClass:"card intro-outro-card"},[n("div",{staticClass:"card-body"},[t._t("intro",(function(){return[n("h4",[t._v("\n Click start to begin\n ")])]})),t._v(" "),n("h5",[t._v(t._s(t.questions.length)+" questions")]),t._v(" "),n("hr"),t._v(" "),n("button",{staticClass:"btn btn-primary d-inline-block",attrs:{type:"button"},on:{click:t.begin}},[t._v("\n Start\n ")])],2)]):t._e(),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:4===t.state,expression:"state === 4"}],staticClass:"progress",staticStyle:{height:"1px"}},[n("div",{staticClass:"progress-bar progress-bar-z",style:{width:t.currentQuestion/t.questions.length*100+"%"},attrs:{role:"progressbar","aria-valuemin":"0","aria-valuemax":t.questions.length,"aria-valuenow":t.currentQuestion}})]),t._v(" "),t._t("default"),t._v(" "),n("transition",{attrs:{name:"intro-outro-card"},on:{"after-enter":t.setScoreCircleStyles}},[5===t.state?n("div",{staticClass:"card intro-outro-card"},[n("div",{staticClass:"card-body"},[n("h4",{staticClass:"mb-3"},[t._v("\n "+t._s(t.scoreText)+"\n ")]),t._v(" "),n("svg",{attrs:{viewBox:"0 0 100 100",width:"120px",height:"120px"}},[n("circle",{staticClass:"score-background-circle",attrs:{cx:"50",cy:"50",r:"42"}}),t._v(" "),n("circle",{ref:"score",staticClass:"score-circle",attrs:{cx:"50",cy:"50",r:"42",transform:"rotate(-90, 50, 50)","stroke-dashoffset":"264"}}),t._v(" "),n("text",{staticClass:"score",attrs:{x:"22",y:"57",textLength:"56"}},[t._v(t._s(t.score)+" / "+t._s(t.questions.length))])]),t._v(" "),n("hr"),t._v(" "),n("button",{staticClass:"btn btn-outline-primary",attrs:{type:"button"},on:{click:t.begin}},[t._v("\n Retry\n ")])])]):t._e()])],2)};ni._withStripped=!0;var ii=We({name:"Quiz",props:{addClass:{type:String,default:null}},data:function(){return{currentQuestion:0,questions:[],score:0,state:3}},provide:function(){return{questions:this.questions,gotoNextQuestion:this.gotoNextQuestion}},computed:{scoreText:function(){return this.score/this.questions.length>.5?"Well done!":"Try again?"}},methods:{gotoNextQuestion:function(){this.questions[this.currentQuestion-1].hide(),this.currentQuestion+=1,this.currentQuestion<=this.questions.length?this.questions[this.currentQuestion-1].show():this.complete()},begin:function(){this.currentQuestion=1,this.score=0,this.state=4,this.questions.length&&this.questions[0].show()},reset:function(){this.questions.forEach((function(t){return t.reset()}))},complete:function(){this.score=this.questions.filter((function(t){return 2===t.qState.state})).length,this.state=5,this.reset()},setScoreCircleStyles:function(){var t=this.score/this.questions.length;this.$refs.score.style.strokeDashoffset=264*(1-t),this.$refs.score.style.stroke="#51c2f8"}}},ni,[],!1,null,"c7bbe514",null);ii.options.__file="vue-components/src/questions/Quiz.vue";const oi=ii.exports;var ri=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:t.questions?"question":null}},[t.active?n("div",{class:["card","question",t.shakeClass,t.addClass]},[t.$scopedSlots.header?n("div",{staticClass:"card-header alert-light border-bottom border-light text-dark"},[t._t("header")],2):t._e(),t._v(" "),n("div",{staticClass:"card-body"},[t._t("default"),t._v(" "),t.isTextQuestion()?n("div",{staticClass:"mb-2"},[n("textarea",{directives:[{name:"model",rawName:"v-model",value:t.textareaText,expression:"textareaText"}],staticClass:"form-control",attrs:{disabled:t.qState.answered},domProps:{value:t.textareaText},on:{input:function(e){e.target.composing||(t.textareaText=e.target.value)}}}),t._v(" "),t.qState.answered?n("div",[n("hr"),t._v(" "),t.keywordsSplitTrimmed().length?n("strong",[t._v("\n Keywords: \n "),t._l(t.keywordsSplitTrimmed(),(function(e){return n("span",{key:e,staticClass:"badge rounded-pill bg-light text-dark fw-normal"},[t._v("\n "+t._s(e)+"\n ")])}))],2):t._e()]):t._e()]):t._e(),t._v(" "),!t.qState.answered||t.isMcqOrCheckboxQuestion()||t.isBlanksQuestion()?t._e():n("div",{staticClass:"answer"},[t._t("answer")],2),t._v(" "),t.showHint?n("box",{staticClass:"mb-0 mt-3",attrs:{type:"tip"}},[t._t("hint")],2):t._e()],2),t._v(" "),t.showCardFooter?n("div",{staticClass:"card-footer alert-light border-top border-light text-dark"},[1===t.qState.state&&t.isValidTypeAndNotTextWithoutKeywords()?n("i",{staticClass:"fa fa-times text-danger border-danger result-icon"}):2===t.qState.state&&t.isValidTypeAndNotTextWithoutKeywords()?n("i",{staticClass:"fa fa-check text-success border-success result-icon"}):t._e(),t._v(" "),n("transition-group",{staticClass:"float-end",attrs:{name:"q-btn",tag:"div"}},[t.$scopedSlots.hint&&!t.showHint?n("button",{key:"hint",staticClass:"btn btn-success q-btn ms-1",attrs:{type:"button"},on:{click:function(e){t.showHint=!0}}},[t._v("\n Hint\n ")]):t._e(),t._v(" "),0===t.qState.state&&(t.isValidTypeAndNotTextWithoutKeywords()||t.$scopedSlots.answer)?n("button",{key:"check",staticClass:"btn btn-primary q-btn ms-1",attrs:{type:"button"},on:{click:function(e){return t.checkAnswer(!!t.questions)}}},[t._v("\n Check\n ")]):t._e(),t._v(" "),0!==t.qState.state&&t.questions?n("button",{key:"active",staticClass:"btn btn-primary q-btn ms-1",attrs:{type:"button"},on:{click:t.gotoNextQuestion}},[t._v("\n Next\n ")]):t._e(),t._v(" "),t.retryState?n("button",{key:"show",staticClass:"btn btn-info q-btn ms-1",attrs:{type:"button"},on:{click:function(e){return t.checkAnswer(!0)}}},[t._v("\n Show\n ")]):t._e(),t._v(" "),t.retryState?n("button",{key:"retry",staticClass:"btn btn-primary q-btn ms-1",attrs:{type:"button"},on:{click:function(e){return t.checkAnswer(!1)}}},[t._v("\n Retry\n ")]):t._e()])],1):t._e()]):t._e()])};ri._withStripped=!0;function si(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function ai(e){for(var n=1;n=this.threshold?this.markAsCorrect():this.markAsWrong(t)},checkTextAnswer:function(t){if(this.keywords.length){for(var e=this.textareaText.toLowerCase(),n=this.keywordsSplitTrimmed(),i=0,o=0;o=this.threshold?this.markAsCorrect():this.markAsWrong(t)}else this.markAsCorrect()},checkAnswer:function(t){"mcq"===this.type?this.checkMcqAnswer(t):"checkbox"===this.type?this.checkCheckboxAnswer(t):"blanks"===this.type?this.checkBlanksAnswer(t):this.isTextQuestion()?this.checkTextAnswer(t):this.markAsCorrect()}}},ri,[],!1,null,"48074a07",null);li.options.__file="vue-components/src/questions/Question.vue";const ci=li.exports;var ui=function(){var t=this,e=t.$createElement,n=t._self._c||e;return"mcq"===t.qOptionType?n("div",{class:["form-control",t.hintClass],on:{click:t.toggleRadioOn,mouseover:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1}}},[n("div",{class:["row",{disabled:t.qState.answered}]},[n("div",{staticClass:"col-auto p-0"},[n("svg",{staticClass:"radio-svg",attrs:{viewBox:"0 0 100 100"}},[n("circle",{attrs:{cx:"50",cy:"50",r:"47",fill:"none",stroke:"black","stroke-width":"4"}}),t._v(" "),n("circle",{directives:[{name:"show",rawName:"v-show",value:t.selected,expression:"selected"}],attrs:{cx:"50",cy:"50",r:"25",fill:"dodgerblue"}})])]),t._v(" "),n("div",{staticClass:"col content"},[t._t("default")],2),t._v(" "),n("div",{staticClass:"col-1"},[t.qState.answered?n("div",[t.correct?n("i",{staticClass:"fa fa-check text-success",class:{"align-bottom":t.$scopedSlots.reason}}):n("i",{staticClass:"fa fa-times text-danger",class:{"align-bottom":t.$scopedSlots.reason}})]):t._e()])]),t._v(" "),t.qState.answered&&t.$scopedSlots.reason?n("div",[n("hr"),t._v(" "),n("div",{staticClass:"reason"},[t._t("reason")],2)]):t._e()]):"checkbox"===t.qOptionType?n("div",{class:["form-control",t.hintClass],on:{click:t.toggleCheckbox,mouseover:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1}}},[n("label",{class:["row","checkbox-label","m-0",{disabled:t.qState.answered}],on:{click:function(t){t.stopPropagation()}}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.selected,expression:"selected"}],staticClass:"checkbox",attrs:{disabled:t.qState.answered,type:"checkbox",onclick:"event.stopPropagation()"},domProps:{checked:Array.isArray(t.selected)?t._i(t.selected,null)>-1:t.selected},on:{change:function(e){var n=t.selected,i=e.target,o=!!i.checked;if(Array.isArray(n)){var r=t._i(n,null);i.checked?r<0&&(t.selected=n.concat([null])):r>-1&&(t.selected=n.slice(0,r).concat(n.slice(r+1)))}else t.selected=o}}}),t._v(" "),n("div",{staticClass:"col content"},[t._t("default")],2),t._v(" "),n("div",{staticClass:"col-auto"},[t.qState.answered?n("div",[t.correct?n("i",{staticClass:"fa fa-check text-success",class:{"align-bottom":t.$scopedSlots.reason}}):n("i",{staticClass:"fa fa-times text-danger",class:{"align-bottom":t.$scopedSlots.reason}})]):t._e()])]),t._v(" "),t.qState.answered&&t.$scopedSlots.reason?n("div",[n("hr"),t._v(" "),n("div",{staticClass:"reason"},[t._t("reason")],2)]):t._e()]):"blanks"===t.qOptionType?n("div",{class:["form-control","blanks-form-control",t.hintClass]},[n("label",{class:["row","m-0",{disabled:t.qState.answered}],on:{click:function(t){t.stopPropagation()}}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.inputText,expression:"inputText"}],staticClass:"form-control",attrs:{disabled:t.qState.answered},domProps:{value:t.inputText},on:{input:function(e){e.target.composing||(t.inputText=e.target.value)}}}),t._v(" "),n("div",{staticClass:"col-auto"},[t.qState.answered?n("div",[t.ansIsCorrect?n("i",{staticClass:"fa fa-check text-success"}):n("i",{staticClass:"fa fa-times text-danger blanks-cross"})]):t._e(),t._v(" "),t.isIntermediateResult()?n("div",[t.ansIsCorrect?n("i",{staticClass:"fa fa-check text-success"}):n("i",{staticClass:"fa fa-times text-danger blanks-cross"})]):t._e()]),t._v(" "),t.qState.answered?n("div",{staticClass:"col-auto blanks-keywords"},[t.keywordsSplitTrimmed().length?n("strong",[t._v("\n Keywords: \n "),t._l(t.keywordsSplitTrimmed(),(function(e){return n("span",{key:e,staticClass:"badge rounded-pill bg-light text-dark fw-normal"},[t._v("\n "+t._s(e)+"\n ")])}))],2):n("strong",[t._v("No answer checking keywords provided")])]):t._e()]),t._v(" "),t.qState.answered&&t.$scopedSlots.reason?n("div",[n("div",{staticClass:"reason blanks-reason"},[t._t("reason")],2)]):t._e()]):t._e()};ui._withStripped=!0;var di=We({name:"McqOption",props:{correct:{type:Boolean,default:!1},keywords:{type:String,default:""}},data:function(){return{selected:!1,hover:!1,inputText:"",ansIsCorrect:!1}},inject:{answers:{default:void 0},qOptionType:{default:void 0},qState:{default:void 0},noIntermediateResult:{default:void 0}},computed:{hintClass:function(){return this.qState.answered?this.correct?"success":"danger":this.selected||this.hover?"alert-light text-dark border border-secondary":""},answeredCorrectly:function(){return this.correct&&this.selected||!this.correct&&!this.selected}},methods:{checkAnswer:function(){var t=!1,e=this.inputText.toLowerCase().trim(),n=this.keywords.toLowerCase().split(",").filter((function(t){return""!==t.trim()}));this.keywords.length||(t=!0);for(var i=0;i=0;r-=1)o="".concat(o.slice(0,i[r].start),"")+"".concat(o.slice(i[r].start,i[r].end),"")+"".concat(o.slice(i[r].end));return o}}},fi,[],!1,null,"521e76fe",null);vi.options.__file="vue-components/src/SearchbarPageItem.vue";const mi=vi.exports;var gi=We({created:function(){this.items=this.primitiveData},props:{data:{type:Array,default:function(){return[]}},limit:{type:Number,default:8},async:{type:String,default:""},keyProp:{type:String,default:null},onHit:{type:Function,default:function(t){this.reset(),this.value=t}},placeholder:{type:String,default:"Search"},delay:{type:Number,default:200},menuAlignRight:{type:Boolean,default:!1},algolia:{type:Boolean,default:!1}},data:function(){return{value:"",showDropdown:!1,noResults:!0,current:0,items:[]}},computed:{primitiveData:function(){function t(t,e){var n=t.join(" ");return e.reduce((function(t,e){var i=n.match(e);return t+(i?i.length:0)}),0)}if(this.value.length<2||!this.data)return[];var e=[],n=this.value.split(" ").filter((function(t){return""!==t})).map((function(t){return t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})).map((function(t){return new RegExp(t,"ig")}));return this.data.forEach((function(i){var o=i.headings,s=i.src,a=i.title,l=i.headingKeywords,c=i.frontmatterKeywords||"",u=a||s.substring(0,s.lastIndexOf(".")),d=t([u,c].concat(_n(Object.values(o)),_n(Object.values(l))),n);if(d>0){var h=[];Object.entries(o).forEach((function(e,i){var o=r(e,2),a=o[0],d=o[1],p=n.some((function(t){return t.test(d)})),f=l[a]&&l[a].some((function(t){return n.some((function(e){return e.test(t)}))}));if(p||f){var v=t([d].concat(_n(l[a]||[])),n);(0!==i||d!==u||c.length)&&h.push({heading:{id:a,text:d},keywords:l[a],src:s,totalMatches:v})}})),h.sort((function(t,e){return e.totalMatches-t.totalMatches})),e.push({headings:h,keywords:c,src:s,title:u,totalMatches:d})}})),e.sort((function(t,e){return e.totalMatches-t.totalMatches})).flatMap((function(t){return t.headings?[t].concat(_n(t.headings)):t}))},dropdownMenuClasses:function(){return["dropdown-menu","search-dropdown-menu",{show:this.showDropdown},{"d-none":!this.showDropdown},{"dropdown-menu-end":this.menuAlignRight}]}},methods:{update:function(){return this.value?(this.data&&(this.items=this.primitiveData,this.showDropdown=this.items.length>0),this.async&&this.query(),!0):(this.reset(),!1)},query:function(t,e){var n,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:100;function o(t){return/^[0-9]+$/.test(t)?Number(t)||1:null}return function(){for(var r=this,s=arguments.length,a=new Array(s),l=0;l0&&(this.current-=1,this.scrollListView())},scrollListView:function(){var t=this.$refs.dropdown,e=t.children[this.current],n=t.scrollTop,i=n+t.clientHeight,o=e.offsetTop+e.offsetHeight;e.offsetTopi&&(t.scrollTop=o-t.clientHeight)}},components:{searchbarPageItem:mi}},pi,[],!1,null,"2955e59c",null);gi.options.__file="vue-components/src/Searchbar.vue";const yi=gi.exports;var wi=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"tab-pane active printable-tab-pane",class:{"tab-pane-hide":!this.show},attrs:{role:"tabpanel"}},[e("div",{staticClass:"nav-tabs printable-tab-header"},[e("div",{ref:"header",staticClass:"nav-link active"},[this._t("header")],2)]),this._v(" "),this._t("default"),this._v(" "),e("hr")],2)};wi._withStripped=!0;var bi=We({props:{header:{type:String,default:""},disabled:{type:[Boolean,String],default:!1}},computed:{headerRendered:function(){return this.$refs.header.innerHTML},active:function(){return this._tabset.show===this},index:function(){return this._tabset.tabs.indexOf(this)},show:function(){return this._tabset&&this._tabset.show===this},disabledBool:function(){return je(this.disabled)}},created:function(){this._ingroup=this.$parent&&this.$parent._tabgroup;for(var t=this;t&&!0!==t._tabset&&t.$parent;)t=t.$parent;t._tabset?(t.tabs.push(this),this._ingroup?~t.headers.indexOf(this.$parent)||t.headers.push(this.$parent):t.headers.push(this),this._tabset=t):this._tabset={},this._ingroup&&this.$parent.tabs.push(this)},beforeDestroy:function(){if(this._tabset.activeNumber===this.index&&(this._tabset.activeNumber=0),this._ingroup){var t=this.$parent.tabs.indexOf(this);this.$parent.tabs.splice(t,1)}this._tabset.tabs.splice(this.index,1)}},wi,[],!1,null,"430db186",null);bi.options.__file="vue-components/src/Tab.vue";const _i=bi.exports;var Si=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"printable-tab-group"},[e("div",{ref:"header",staticClass:"printable-tab-group-header"},[this._t("header")],2),this._v(" "),this._t("default")],2)};Si._withStripped=!0;var xi=We({props:{disabled:{type:[Boolean,String],default:!1},header:{type:String,default:""}},data:function(){return{tabs:[],show:!1}},computed:{active:function(){return~this.tabs.indexOf(this._tabset.show)},headerRendered:function(){return this.$refs.header.innerHTML},disabledBool:function(){return Re(this.disabled)}},created:function(){this._tabgroup=!0;for(var t=this.$parent&&!0===this.$parent._tabset?this.$parent:{};t&&!t._tabset&&t.$parent;)t=t.$parent;t._tabset?this._tabset=t:(this._tabset={},this.show=!0)},methods:{blur:function(){this.show=!1},toggle:function(){this.show=!this.show}}},Si,[],!1,null,"4ad59749",null);xi.options.__file="vue-components/src/TabGroup.vue";const Ci=xi.exports;var $i=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:[t.addClass,"printable-tabs"]},[n("ul",{staticClass:"nav nav-tabs d-print-none",class:t.getNavStyleClass,attrs:{role:"tablist"}},[t._l(t.headers,(function(e,i){return[e._tabgroup?n("dropdown",{key:i,staticClass:"nav-item nav-link",class:{active:e.active},attrs:{header:e.headerRendered,disabled:e.disabled}},t._l(e.tabs,(function(e,i){return n("li",{key:i},[n("a",{staticClass:"nav-link",class:{disabled:e.disabled},attrs:{href:"#"},domProps:{innerHTML:t._s(e.headerRendered)},on:{click:function(n){return n.preventDefault(),t.select(e)}}})])})),0):n("li",{key:i,staticClass:"nav-item",on:{click:function(n){return n.preventDefault(),t.select(e)}}},[n("a",{staticClass:"nav-link",class:{active:e.active,disabled:e.disabledBool},attrs:{href:"#"}},[n("span",{domProps:{innerHTML:t._s(e.headerRendered)}})])])]}))],2),t._v(" "),n("div",{ref:"tab-content",staticClass:"tab-content"},[t._t("default")],2)])};$i._withStripped=!0;var ki=We({components:{dropdown:wn},props:{navStyle:{type:String,default:"tabs"},active:{type:String,default:"0"},addClass:{type:String,default:""}},data:function(){return{show:null,headers:[],activeNumber:Ie(this.active),tabs:[]}},created:function(){this._tabset=!0},computed:{getNavStyleClass:function(){return"nav-".concat(this.navStyle)}},watch:{activeNumber:function(t){this.show=this.tabs[t]}},mounted:function(){this.show=this.tabs[this.activeNumber]},methods:{select:function(t){t.disabled||(this.activeNumber=t.index)}}},$i,[],!1,null,"3b6be04c",null);ki.options.__file="vue-components/src/Tabset.vue";const Ti=ki.exports;var Ei=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:["thumb-wrapper",{"thumb-circle":t.circle},t.addClass],style:[t.getBorder,t.getFontSize,t.getFontColor,t.getBgColor]},[t.hasSrc?n("img",{ref:"pic",staticClass:"thumb-image",attrs:{src:t.src,width:t.computedWidth,height:t.computedHeight,alt:t.alt},on:{"~load":function(e){return t.computeImgSize.apply(null,arguments)}}}):t._e(),t._v(" "),t._t("default")],2)};Ei._withStripped=!0;var Oi=We({props:{circle:{type:Boolean,default:!1},addClass:{type:String,default:""},alt:{type:String,default:""},background:{type:String,default:""},border:{type:String,default:""},fontColor:{type:String,default:""},fontSize:{type:String,default:""},size:{type:String,default:""},src:{type:String,default:null},text:{type:String,default:""}},computed:{getBorder:function(){return""===this.border?{}:{border:this.border}},getFontSize:function(){var t=this.imageSize/2,e=this.fontSize;return{"font-size":"".concat(void 0===e||""===e?t:e,"px")}},getFontColor:function(){return""===this.fontColor?{}:{color:this.fontColor}},getBgColor:function(){return""===this.background?{}:{background:this.background}},hasSrc:function(){return void 0!==this.src&&""!==this.src},imageSize:function(){return this.size||100}},data:function(){return{computedWidth:"",computedHeight:""}},mounted:function(){var t=this.$el;t.style.width="".concat(this.imageSize,"px"),t.style.height="".concat(this.imageSize,"px"),t.style.lineHeight="".concat(this.imageSize,"px")},methods:{computeImgSize:function(){var t=this.$refs.pic,e=t.naturalHeight,n=t.naturalWidth,i=Math.min(e,n),o=this.imageSize/i;this.computedWidth=n*o,this.computedHeight=e*o}}},Ei,[],!1,null,null,null);Oi.options.__file="vue-components/src/Thumbnail.vue";const Pi=Oi.exports;var Bi=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:"click"===t.trigger?"trigger-click":"trigger",attrs:{tabindex:"0"},on:t._d({},[t.triggerEventType,function(e){return e.stopPropagation(),t.toggle()}])},["popover"===t.popoverOrTooltipType?n("v-popover",{attrs:{"auto-hide":!t.isInput,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,placement:t.placement,delay:0,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[n("div",{staticClass:"popover-container"},[n("portal-target",{attrs:{name:"popover:"+t.target}})],1)]},proxy:!0}],null,!1,1583262462)},[t.isInput?t._t("default"):n("span",{on:{click:function(t){t.stopPropagation()}}},[t._t("default")],2)],2):"tooltip"===t.popoverOrTooltipType?n("v-tooltip",{attrs:{"auto-hide":!t.isInput,placement:t.placement,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,delay:0,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[n("portal-target",{attrs:{name:"tooltip:"+t.target}})]},proxy:!0}])},[t.isInput?t._t("default"):n("span",{on:{click:function(t){t.stopPropagation()}}},[t._t("default")],2)],2):n("span",[t._t("default")],2)],1)};Bi._withStripped=!0;var Ni=i(383);function Ai(t){return(Ai="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function Li(t,e){for(var n=0;nt.length)&&(e=t.length);for(var n=0,i=new Array(e);n1),to=[],eo=!1,no=0,io=-1,oo=function(t){return to.some((function(){return function(t,e){var n=!1;return function(t){for(var e=[];t;){if(e.push(t),t.classList.contains("vfm"))return e;t=t.parentElement}return e}(t).forEach((function(t){(function(t){if(!t||t.nodeType!==Node.ELEMENT_NODE)return!1;var e=window.getComputedStyle(t);return["auto","scroll"].includes(e.overflowY)&&t.scrollHeight>t.clientHeight})(t)&&function(t,e){return!(0===t.scrollTop&&e<0||t.scrollTop+t.clientHeight+e>=t.scrollHeight&&e>0)}(t,e)&&(n=!0)})),n}(t,-no)}))},ro=function(t){var e=t||window.event;return!!oo(e.target)||e.touches.length>1||(e.preventDefault&&e.preventDefault(),!1)},so=function(t){t?(to=to.filter((function(e){return e.targetElement!==t})),Zi?(t.ontouchstart=null,t.ontouchmove=null,eo&&0===to.length&&(document.removeEventListener("touchmove",ro,Ki?{passive:!1}:void 0),eo=!1)):to.length||(void 0!==Gi&&(document.body.style.paddingRight=Gi,Gi=void 0),void 0!==Yi&&(document.body.style.overflow=Yi,Yi=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")},ao=function(){},lo="enter",co="entering",uo="leave",ho="leavng",po={type:[String,Object,Array],default:""},fo={type:[Object,Array],default:function(){return{}}},vo={t:"ns-resize",tr:"nesw-resize",r:"ew-resize",br:"nwse-resize",b:"ns-resize",bl:"nesw-resize",l:"ew-resize",tl:"nwse-resize"},mo={props:{name:{type:String,default:null},value:{type:Boolean,default:!1},ssr:{type:Boolean,default:!0},classes:po,overlayClass:po,contentClass:po,styles:fo,overlayStyle:fo,contentStyle:fo,lockScroll:{type:Boolean,default:!0},hideOverlay:{type:Boolean,default:!1},clickToClose:{type:Boolean,default:!0},escToClose:{type:Boolean,default:!1},preventClick:{type:Boolean,default:!1},attach:{type:null,default:!1,validator:function(t){var e=Ai(t);return"boolean"===e||"string"===e||t.nodeType===Node.ELEMENT_NODE}},transition:{type:[String,Object],default:"vfm"},overlayTransition:{type:[String,Object],default:"vfm"},zIndexAuto:{type:Boolean,default:!0},zIndexBase:{type:[String,Number],default:1e3},zIndex:{type:[Boolean,String,Number],default:!1},focusRetain:{type:Boolean,default:!0},focusTrap:{type:Boolean,default:!1},fitParent:{type:Boolean,default:!0},drag:{type:Boolean,default:!1},dragSelector:{type:String,default:""},keepChangedStyle:{type:Boolean,default:!1},resize:{type:Boolean,default:!1},resizeDirections:{type:Array,default:function(){return["t","tr","r","br","b","bl","l","tl"]},validator:function(t){return["t","tr","r","br","b","bl","l","tl"].filter((function(e){return-1!==t.indexOf(e)})).length===t.length}},minWidth:{type:Number,default:0},minHeight:{type:Number,default:0},maxWidth:{type:Number,default:1/0},maxHeight:{type:Number,default:1/0}},data:function(){return{modalStackIndex:null,visible:!1,visibility:{modal:!1,overlay:!1,resize:!1},overlayTransitionState:null,modalTransitionState:null,stopEvent:!1,params:{},dragResizeStyle:{},resolveToggle:ao,rejectToggle:ao,state:null,lastMousedownEl:null}},computed:{isComponentReadyToBeDestroyed:function(){return(this.hideOverlay||this.overlayTransitionState===uo)&&this.modalTransitionState===uo},calculateZIndex:function(){return!1===this.zIndex?!!this.zIndexAuto&&+this.zIndexBase+2*(this.modalStackIndex||0):this.zIndex},bindStyle:function(){return Hi({},!1!==this.calculateZIndex&&{zIndex:this.calculateZIndex})},bindContentStyle:function(){var t=[this.dragResizeStyle];return Array.isArray(this.contentStyle)?t.push.apply(t,Di(this.contentStyle)):t.push(this.contentStyle),t},computedTransition:function(){return"string"==typeof this.transition?{name:this.transition}:Hi({},this.transition)},computedOverlayTransition:function(){return"string"==typeof this.overlayTransition?{name:this.overlayTransition}:Hi({},this.overlayTransition)}},watch:{value:function(t){if(this.stopEvent)this.stopEvent=!1;else if(this.mounted(),!t){if(this.emitEvent("before-close",!0))return void this.rejectToggle("hide");this.close()}},lockScroll:"handleLockScroll",hideOverlay:function(t){this.value&&!t&&(this.visibility.overlay=!0)},attach:"mounted",isComponentReadyToBeDestroyed:function(t){t&&(this.visible=!1)},drag:function(t){this.visible&&(t?this.addDragDown():this.removeDragDown())},resize:function(t){this.visible&&(t?this.addResizeDown():this.removeResizeDown())},keepChangedStyle:function(t){t||(this.dragResizeStyle={})}},created:function(){this.api.modals.push(this)},mounted:function(){this.$focusTrap=new Ii,this.mounted()},beforeDestroy:function(){var t,e=this;this.close(),this.lockScroll&&this.$refs.vfmContainer&&so(this.$refs.vfmContainer),null==this||null===(t=this.$el)||void 0===t||t.remove();var n=this.api.modals.findIndex((function(t){return t===e}));this.api.modals.splice(n,1)},methods:{mounted:function(){var t=this;if(this.value){if(this.emitEvent("before-open",!1))return void this.rejectToggle("show");var e=this.getAttachElement();if(e||!1===this.attach){!1!==this.attach&&e.appendChild(this.$el);var n=this.api.openedModals.findIndex((function(e){return e===t}));-1!==n&&this.api.openedModals.splice(n,1),this.api.openedModals.push(this),this.modalStackIndex=this.api.openedModals.length-1,this.handleLockScroll(),this.api.openedModals.filter((function(e){return e!==t})).forEach((function(t,n){t.getAttachElement()===e&&(t.modalStackIndex=n,t.visibility.overlay=!1)})),this.visible=!0,this.$nextTick((function(){t.startTransitionEnter()}))}else!1!==e&&console.warn("Unable to locate target ".concat(this.attach))}},close:function(){var t=this,e=this.api.openedModals.findIndex((function(e){return e===t}));if(-1!==e&&this.api.openedModals.splice(e,1),this.api.openedModals.length>0){var n=this.api.openedModals[this.api.openedModals.length-1];(n.focusRetain||n.focusTrap)&&n.$refs.vfmContainer.focus(),!n.hideOverlay&&(n.visibility.overlay=!0)}this.drag&&this.removeDragDown(),this.resize&&this.removeResizeDown(),this.state=null,this.startTransitionLeave()},startTransitionEnter:function(){this.visibility.overlay=!0,this.visibility.modal=!0},startTransitionLeave:function(){this.visibility.overlay=!1,this.visibility.modal=!1},handleLockScroll:function(){var t=this;this.value&&this.$nextTick((function(){t.lockScroll?function(t,e){if(t){if(!to.some((function(e){return e.targetElement===t}))){var n={targetElement:t,options:e||{}};to=[].concat(Di(to),[n]),Zi?(t.ontouchstart=function(t){1===t.targetTouches.length&&(io=t.targetTouches[0].clientY)},t.ontouchmove=function(e){1===e.targetTouches.length&&function(t,e){no=t.targetTouches[0].clientY-io,!oo(t.target)&&(e&&0===e.scrollTop&&no>0||function(t){return!!t&&t.scrollHeight-t.scrollTop<=t.clientHeight}(e)&&no<0?ro(t):t.stopPropagation())}(e,t)},eo||(document.addEventListener("touchmove",ro,Ki?{passive:!1}:void 0),eo=!0)):function(t){if(void 0===Gi){var e=!!t&&!0===t.reserveScrollBarGap,n=window.innerWidth-document.documentElement.clientWidth;if(e&&n>0){var i=parseInt(getComputedStyle(document.body).getPropertyValue("padding-right"),10);Gi=document.body.style.paddingRight,document.body.style.paddingRight="".concat(i+n,"px")}}void 0===Yi&&(Yi=document.body.style.overflow,document.body.style.overflow="hidden")}(e)}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")}(t.$refs.vfmContainer,{reserveScrollBarGap:!0}):so(t.$refs.vfmContainer)}))},getAttachElement:function(){return!1!==this.attach&&("string"==typeof this.attach?!!window&&window.document.querySelector(this.attach):this.attach)},beforeOverlayEnter:function(){this.overlayTransitionState=co},afterOverlayEnter:function(){this.overlayTransitionState=lo},beforeOverlayLeave:function(){this.overlayTransitionState=ho},afterOverlayLeave:function(){this.overlayTransitionState=uo},beforeModalEnter:function(){this.modalTransitionState=co},afterModalEnter:function(){this.modalTransitionState=lo,(this.focusRetain||this.focusTrap)&&this.$refs.vfmContainer.focus(),this.focusTrap&&this.$focusTrap.enable(this.$refs.vfmContainer),this.drag&&this.addDragDown(),this.resize&&this.addResizeDown(),this.$emit("opened",this.createModalEvent({type:"opened"})),this.resolveToggle("show")},beforeModalLeave:function(){this.modalTransitionState=ho,this.$focusTrap.enabled()&&this.$focusTrap.disable()},afterModalLeave:function(){this.modalTransitionState=uo,this.modalStackIndex=null,this.lockScroll&&so(this.$refs.vfmContainer),this.keepChangedStyle||(this.dragResizeStyle={});var t=!1,e=this.createModalEvent({type:"closed",stop:function(){t=!0}});this.$emit("closed",e),this.resolveToggle("hide"),t||(this.params={})},onMousedown:function(t){this.lastMousedownEl=null==t?void 0:t.target},onMouseupContainer:function(){this.lastMousedownEl===this.$refs.vfmContainer&&"resize:move"!==this.state&&(this.$emit("click-outside",this.createModalEvent({type:"click-outside"})),this.clickToClose&&this.$emit("input",!1))},onEsc:function(){this.visible&&this.escToClose&&this.$emit("input",!1)},createModalEvent:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return Hi({ref:this},t)},emitEvent:function(t,e){var n=!1,i=this.createModalEvent({type:t,stop:function(){n=!0}});return this.$emit(t,i),!!n&&(this.stopEvent=!0,this.$emit("input",e),!0)},emitState:function(t,e,n){this.state="".concat(e,":").concat(n),this.$emit(this.state,t)},toggle:function(t,e){var n=arguments,i=this;return new Promise((function(o,r){i.resolveToggle=function(t){o(t),i.resolveToggle=ao},i.rejectToggle=function(t){r(t),i.rejectToggle=ao};var s="boolean"==typeof t?t:!i.value;s&&2===n.length&&(i.params=e),i.$emit("input",s)}))},pointerDown:function(t){var e=this;t.stopPropagation();var n,i="resize",o="drag",r=this.$refs,s=r.vfmContainer,a=r.vfmContent,l=t.target.getAttribute("direction");if(l)n=i;else{if(!function(t,e,n){return""===n||Di(e.querySelectorAll(n)).includes(t.target)}(t,a,this.dragSelector))return;n=o}this.emitState(t,n,"start");var c,u,d,h,p=qi(t),f=s.getBoundingClientRect(),v=a.getBoundingClientRect(),m="absolute"===window.getComputedStyle(a).position,g=Fi(this.dragResizeStyle.top),y=Fi(this.dragResizeStyle.left),w=function(){if(e.fitParent){var t={absolute:function(){return{minTop:0,minLeft:0,maxTop:f.height-v.height,maxLeft:f.width-v.width}},relative:function(){return{minTop:g+f.top-v.top,minLeft:y+f.left-v.left,maxTop:g+f.bottom-v.bottom,maxLeft:y+f.right-v.right}}};return m?t.absolute():t.relative()}return{}}(),b=n===i&&(c=document.body,u="cursor",d=vo[l],h=c.style[u],c.style[u]=d,function(){c.style[u]=h}),_=function(t){t.stopPropagation(),e.emitState(t,n,"move");var r,s,a=qi(t),c={x:a.x-p.x,y:a.y-p.y};n===i&&(c=e.getResizeOffset(l,c,f,v,m)),m?(r=v.top-f.top+c.y,s=v.left-f.left+c.x):(r=g+c.y,s=y+c.x),n===o&&e.fitParent&&(r=Wi(w.minTop,r,w.maxTop),s=Wi(w.minLeft,s,w.maxLeft));var u=Hi(Hi(Hi({position:"relative",top:r+"px",left:s+"px",margin:"unset",touchAction:"none"},m&&{position:"absolute",transform:"unset",width:v.width+"px",height:v.height+"px"}),c.width&&{width:c.width+"px"}),c.height&&{height:c.height+"px"});e.dragResizeStyle=Hi(Hi({},e.dragResizeStyle),u)};Qi("move",document,_),Qi("up",document,(function t(o){o.stopPropagation(),n===i&&b&&b(),setTimeout((function(){e.emitState(o,n,"end")})),Ui("move",document,_),Ui("up",document,t)}))},addDragDown:function(){Qi("down",this.$refs.vfmContent,this.pointerDown),this.dragResizeStyle.touchAction="none"},removeDragDown:function(){Ui("down",this.$refs.vfmContent,this.pointerDown)},addResizeDown:function(){var t=this;this.visibility.resize=!0,this.$nextTick((function(){Qi("down",t.$refs.vfmResize,t.pointerDown)}))},removeResizeDown:function(){Ui("down",this.$refs.vfmResize,this.pointerDown),this.visibility.resize=!1},getResizeOffset:function(t,e,n,i,o){var r=this,s=function(t,e,o,s){var a,l=i[e],c=n[t]-i[t],u=(a=e).charAt(0).toUpperCase()+a.slice(1);return{axis:o,edgeName:e,min:s?c:-l,max:s?l:c,minEdge:r["min".concat(u)],maxEdge:r["max".concat(u)],getEdge:function(t){return i[e]-t*(s?1:-1)},getOffsetAxis:function(t,n){var o=i[e]-t;return n?s?o:0:(s?1:-1)*o/2}}},a={t:["top","height","y",!0],b:["bottom","height","y",!1],l:["left","width","x",!0],r:["right","width","x",!1]},l={x:0,y:0};return t.split("").forEach((function(t){var n=s.apply(void 0,Di(a[t]));l=Hi(Hi({},l),function(t){var n,i=e[t.axis];i=r.fitParent?Wi(t.min,i,t.max):i;var s=Wi(t.minEdge,t.getEdge(i),t.maxEdge);return i=t.getOffsetAxis(s,o),zi(n={},t.edgeName,s),zi(n,t.axis,i),n}(n))})),l}}},go=function(t,e,n,i,o,r,s,a,l,c){"boolean"!=typeof s&&(l=a,a=s,s=!1);var u,d="function"==typeof n?n.options:n;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),r?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},d._ssrRegister=u):e&&(u=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),u)if(d.functional){var h=d.render;d.render=function(t,e){return u.call(e),h(t,e)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,u):[u]}return n},yo="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),wo={},bo=go({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.ssr||t.visible?n("div",{directives:[{name:"show",rawName:"v-show",value:!t.ssr||t.visible,expression:"!ssr || visible"}],staticClass:"vfm vfm--inset",class:[!1===t.attach?"vfm--fixed":"vfm--absolute",{"vfm--prevent-none":t.preventClick}],style:t.bindStyle,on:{keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"esc",27,e.key,["Esc","Escape"])?null:t.onEsc.apply(null,arguments)}}},[n("transition",t._b({ref:"vfmOverlayTransition",on:{"before-enter":t.beforeOverlayEnter,"after-enter":t.afterOverlayEnter,"before-leave":t.beforeOverlayLeave,"after-leave":t.afterOverlayLeave}},"transition",t.computedOverlayTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:!t.hideOverlay&&t.visibility.overlay,expression:"!hideOverlay && visibility.overlay"}],staticClass:"vfm__overlay vfm--overlay vfm--absolute vfm--inset",class:t.overlayClass,style:t.overlayStyle})]),t._v(" "),n("transition",t._b({ref:"vfmTransition",on:{"before-enter":t.beforeModalEnter,"after-enter":t.afterModalEnter,"before-leave":t.beforeModalLeave,"after-leave":t.afterModalLeave}},"transition",t.computedTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:t.visibility.modal,expression:"visibility.modal"}],ref:"vfmContainer",staticClass:"vfm__container vfm--absolute vfm--inset vfm--outline-none",class:t.classes,style:t.styles,attrs:{"aria-expanded":t.visibility.modal.toString(),role:"dialog","aria-modal":"true",tabindex:"-1"},on:{mouseup:function(e){return e.target!==e.currentTarget?null:t.onMouseupContainer.apply(null,arguments)},mousedown:function(e){return e.target!==e.currentTarget?null:t.onMousedown.apply(null,arguments)}}},[n("div",{ref:"vfmContent",staticClass:"vfm__content",class:[t.contentClass,{"vfm--prevent-auto":t.preventClick}],style:t.bindContentStyle,on:{mousedown:function(e){return t.onMousedown(null)}}},[t._t("default",null,{params:t.params,close:function(){return t.$emit("input",!1)}}),t._v(" "),t.visibility.resize&&t.visibility.modal?n("div",{ref:"vfmResize",staticClass:"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none"},t._l(t.resizeDirections,(function(t){return n("div",{key:t,staticClass:"vfm--absolute vfm--prevent-auto",class:"vfm--resize-"+t,attrs:{direction:t}})})),0):t._e()],2)])])],1):t._e()},staticRenderFns:[]},(function(t){t&&t("data-v-47686880_0",{source:".vfm--fixed[data-v-47686880]{position:fixed}.vfm--absolute[data-v-47686880]{position:absolute}.vfm--inset[data-v-47686880]{top:0;right:0;bottom:0;left:0}.vfm--overlay[data-v-47686880]{background-color:rgba(0,0,0,.5)}.vfm--prevent-none[data-v-47686880]{pointer-events:none}.vfm--prevent-auto[data-v-47686880]{pointer-events:auto}.vfm--outline-none[data-v-47686880]:focus{outline:0}.vfm-enter-active[data-v-47686880],.vfm-leave-active[data-v-47686880]{transition:opacity .2s}.vfm-enter[data-v-47686880],.vfm-leave-to[data-v-47686880]{opacity:0}.vfm--touch-none[data-v-47686880]{touch-action:none}.vfm--select-none[data-v-47686880]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vfm--resize-bl[data-v-47686880],.vfm--resize-br[data-v-47686880],.vfm--resize-tl[data-v-47686880],.vfm--resize-tr[data-v-47686880]{width:12px;height:12px;z-index:10}.vfm--resize-t[data-v-47686880]{top:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-tr[data-v-47686880]{top:-6px;right:-6px;cursor:nesw-resize}.vfm--resize-r[data-v-47686880]{top:0;right:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-br[data-v-47686880]{bottom:-6px;right:-6px;cursor:nwse-resize}.vfm--resize-b[data-v-47686880]{bottom:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-bl[data-v-47686880]{bottom:-6px;left:-6px;cursor:nesw-resize}.vfm--resize-l[data-v-47686880]{top:0;left:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-tl[data-v-47686880]{top:-6px;left:-6px;cursor:nwse-resize}",map:void 0,media:void 0})}),mo,"data-v-47686880",!1,void 0,!1,(function(t){return function(t,e){return function(t,e){var n=yo?e.media||"default":t,i=wo[n]||(wo[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.ids.add(t);var o=e.source;if(e.map&&(o+="\n/*# sourceURL="+e.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===Ji&&(Ji=document.head||document.getElementsByTagName("head")[0]),Ji.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var r=i.ids.size-1,s=document.createTextNode(o),a=i.element.childNodes;a[r]&&i.element.removeChild(a[r]),a.length?i.element.insertBefore(s,a[r]):i.element.appendChild(s)}}}(t,e)}}),void 0,void 0),_o=go({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"modals-container"},t._l(t.api.dynamicModals,(function(e,i){return n(e.component,t._g(t._b({key:e.id,tag:"component",on:{closed:function(e){return t.slice(i)},"before-open":function(n){return t.beforeOpen(n,e,i)},opened:e.opened},scopedSlots:t._u([t._l(e.slots,(function(e,i){return{key:i,fn:function(){return[t.isString(e)?n("div",{key:i,domProps:{innerHTML:t._s(e)}}):n(e.component,t._g(t._b({key:i,tag:"component"},"component",e.bind,!1),e.on))]},proxy:!0}}))],null,!0),model:{value:e.value,callback:function(n){t.$set(e,"value",n)},expression:"modal.value"}},"component",e.bind,!1),e.on))})),1)},staticRenderFns:[]},void 0,{props:{},methods:{slice:function(t){this.api.dynamicModals.splice(t,1)},beforeOpen:function(t,e,n){var i=this;t.ref.params=e.params,this.$nextTick((function(){e.value||(i.slice(n),e.reject("show"))}))},isString:function(t){return"string"==typeof t}}},void 0,!1,void 0,!1,void 0,void 0,void 0);function So(t,e){var n=Hi(Hi({},t),{},{props:Hi({},t.props)});return Object.assign(n.props,{api:{type:Object,default:function(){return e}}}),n}var xo=0,Co=function(){var t,e,n=(e=null,nt().observable({show:function(t){for(var n=this,i=arguments.length,o=new Array(i>1?i-1:0),r=1;r1?e-1:0),i=1;i1&&void 0!==arguments[1]?arguments[1]:{},n=0===xo?$o:Co(),i=n.$vfm,o=n.VueFinalModal,r=n.ModalsContainer;xo+=1;var s=e.key||"$vfm",a=e.componentName||"VueFinalModal",l=e.dynamicContainerName||"ModalsContainer";t.prototype[s]=i,t.component(a,o),t.component(l,r)}),Oo=function(t){return{install:function(e,n){var i=Object.assign({},t,n);Eo(e,i)}}};Oo.install=Eo;var Po=We({name:"Trigger",components:{PortalTarget:Ni.YC},props:{for:{type:String,default:""},trigger:{type:String,default:"hover focus"},placement:{type:String,default:"top"}},data:function(){return{popoverOrTooltipType:void 0,isInput:!1}},methods:{toggle:function(){this.for&&ko.show(this.for)}},computed:{triggerEventType:function(){return"click"===this.trigger||"focus"===this.trigger?this.trigger:"mouseenter"},triggers:function(){return this.trigger.split(" ")},target:function(){return this.for}},mounted:function(){if(this.isInput=this.$slots.default&&this.$slots.default.some((function(t){return"input"===t.tag})),this.for&&void 0===this.popoverOrTooltipType){var t=document.getElementById(this.for);if(!t)return;this.popoverOrTooltipType=t.dataset.mbComponentType}}},Bi,[],!1,null,null,null);Po.options.__file="vue-components/src/Trigger.vue";const Bo=Po.exports;var No=function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"site-nav-root"},[this._t("default")],2)};No._withStripped=!0;var Ao=We({name:"SiteNav",mounted:function(){var t=this,e=Sn(new URL(window.location.href).pathname);this.$el.querySelectorAll("a[href]").forEach((function(n){var i=Sn(n.getAttribute("href"));if(e===i){n.classList.add("current");for(var o=n.parentElement;o&&o!==t.$el;)"ul"===o.tagName.toLowerCase()&&o.classList.contains("site-nav-dropdown-container")&&o.classList.add("site-nav-dropdown-container-open"),o=o.parentElement}}))}},No,[],!1,null,null,null);Ao.options.__file="vue-components/src/SiteNav.vue";const Lo=Ao.exports;var zo=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("span",{class:[{"nav-menu-close-icon":t.show}],on:{click:function(e){return t.toggleNavMenu(void 0)}}},[t._t("navMenuIcon")],2),t._v(" "),n("div",{ref:"navMenuContainer",class:["nav-menu",{"nav-menu-open":t.show}],style:t.navbarHeight,on:{click:t.toggleNavMenu}},[n("portal-target",{attrs:{name:t.portalName,multiple:""}})],1)])};zo._withStripped=!0;var Mo={};var Ho=We({components:{PortalTarget:Ni.YC},props:{type:{type:String,default:null},portalName:{type:String,default:null}},inject:{toggleLowerNavbar:{default:void 0}},data:function(){return{show:!1,navbarHeight:""}},methods:{toggleNavMenu:function(t){var e,n=this;t&&"a"===t.target.tagName.toLowerCase()||!t&&this.show?(document.body.style.removeProperty("overflow"),this.show=!1):(Mo[e="closeOverlay"]&&Mo[e].forEach((function(t){return t()})),document.body.style.overflow="hidden",this.show=!0,this.$nextTick((function(){var t=n.$refs.navMenuContainer,e=window.innerHeight-t.getBoundingClientRect().top;n.navbarHeight="height: ".concat(e,"px")})))}},mounted:function(){var t,e,n=this;this.toggleLowerNavbar&&this.toggleLowerNavbar(),e=function(){n.show=!1},Mo[t="closeOverlay"]||(Mo[t]=[]),Mo[t].push(e)}},zo,[],!1,null,"032a677e",null);Ho.options.__file="vue-components/src/Overlay.vue";const Do=Ho.exports;var Ro=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(t.tagName,t._b({tag:"component"},"component",t.$attrs,!1),[t._t("default"),t._v(" "),t.enablePortal?n("portal",{attrs:{to:t.to}},[n(t.tagName,t._b({tag:"component",class:[t.$vnode.data.staticClass||"","mb-mobile-nav"],style:t.$vnode.data.staticStyle},"component",t.$attrs,!1),[t._t("default")],2)],1):t._e()],2)};Ro._withStripped=!0;var jo=We({name:"OverlaySource",components:{Portal:Ni.h_},props:{to:{type:String,default:void 0},tagName:{type:String,default:void 0}},data:function(){return{enablePortal:!1}},mounted:function(){this.enablePortal=!0}},Ro,[],!1,null,"e8c82f88",null);jo.options.__file="vue-components/src/OverlaySource.vue";const Io=jo.exports;var qo=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:"click"===t.trigger?"trigger-click":"trigger",attrs:{"data-mb-component-type":"popover",tabindex:"0"}},[t.targetEl.id?n("portal",{attrs:{to:"popover:"+t.targetEl.id}},[t.hasHeader?n("h3",{staticClass:"popover-header"},[t._t("header")],2):t._e(),t._v(" "),n("div",{staticClass:"popover-body"},[t._t("content")],2)]):t._e(),t._v(" "),t.isMounted?n("v-popover",{attrs:{"auto-hide":!t.isInput,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,placement:t.placement,delay:0,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[n("div",{staticClass:"popover-container"},[t.hasHeader?n("h3",{staticClass:"popover-header"},[t._t("header")],2):t._e(),t._v(" "),n("div",{staticClass:"popover-body"},[t._t("content")],2)])]},proxy:!0}],null,!0)},[t.isInput?t._t("default"):n("span",{on:{click:function(t){t.stopPropagation()}}},[t._t("default")],2)],2):t._e()],1)};qo._withStripped=!0;var Wo=We({name:"Popover",components:{Portal:Ni.h_},props:{trigger:{type:String,default:"hover focus"},placement:{type:String,default:"top"}},data:function(){return{targetEl:{},isMounted:!1}},computed:{triggers:function(){return this.trigger.split(" ")},hasHeader:function(){return!!this.$slots.header}},mounted:function(){this.targetEl=this.$el,this.isInput=this.$slots.default&&this.$slots.default.some((function(t){return"input"===t.tag})),this.isMounted=!0}},qo,[],!1,null,null,null);Wo.options.__file="vue-components/src/Popover.vue";const Fo=Wo.exports;var Vo=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:"click"===t.trigger?"trigger-click":"trigger",attrs:{"data-mb-component-type":"tooltip",tabindex:"0"}},[t.targetEl.id?n("portal",{attrs:{to:"tooltip:"+t.targetEl.id}},[t._t("content")],2):t._e(),t._v(" "),t.isMounted?n("v-tooltip",{attrs:{"auto-hide":!t.isInput,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,placement:t.placement,delay:0,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[t._t("content")]},proxy:!0}],null,!0)},[t._v(" "),t.isInput?t._t("default"):n("span",{on:{click:function(t){t.stopPropagation()}}},[t._t("default")],2)],2):t._e()],1)};Vo._withStripped=!0;var Qo=We({name:"Tooltip",components:{Portal:Ni.h_},props:{trigger:{type:String,default:"hover focus"},placement:{type:String,default:"top"}},data:function(){return{targetEl:{},isInput:!1,isMounted:!1}},computed:{triggers:function(){return this.trigger.split(" ")}},mounted:function(){this.targetEl=this.$el,this.isInput=this.$slots.default&&this.$slots.default.some((function(t){return"input"===t.tag})),this.isMounted=!0}},Vo,[],!1,null,null,null);Qo.options.__file="vue-components/src/Tooltip.vue";const Uo=Qo.exports;var Ko=function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isMounted?n("vue-final-modal",{attrs:{ssr:"",name:t.id,classes:"allow-overflow","content-class":["modal-dialog",t.optionalModalSize,t.optionalCentering],"overlay-transition":"none",transition:t.effectClass,"click-to-close":"false"!==t.backdrop,"esc-to-close":"","z-index-base":"2000"},model:{value:t.show,callback:function(e){t.show=e},expression:"show"}},[n("div",{staticClass:"modal-content"},[t.hasHeader?n("div",{staticClass:"modal-header"},[n("h5",{staticClass:"modal-title"},[t._t("header")],2),t._v(" "),n("button",{staticClass:"btn-close",attrs:{type:"button","aria-label":"Close"},on:{click:function(e){return t.close()}}})]):t._e(),t._v(" "),n("div",{staticClass:"modal-body"},[t._t("default")],2),t._v(" "),t.hasFooter||t.hasOk?n("div",{staticClass:"modal-footer"},[t.hasFooter?t._t("footer"):n("button",{staticClass:"btn btn-primary",on:{click:function(e){return t.close()}}},[t._v("\n "+t._s(t.okText)+"\n ")])],2):t._e()])]):t._e()};Ko._withStripped=!0;var Xo=We({name:"Modal",components:{VueFinalModal:To},data:function(){return{show:!1,isMounted:!1,zoomEffect:{"enter-class":"modal-zoom","enter-to-class":"modal-zoom-show","leave-to-class":"modal-zoom","leave-class":"modal-zoom-show"}}},props:{okText:{type:String,default:""},effect:{type:String,default:"zoom"},id:{type:String,default:""},small:{type:Boolean,default:!1},large:{type:Boolean,default:!1},center:{type:Boolean,default:!1},backdrop:{type:String,default:""}},computed:{hasHeader:function(){return!!this.$slots.header},hasFooter:function(){return!!this.$slots.footer},hasOk:function(){return""!==this.okText},optionalModalSize:function(){return this.small||this.large?this.small?"modal-sm":"modal-lg":""},optionalCentering:function(){return this.center?"modal-dialog-centered":""},effectClass:function(){return"zoom"===this.effect?this.zoomEffect:"vfm"}},methods:{close:function(){this.show=!1}},mounted:function(){this.isMounted=!0}},Ko,[],!1,null,null,null);Xo.options.__file="vue-components/src/Modal.vue";var Yo={box:Ve,dropdown:wn,navbar:Pn,panel:Qn,annotate:Xn,aPoint:Jn,pic:ei,quiz:oi,question:ci,qOption:hi,retriever:jn,searchbar:yi,tab:_i,tabGroup:Ci,tabs:Ti,thumbnail:Pi,trigger:Bo,siteNav:Lo,submenu:gn,siteNavButton:$n,pageNavButton:En,overlay:Do,overlaySource:Io,popover:Fo,tooltip:Uo,modal:Xo.exports,VPopover:Le,VTooltip:ze},Go={closeable:Ue()};const Jo={MarkBindVue:{plugin:{install:function(t){Object.keys(Go).forEach((function(e){t.directive(e,Go[e])})),Object.keys(Yo).forEach((function(e){t.component(e,Yo[e])}))}},components:Yo,directives:Go},appFactory:function(){return{data:function(){return{searchData:[]}},methods:{searchCallback:function(t){var e="".concat(baseUrl,"/").concat(t.src.replace(/.md$/,".html")),n=t.heading?"#".concat(t.heading.id):"";window.location="".concat(e).concat(n)}}}}};function Zo(t,e){e.showOrHideButtonTimer=setTimeout((function(){document.body.scrollTop>20||document.documentElement.scrollTop>20?(t.style.display="block",function(t,e){e.lightenButtonTimer=setTimeout((function(){t.classList.contains("lighten")||t.classList.add("lighten")}),1e3)}(t,e)):t.style.display="none"}),100)}function tr(t){var e=document.querySelector("#scroll-top-button");!function(t,e){clearTimeout(e.displayButtonTimer),clearTimeout(e.lightenButtonTimer),t.classList.remove("lighten")}(e,t),Zo(e,t)}window.handleScrollTop=function(){document.body.scrollIntoView({block:"start",behavior:"smooth"})};const er=function(){var t={showOrHideButtonTimer:0,lightenButtonTimer:0};window.addEventListener("scroll",(function(){tr(t)}))};i(330);function nr(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function ir(e){for(var n=1;n767&&i&&c()})).observe(e);var o,s=0,a=window.location.hash,l=function(){if(!(window.innerWidth>767)){if(a!==window.location.hash)return a=window.location.hash,void c();a=window.location.hash;var o=window.pageYOffset;if(!(window.innerHeight+o>=document.body.offsetHeight)){if(o>s){e.style.position="static";var r=e.getBoundingClientRect().top+n;if(e.style.position="sticky",r>0)return;i=!0,t.css("overflow","hidden"),t.addClass("hide-header")}else c();s=o}}};window.addEventListener("scroll",(function(){o&&clearTimeout(o),o=setTimeout(l,20)}))}function c(){i=!1,t.removeClass("hide-header")}}function ar(){document.querySelectorAll("script[style-bypass-vue-compilation]").forEach((function(t){var e=document.createElement("style");e.innerHTML=t.innerHTML,t.parentNode.replaceChild(e,t)})),function(){if(window.location.hash){var t=document.getElementById(window.location.hash.slice(1));t&&(t.scrollIntoView(),window.scrollBy(0,-document.body.style.paddingTop.replace("px","")))}}(),sr()}Vue.use(or.plugin),window.handleSiteNavClick=function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(e){var n=t.getElementsByTagName("a");if(n.length)return void(window.location.href=n[0].href)}var i=t.nextElementSibling,o=t.lastElementChild;i.classList.toggle("site-nav-dropdown-container-open"),o.classList.toggle("site-nav-rotate-icon")},er();const lr={setup:function(){new Vue(ir(ir({render:function(t){return pageVueRenderFn.call(this,t)},staticRenderFns:pageVueStaticRenderFns},rr()),{},{mounted:function(){ar()}})).$mount("#app",!0)},setupWithSearch:function(){new Vue(ir(ir({render:function(t){return pageVueRenderFn.call(this,t)},staticRenderFns:pageVueStaticRenderFns},rr()),{},{mounted:function(){ar(),function(t){jQuery.getJSON("".concat(baseUrl,"/siteData.json")).then((function(e){t.searchData=e.pages}))}(this)}})).$mount("#app",!0)}}})(),o=o.default})()); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("Vue")):"function"==typeof define&&define.amd?define(["Vue"],e):"object"==typeof exports?exports.MarkBind=e(require("Vue")):t.MarkBind=e(t.Vue)}(self,t=>(()=>{var e={605:()=>{function t(){document.querySelectorAll(".".concat("page-nav-clone")).forEach((function(t){t.remove()}))}window.addEventListener("beforeprint",(function(){var e=document.querySelector("#".concat("mb-page-nav")),n=document.querySelectorAll(".".concat("page-nav-print"));e&&n.length>=1&&(t(),n.forEach((function(t){t.appendChild(function(t){var e=t.cloneNode(!0);return e.removeAttribute("id"),e.querySelectorAll("a.active").forEach((function(t){t.classList.remove("active")})),e.classList.add("page-nav-clone"),e}(e))})))})),window.addEventListener("afterprint",(function(){t()}))},3:t=>{t.exports={bind:function(t){function e(){t.dataset.isShown="false",r.style.display="",o.style.display="none",i.style.display="none"}function n(){t.dataset.isShown="true",r.style.display="none",i.style.display=""}t.dataset.isShown="true",t.style.position="relative";var i=document.createElement("div");i.classList.add("content"),Array.from(t.children).forEach((function(t){return i.append(t)})),t.replaceChildren(),t.append(i),t.classList.add("closeable-wrapper");var o=function(){var t=document.createElement("span");return t.classList.add("closeable-button","label","label-default","hidden-print"),t.style.cssText+="display: none; position: absolute; top: 0; left: 0; cursor: pointer;background: #d9534f",t.innerHTML='',t.addEventListener("click",e),t}();t.append(o);var r=function(t){var e=document.createElement("a");return e.classList.add("closeable-show","hidden-print"),e.style.cssText+="display: none; cursor: pointer;text-decoration: underline",e.innerHTML=t,e.addEventListener("click",n),e}(t.getAttribute("alt")||"Expand Content");t.append(r),t.addEventListener("mouseover",(function(){"false"!==t.dataset.isShown&&(o.style.display="")})),t.addEventListener("mouseout",(function(){"false"!==t.dataset.isShown&&(o.style.display="none")}))}}},383:(t,e,n)=>{"use strict";var i,o=(i=n(740))&&"object"==typeof i&&"default"in i?i.default:i;function r(t){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function s(t){return function(t){if(Array.isArray(t)){for(var e=0,n=new Array(t.length);e1&&void 0!==arguments[1]&&arguments[1],n=t.to,i=t.from;if(n&&(i||!1!==e)&&this.transports[n])if(e)this.transports[n]=[];else{var o=this.$_getTransportIndex(t);if(o>=0){var r=this.transports[n].slice(0);r.splice(o,1),this.transports[n]=r}}},registerTarget:function(t,e,n){a&&(this.trackInstances&&!n&&this.targets[t]&&console.warn("[portal-vue]: Target ".concat(t," already exists")),this.$set(this.targets,t,Object.freeze([e])))},unregisterTarget:function(t){this.$delete(this.targets,t)},registerSource:function(t,e,n){a&&(this.trackInstances&&!n&&this.sources[t]&&console.warn("[portal-vue]: source ".concat(t," already exists")),this.$set(this.sources,t,Object.freeze([e])))},unregisterSource:function(t){this.$delete(this.sources,t)},hasTarget:function(t){return!(!this.targets[t]||!this.targets[t][0])},hasSource:function(t){return!(!this.sources[t]||!this.sources[t][0])},hasContentFor:function(t){return!!this.transports[t]&&!!this.transports[t].length},$_getTransportIndex:function(t){var e=t.to,n=t.from;for(var i in this.transports[e])if(this.transports[e][i].from===n)return+i;return-1}}}))(c),p=1,f=o.extend({name:"portal",props:{disabled:{type:Boolean},name:{type:String,default:function(){return String(p++)}},order:{type:Number,default:0},slim:{type:Boolean},slotProps:{type:Object,default:function(){return{}}},tag:{type:String,default:"DIV"},to:{type:String,default:function(){return String(Math.round(1e7*Math.random()))}}},created:function(){var t=this;this.$nextTick((function(){h.registerSource(t.name,t)}))},mounted:function(){this.disabled||this.sendUpdate()},updated:function(){this.disabled?this.clear():this.sendUpdate()},beforeDestroy:function(){h.unregisterSource(this.name),this.clear()},watch:{to:function(t,e){e&&e!==t&&this.clear(e),this.sendUpdate()}},methods:{clear:function(t){var e={from:this.name,to:t||this.to};h.close(e)},normalizeSlots:function(){return this.$scopedSlots.default?[this.$scopedSlots.default]:this.$slots.default},normalizeOwnChildren:function(t){return"function"==typeof t?t(this.slotProps):t},sendUpdate:function(){var t=this.normalizeSlots();if(t){var e={from:this.name,to:this.to,passengers:s(t),order:this.order};h.open(e)}else this.clear()}},render:function(t){var e=this.$slots.default||this.$scopedSlots.default||[],n=this.tag;return e&&this.disabled?e.length<=1&&this.slim?this.normalizeOwnChildren(e)[0]:t(n,[this.normalizeOwnChildren(e)]):this.slim?t():t(n,{class:{"v-portal":!0},style:{display:"none"},key:"v-portal-placeholder"})}}),m=o.extend({name:"portalTarget",props:{multiple:{type:Boolean,default:!1},name:{type:String,required:!0},slim:{type:Boolean,default:!1},slotProps:{type:Object,default:function(){return{}}},tag:{type:String,default:"div"},transition:{type:[String,Object,Function]}},data:function(){return{transports:h.transports,firstRender:!0}},created:function(){var t=this;this.$nextTick((function(){h.registerTarget(t.name,t)}))},watch:{ownTransports:function(){this.$emit("change",this.children().length>0)},name:function(t,e){h.unregisterTarget(e),h.registerTarget(t,this)}},mounted:function(){var t=this;this.transition&&this.$nextTick((function(){t.firstRender=!1}))},beforeDestroy:function(){h.unregisterTarget(this.name)},computed:{ownTransports:function(){var t=this.transports[this.name]||[];return this.multiple?t:0===t.length?[]:[t[t.length-1]]},passengers:function(){return function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t.reduce((function(t,n){var i=n.passengers[0],o="function"==typeof i?i(e):n.passengers;return t.concat(o)}),[])}(this.ownTransports,this.slotProps)}},methods:{children:function(){return 0!==this.passengers.length?this.passengers:this.$scopedSlots.default?this.$scopedSlots.default(this.slotProps):this.$slots.default||[]},noWrapper:function(){var t=this.slim&&!this.transition;return t&&this.children().length>1&&console.warn("[portal-vue]: PortalTarget with `slim` option received more than one child element."),t}},render:function(t){var e=this.noWrapper(),n=this.children(),i=this.transition||this.tag;return e?n[0]:this.slim&&!i?t():t(i,{props:{tag:this.transition&&this.tag?this.tag:void 0},class:{"vue-portal-target":!0}},n)}}),v=0,g=["disabled","name","order","slim","slotProps","tag","to"],y=["multiple","transition"],w=o.extend({name:"MountingPortal",inheritAttrs:!1,props:{append:{type:[Boolean,String]},bail:{type:Boolean},mountTo:{type:String,required:!0},disabled:{type:Boolean},name:{type:String,default:function(){return"mounted_"+String(v++)}},order:{type:Number,default:0},slim:{type:Boolean},slotProps:{type:Object,default:function(){return{}}},tag:{type:String,default:"DIV"},to:{type:String,default:function(){return String(Math.round(1e7*Math.random()))}},multiple:{type:Boolean,default:!1},targetSlim:{type:Boolean},targetSlotProps:{type:Object,default:function(){return{}}},targetTag:{type:String,default:"div"},transition:{type:[String,Object,Function]}},created:function(){if("undefined"!=typeof document){var t=document.querySelector(this.mountTo);if(t){var e=this.$props;if(h.targets[e.name])e.bail?console.warn("[portal-vue]: Target ".concat(e.name," is already mounted.\n Aborting because 'bail: true' is set")):this.portalTarget=h.targets[e.name];else{var n=e.append;if(n){var i="string"==typeof n?n:"DIV",o=document.createElement(i);t.appendChild(o),t=o}var r=l(this.$props,y);r.slim=this.targetSlim,r.tag=this.targetTag,r.slotProps=this.targetSlotProps,r.name=this.to,this.portalTarget=new m({el:t,parent:this.$parent||this,propsData:r})}}else console.error("[portal-vue]: Mount Point '".concat(this.mountTo,"' not found in document"))}},beforeDestroy:function(){var t=this.portalTarget;if(this.append){var e=t.$el;e.parentNode.removeChild(e)}t.$destroy()},render:function(t){if(!this.portalTarget)return console.warn("[portal-vue] Target wasn't mounted"),t();if(!this.$scopedSlots.manual){var e=l(this.$props,g);return t(f,{props:e,attrs:this.$attrs,on:this.$listeners,scopedSlots:this.$scopedSlots},this.$slots.default)}var n=this.$scopedSlots.manual({to:this.to});return Array.isArray(n)&&(n=n[0]),n||t()}});e.h_=f,e.YC=m},740:e=>{"use strict";e.exports=t}},n={};function i(t){var o=n[t];if(void 0!==o)return o.exports;var r=n[t]={exports:{}};return e[t](r,r.exports,i),r.exports}i.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return i.d(e,{a:e}),e},i.d=(t,e)=>{for(var n in e)i.o(e,n)&&!i.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var o={};return(()=>{"use strict";function t(e){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function e(e){var n=function(e,n){if("object"!==t(e)||null===e)return e;var i=e[Symbol.toPrimitive];if(void 0!==i){var o=i.call(e,n||"default");if("object"!==t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"===t(n)?n:String(n)}function n(t,n,i){return(n=e(n))in t?Object.defineProperty(t,n,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[n]=i,t}function r(t){return t.split("-")[0]}function s(t){return t.split("-")[1]}function a(t){return["top","bottom"].includes(r(t))?"x":"y"}function l(t){return"y"===t?"height":"width"}function c(t){let{reference:e,floating:n,placement:i}=t;const o=e.x+e.width/2-n.width/2,c=e.y+e.height/2-n.height/2;let u;switch(r(i)){case"top":u={x:o,y:e.y-n.height};break;case"bottom":u={x:o,y:e.y+e.height};break;case"right":u={x:e.x+e.width,y:c};break;case"left":u={x:e.x-n.width,y:c};break;default:u={x:e.x,y:e.y}}const d=a(i),h=l(d);switch(s(i)){case"start":u[d]=u[d]-(e[h]/2-n[h]/2);break;case"end":u[d]=u[d]+(e[h]/2-n[h]/2)}return u}i.d(o,{default:()=>Mo});function u(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function d(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function h(t,e){void 0===e&&(e={});const{x:n,y:i,platform:o,rects:r,elements:s,strategy:a}=t,{boundary:l="clippingParents",rootBoundary:c="viewport",elementContext:h="floating",altBoundary:p=!1,padding:f=0}=e,m=u(f),v=s[p?"floating"===h?"reference":"floating":h],g=await o.getClippingClientRect({element:await o.isElement(v)?v:v.contextElement||await o.getDocumentElement({element:s.floating}),boundary:l,rootBoundary:c}),y=d(await o.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===h?{...r.floating,x:n,y:i}:r.reference,offsetParent:await o.getOffsetParent({element:s.floating}),strategy:a}));return{top:g.top-y.top+m.top,bottom:y.bottom-g.bottom+m.bottom,left:g.left-y.left+m.left,right:y.right-g.right+m.right}}const p=Math.min,f=Math.max;function m(t,e,n){return f(t,p(e,n))}const v={left:"right",right:"left",bottom:"top",top:"bottom"};function g(t){return t.replace(/left|right|bottom|top/g,t=>v[t])}function y(t,e){const n="start"===s(t),i=a(t),o=l(i);let r="x"===i?n?"right":"left":n?"bottom":"top";return e.reference[o]>e.floating[o]&&(r=g(r)),{main:r,cross:g(r)}}const w={start:"end",end:"start"};function b(t){return t.replace(/start|end/g,t=>w[t])}const _=["top","right","bottom","left"],S=_.reduce((t,e)=>t.concat(e,e+"-start",e+"-end"),[]);const x=function(t){return void 0===t&&(t={}),{name:"autoPlacement",options:t,async fn(e){var n,i,o,a,l,c;const{x:u,y:d,rects:p,middlewareData:f,placement:m}=e,{alignment:v=null,allowedPlacements:g=S,autoAlignment:w=!0,..._}=t;if(null!=(n=f.autoPlacement)&&n.skip)return{};const x=function(t,e,n){return(t?[...n.filter(e=>s(e)===t),...n.filter(e=>s(e)!==t)]:n.filter(t=>r(t)===t)).filter(n=>!t||(s(n)===t||!!e&&b(n)!==n))}(v,w,g),C=await h(e,_),$=null!=(i=null==(o=f.autoPlacement)?void 0:o.index)?i:0,k=x[$],{main:T,cross:E}=y(k,p);if(m!==k)return{x:u,y:d,reset:{placement:x[0]}};const B=[C[r(k)],C[T],C[E]],O=[...null!=(a=null==(l=f.autoPlacement)?void 0:l.overflows)?a:[],{placement:k,overflows:B}],P=x[$+1];if(P)return{data:{index:$+1,overflows:O},reset:{placement:P}};const L=O.slice().sort((t,e)=>t.overflows[0]-e.overflows[0]),N=null==(c=L.find(t=>{let{overflows:e}=t;return e.every(t=>t<=0)}))?void 0:c.placement;return{data:{skip:!0},reset:{placement:null!=N?N:L[0].placement}}}}};const C=function(t){return void 0===t&&(t={}),{name:"flip",options:t,async fn(e){var n,i;const{placement:o,middlewareData:s,rects:a,initialPlacement:l}=e;if(null!=(n=s.flip)&&n.skip)return{};const{mainAxis:c=!0,crossAxis:u=!0,fallbackPlacements:d,fallbackStrategy:p="bestFit",flipAlignment:f=!0,...m}=t,v=r(o),w=[l,...d||(v===l||!f?[g(l)]:function(t){const e=g(t);return[b(t),e,b(e)]}(l))],_=await h(e,m),S=[];let x=(null==(i=s.flip)?void 0:i.overflows)||[];if(c&&S.push(_[v]),u){const{main:t,cross:e}=y(o,a);S.push(_[t],_[e])}if(x=[...x,{placement:o,overflows:S}],!S.every(t=>t<=0)){var C,$;const t=(null!=(C=null==($=s.flip)?void 0:$.index)?C:0)+1,e=w[t];if(e)return{data:{index:t,overflows:x},reset:{placement:e}};let n="bottom";switch(p){case"bestFit":{var k;const t=null==(k=x.slice().sort((t,e)=>t.overflows.filter(t=>t>0).reduce((t,e)=>t+e,0)-e.overflows.filter(t=>t>0).reduce((t,e)=>t+e,0))[0])?void 0:k.placement;t&&(n=t);break}case"initialPlacement":n=l}return{data:{skip:!0},reset:{placement:n}}}return{}}}};const $=function(t){return void 0===t&&(t=0),{name:"offset",options:t,fn(e){const{x:n,y:i,placement:o,rects:s}=e,l=function(t){let{placement:e,rects:n,value:i}=t;const o=r(e),s=["left","top"].includes(o)?-1:1,l="function"==typeof i?i({...n,placement:e}):i,{mainAxis:c,crossAxis:u}="number"==typeof l?{mainAxis:l,crossAxis:0}:{mainAxis:0,crossAxis:0,...l};return"x"===a(o)?{x:u,y:c*s}:{x:c*s,y:u}}({placement:o,rects:s,value:t});return{x:n+l.x,y:i+l.y,data:l}}}};function k(t){return"x"===t?"y":"x"}function T(t){return"[object Window]"===(null==t?void 0:t.toString())}function E(t){if(null==t)return window;if(!T(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function B(t){return E(t).getComputedStyle(t)}function O(t){return T(t)?"":t?(t.nodeName||"").toLowerCase():""}function P(t){return t instanceof E(t).HTMLElement}function L(t){return t instanceof E(t).Element}function N(t){return t instanceof E(t).ShadowRoot||t instanceof ShadowRoot}function A(t){const{overflow:e,overflowX:n,overflowY:i}=B(t);return/auto|scroll|overlay|hidden/.test(e+i+n)}function z(t){return["table","td","th"].includes(O(t))}function M(t){const e=navigator.userAgent.toLowerCase().includes("firefox"),n=B(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}const H=Math.min,D=Math.max,R=Math.round;function j(t,e){void 0===e&&(e=!1);const n=t.getBoundingClientRect();let i=1,o=1;return e&&P(t)&&(i=t.offsetWidth>0&&R(n.width)/t.offsetWidth||1,o=t.offsetHeight>0&&R(n.height)/t.offsetHeight||1),{width:n.width/i,height:n.height/o,top:n.top/o,right:n.right/i,bottom:n.bottom/o,left:n.left/i,x:n.left/i,y:n.top/o}}function I(t){return(e=t,(e instanceof E(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function q(t){return T(t)?{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}}function W(t){return j(I(t)).left+q(t).scrollLeft}function F(t,e,n){const i=P(e),o=I(e),r=j(t,i&&function(t){const e=j(t);return R(e.width)!==t.offsetWidth||R(e.height)!==t.offsetHeight}(e));let s={scrollLeft:0,scrollTop:0};const a={x:0,y:0};if(i||!i&&"fixed"!==n)if(("body"!==O(e)||A(o))&&(s=q(e)),P(e)){const t=j(e,!0);a.x=t.x+e.clientLeft,a.y=t.y+e.clientTop}else o&&(a.x=W(o));return{x:r.left+s.scrollLeft-a.x,y:r.top+s.scrollTop-a.y,width:r.width,height:r.height}}function V(t){return"html"===O(t)?t:t.assignedSlot||t.parentNode||(N(t)?t.host:null)||I(t)}function U(t){return P(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function Q(t){const e=E(t);let n=U(t);for(;n&&z(n)&&"static"===getComputedStyle(n).position;)n=U(n);return n&&("html"===O(n)||"body"===O(n)&&"static"===getComputedStyle(n).position&&!M(n))?e:n||function(t){let e=V(t);for(;P(e)&&!["html","body"].includes(O(e));){if(M(e))return e;e=e.parentNode}return null}(t)||e}function X(t){return{width:t.offsetWidth,height:t.offsetHeight}}function Y(t,e){var n;void 0===e&&(e=[]);const i=function t(e){return["html","body","#document"].includes(O(e))?e.ownerDocument.body:P(e)&&A(e)?e:t(V(e))}(t),o=i===(null==(n=t.ownerDocument)?void 0:n.body),r=E(i),s=o?[r].concat(r.visualViewport||[],A(i)?i:[]):i,a=e.concat(s);return o?a:a.concat(Y(V(s)))}function K(t,e){return"viewport"===e?d(function(t){const e=E(t),n=I(t),i=e.visualViewport;let o=n.clientWidth,r=n.clientHeight,s=0,a=0;return i&&(o=i.width,r=i.height,Math.abs(e.innerWidth/i.scale-i.width)<.01&&(s=i.offsetLeft,a=i.offsetTop)),{width:o,height:r,x:s,y:a}}(t)):L(e)?function(t){const e=j(t),n=e.top+t.clientTop,i=e.left+t.clientLeft;return{top:n,left:i,x:i,y:n,right:i+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(e):d(function(t){var e;const n=I(t),i=q(t),o=null==(e=t.ownerDocument)?void 0:e.body,r=D(n.scrollWidth,n.clientWidth,o?o.scrollWidth:0,o?o.clientWidth:0),s=D(n.scrollHeight,n.clientHeight,o?o.scrollHeight:0,o?o.clientHeight:0);let a=-i.scrollLeft+W(t);const l=-i.scrollTop;return"rtl"===B(o||n).direction&&(a+=D(n.clientWidth,o?o.clientWidth:0)-r),{width:r,height:s,x:a,y:l}}(I(t)))}function G(t){const e=Y(V(t)),n=["absolute","fixed"].includes(B(t).position)&&P(t)?Q(t):t;return L(n)?e.filter(t=>L(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&N(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==O(t)):[]}const Z={getElementRects:t=>{let{reference:e,floating:n,strategy:i}=t;return{reference:F(e,Q(n),i),floating:{...X(n),x:0,y:0}}},convertOffsetParentRelativeRectToViewportRelativeRect:t=>function(t){let{rect:e,offsetParent:n,strategy:i}=t;const o=P(n),r=I(n);if(n===r)return e;let s={scrollLeft:0,scrollTop:0};const a={x:0,y:0};if((o||!o&&"fixed"!==i)&&(("body"!==O(n)||A(r))&&(s=q(n)),P(n))){const t=j(n,!0);a.x=t.x+n.clientLeft,a.y=t.y+n.clientTop}return{...e,x:e.x-s.scrollLeft+a.x,y:e.y-s.scrollTop+a.y}}(t),getOffsetParent:t=>{let{element:e}=t;return Q(e)},isElement:t=>L(t),getDocumentElement:t=>{let{element:e}=t;return I(e)},getClippingClientRect:t=>function(t){let{element:e,boundary:n,rootBoundary:i}=t;const o=[..."clippingParents"===n?G(e):[].concat(n),i],r=o[0],s=o.reduce((t,n)=>{const i=K(e,n);return t.top=D(i.top,t.top),t.right=H(i.right,t.right),t.bottom=H(i.bottom,t.bottom),t.left=D(i.left,t.left),t},K(e,r));return s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left,s.y=s.top,s}(t),getDimensions:t=>{let{element:e}=t;return X(e)},getClientRects:t=>{let{element:e}=t;return e.getClientRects()}},J=(t,e,n)=>(async(t,e,n)=>{const{placement:i="bottom",strategy:o="absolute",middleware:r=[],platform:s}=n;let a=await s.getElementRects({reference:t,floating:e,strategy:o}),{x:l,y:u}=c({...a,placement:i}),d=i,h={};for(let n=0;ne in t?nt(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,ct=(t,e)=>{for(var n in e||(e={}))st.call(e,n)&<(t,n,e[n]);if(rt)for(var n of rt(e))at.call(e,n)&<(t,n,e[n]);return t},ut=(t,e)=>it(t,ot(e));const dt={disabled:!1,distance:5,skidding:0,container:"body",boundary:void 0,instantMove:!1,disposeTimeout:5e3,popperTriggers:[],strategy:"absolute",preventOverflow:!0,flip:!0,shift:!0,overflowPadding:0,arrowPadding:0,arrowOverflow:!0,themes:{tooltip:{placement:"top",triggers:["hover","focus","touch"],hideTriggers:t=>[...t,"click"],delay:{show:200,hide:0},handleResize:!1,html:!1,loadingContent:"..."},dropdown:{placement:"bottom",triggers:["click"],delay:0,handleResize:!0,autoHide:!0},menu:{$extend:"dropdown",triggers:["hover","focus"],popperTriggers:["hover","focus"],delay:{show:0,hide:400}}}};function ht(t,e){let n,i=dt.themes[t]||{};do{n=i[e],void 0===n?i.$extend?i=dt.themes[i.$extend]||{}:(i=null,n=dt[e]):i=null}while(i);return n}let pt=!1;if("undefined"!=typeof window){pt=!1;try{const t=Object.defineProperty({},"passive",{get(){pt=!0}});window.addEventListener("test",null,t)}catch(t){}}let ft=!1;"undefined"!=typeof window&&"undefined"!=typeof navigator&&(ft=/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream);const mt=["auto","top","bottom","left","right"].reduce((t,e)=>t.concat([e,e+"-start",e+"-end"]),[]),vt={hover:"mouseenter",focus:"focus",click:"click",touch:"touchstart"},gt={hover:"mouseleave",focus:"blur",click:"click",touch:"touchend"};function yt(){return new Promise(t=>requestAnimationFrame(()=>{requestAnimationFrame(t)}))}const wt=[];let bt=null,_t=function(){};function St(t){return function(){return ht(this.$props.theme,t)}}"undefined"!=typeof window&&(_t=window.Element);const xt="__floating-vue__popper";var Ct=()=>({name:"VPopper",props:{theme:{type:String,required:!0},targetNodes:{type:Function,required:!0},referenceNode:{type:Function,required:!0},popperNode:{type:Function,required:!0},shown:{type:Boolean,default:!1},showGroup:{type:String,default:null},ariaId:{default:null},disabled:{type:Boolean,default:St("disabled")},positioningDisabled:{type:Boolean,default:St("positioningDisabled")},placement:{type:String,default:St("placement"),validator:t=>mt.includes(t)},delay:{type:[String,Number,Object],default:St("delay")},distance:{type:[Number,String],default:St("distance")},skidding:{type:[Number,String],default:St("skidding")},triggers:{type:Array,default:St("triggers")},showTriggers:{type:[Array,Function],default:St("showTriggers")},hideTriggers:{type:[Array,Function],default:St("hideTriggers")},popperTriggers:{type:Array,default:St("popperTriggers")},popperShowTriggers:{type:[Array,Function],default:St("popperShowTriggers")},popperHideTriggers:{type:[Array,Function],default:St("popperHideTriggers")},container:{type:[String,Object,_t,Boolean],default:St("container")},boundary:{type:[String,_t],default:St("boundary")},strategy:{type:String,validator:t=>["absolute","fixed"].includes(t),default:St("strategy")},autoHide:{type:Boolean,default:St("autoHide")},handleResize:{type:Boolean,default:St("handleResize")},instantMove:{type:Boolean,default:St("instantMove")},eagerMount:{type:Boolean,default:St("eagerMount")},popperClass:{type:[String,Array,Object],default:St("popperClass")},computeTransformOrigin:{type:Boolean,default:St("computeTransformOrigin")},autoMinSize:{type:Boolean,default:St("autoMinSize")},autoSize:{type:[Boolean,String],default:St("autoSize")},autoMaxSize:{type:Boolean,default:St("autoMaxSize")},autoBoundaryMaxSize:{type:Boolean,default:St("autoBoundaryMaxSize")},preventOverflow:{type:Boolean,default:St("preventOverflow")},overflowPadding:{type:[Number,String],default:St("overflowPadding")},arrowPadding:{type:[Number,String],default:St("arrowPadding")},arrowOverflow:{type:Boolean,default:St("arrowOverflow")},flip:{type:Boolean,default:St("flip")},shift:{type:Boolean,default:St("shift")},shiftCrossAxis:{type:Boolean,default:St("shiftCrossAxis")}},provide(){return{[xt]:{parentPopper:this}}},inject:{[xt]:{default:null}},data(){return{isShown:!1,isMounted:!1,skipTransition:!1,classes:{showFrom:!1,showTo:!1,hideFrom:!1,hideTo:!0},result:{x:0,y:0,placement:"",strategy:this.strategy,arrow:{x:0,y:0,centerOffset:0},transformOrigin:null},shownChildren:new Set}},computed:{popperId(){return null!=this.ariaId?this.ariaId:this.randomId},shouldMountContent(){return this.eagerMount||this.isMounted},slotData(){return{popperId:this.popperId,isShown:this.isShown,shouldMountContent:this.shouldMountContent,skipTransition:this.skipTransition,autoHide:this.autoHide,show:this.show,hide:this.hide,handleResize:this.handleResize,onResize:this.onResize,classes:ut(ct({},this.classes),{popperClass:this.popperClass}),result:this.positioningDisabled?null:this.result}},parentPopper(){var t;return null==(t=this[xt])?void 0:t.parentPopper}},watch:ct(ct({shown:"$_autoShowHide",disabled(t){t?this.dispose():this.init()},async container(){this.isShown&&(this.$_ensureTeleport(),await this.$_computePosition())}},["triggers","positioningDisabled"].reduce((t,e)=>(t[e]="$_refreshListeners",t),{})),["placement","distance","skidding","boundary","strategy","overflowPadding","arrowPadding","preventOverflow","shift","shiftCrossAxis","flip"].reduce((t,e)=>(t[e]="$_computePosition",t),{})),created(){this.$_isDisposed=!0,this.randomId="popper_"+[Math.random(),Date.now()].map(t=>t.toString(36).substring(2,10)).join("_"),this.autoMinSize&&console.warn('[floating-vue] `autoMinSize` option is deprecated. Use `autoSize="min"` instead.'),this.autoMaxSize&&console.warn("[floating-vue] `autoMaxSize` option is deprecated. Use `autoBoundaryMaxSize` instead.")},mounted(){this.init(),this.$_detachPopperNode()},activated(){this.$_autoShowHide()},deactivated(){this.hide()},beforeDestroy(){this.dispose()},methods:{show({event:t=null,skipDelay:e=!1,force:n=!1}={}){var i,o;(null==(i=this.parentPopper)?void 0:i.lockedChild)&&this.parentPopper.lockedChild!==this||(this.$_pendingHide=!1,!n&&this.disabled||((null==(o=this.parentPopper)?void 0:o.lockedChild)===this&&(this.parentPopper.lockedChild=null),this.$_scheduleShow(t,e),this.$emit("show"),this.$_showFrameLocked=!0,requestAnimationFrame(()=>{this.$_showFrameLocked=!1})),this.$emit("update:shown",!0))},hide({event:t=null,skipDelay:e=!1}={}){var n;this.$_hideInProgress||(this.shownChildren.size>0?this.$_pendingHide=!0:this.$_isAimingPopper()?this.parentPopper&&(this.parentPopper.lockedChild=this,clearTimeout(this.parentPopper.lockedChildTimer),this.parentPopper.lockedChildTimer=setTimeout(()=>{this.parentPopper.lockedChild===this&&(this.parentPopper.lockedChild.hide({skipDelay:e}),this.parentPopper.lockedChild=null)},1e3)):((null==(n=this.parentPopper)?void 0:n.lockedChild)===this&&(this.parentPopper.lockedChild=null),this.$_pendingHide=!1,this.$_scheduleHide(t,e),this.$emit("hide"),this.$emit("update:shown",!1)))},init(){this.$_isDisposed&&(this.$_isDisposed=!1,this.isMounted=!1,this.$_events=[],this.$_preventShow=!1,this.$_referenceNode=this.referenceNode(),this.$_targetNodes=this.targetNodes().filter(t=>t.nodeType===t.ELEMENT_NODE),this.$_popperNode=this.popperNode(),this.$_innerNode=this.$_popperNode.querySelector(".v-popper__inner"),this.$_arrowNode=this.$_popperNode.querySelector(".v-popper__arrow-container"),this.$_swapTargetAttrs("title","data-original-title"),this.$_detachPopperNode(),this.triggers.length&&this.$_addEventListeners(),this.shown&&this.show())},dispose(){this.$_isDisposed||(this.$_isDisposed=!0,this.$_removeEventListeners(),this.hide({skipDelay:!0}),this.$_detachPopperNode(),this.isMounted=!1,this.isShown=!1,this.$_updateParentShownChildren(!1),this.$_swapTargetAttrs("data-original-title","title"),this.$emit("dispose"))},async onResize(){this.isShown&&(await this.$_computePosition(),this.$emit("resize"))},async $_computePosition(){var t;if(this.$_isDisposed||this.positioningDisabled)return;const e={strategy:this.strategy,middleware:[]};(this.distance||this.skidding)&&e.middleware.push($({mainAxis:this.distance,crossAxis:this.skidding}));const n=this.placement.startsWith("auto");if(n?e.middleware.push(x({alignment:null!=(t=this.placement.split("-")[1])?t:""})):e.placement=this.placement,this.preventOverflow&&(this.shift&&e.middleware.push(function(t){return void 0===t&&(t={}),{name:"shift",options:t,async fn(e){const{x:n,y:i,placement:o}=e,{mainAxis:s=!0,crossAxis:l=!1,limiter:c={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...u}=t,d={x:n,y:i},p=await h(e,u),f=a(r(o)),v=k(f);let g=d[f],y=d[v];if(s){const t="y"===f?"bottom":"right";g=m(g+p["y"===f?"top":"left"],g,g-p[t])}if(l){const t="y"===v?"bottom":"right";y=m(y+p["y"===v?"top":"left"],y,y-p[t])}const w=c.fn({...e,[f]:g,[v]:y});return{...w,data:{x:w.x-n,y:w.y-i}}}}}({padding:this.overflowPadding,boundary:this.boundary,crossAxis:this.shiftCrossAxis})),!n&&this.flip&&e.middleware.push(C({padding:this.overflowPadding,boundary:this.boundary}))),e.middleware.push((t=>({name:"arrow",options:t,async fn(e){const{element:n,padding:i=0}=null!=t?t:{},{x:o,y:s,placement:c,rects:d,platform:h}=e;if(null==n)return{};const p=u(i),f={x:o,y:s},v=a(r(c)),g=l(v),y=await h.getDimensions({element:n}),w="y"===v?"top":"left",b="y"===v?"bottom":"right",_=d.reference[g]+d.reference[v]-f[v]-d.floating[g],S=f[v]-d.reference[v],x=await h.getOffsetParent({element:n}),C=x?"y"===v?x.clientHeight||0:x.clientWidth||0:0,$=_/2-S/2,k=p[w],T=C-y[g]-p[b],E=C/2-y[g]/2+$,B=m(k,E,T);return{data:{[v]:B,centerOffset:E-B}}}}))({element:this.$_arrowNode,padding:this.arrowPadding})),this.arrowOverflow&&e.middleware.push({name:"arrowOverflow",fn:({placement:t,rects:e,middlewareData:n})=>{let i;const{centerOffset:o}=n.arrow;return i=t.startsWith("top")||t.startsWith("bottom")?Math.abs(o)>e.reference.width/2:Math.abs(o)>e.reference.height/2,{data:{overflow:i}}}}),this.autoMinSize||this.autoSize){const t=this.autoSize?this.autoSize:this.autoMinSize?"min":null;e.middleware.push({name:"autoSize",fn:({rects:e,placement:n,middlewareData:i})=>{var o;if(null==(o=i.autoSize)?void 0:o.skip)return{};let r,s;return n.startsWith("top")||n.startsWith("bottom")?r=e.reference.width:s=e.reference.height,this.$_innerNode.style["min"===t?"minWidth":"max"===t?"maxWidth":"width"]=null!=r?r+"px":null,this.$_innerNode.style["min"===t?"minHeight":"max"===t?"maxHeight":"height"]=null!=s?s+"px":null,{data:{skip:!0},reset:{rects:!0}}}})}(this.autoMaxSize||this.autoBoundaryMaxSize)&&(this.$_innerNode.style.maxWidth=null,this.$_innerNode.style.maxHeight=null,e.middleware.push(function(t){return void 0===t&&(t={}),{name:"size",options:t,async fn(e){var n;const{placement:i,rects:o,middlewareData:a}=e,{apply:l,...c}=t;if(null!=(n=a.size)&&n.skip)return{};const u=await h(e,c),d=r(i),p="end"===s(i);let m,v;"top"===d||"bottom"===d?(m=d,v=p?"left":"right"):(v=d,m=p?"top":"bottom");const g=f(u.left,0),y=f(u.right,0),w=f(u.top,0),b=f(u.bottom,0),_={height:o.floating.height-(["left","right"].includes(i)?2*(0!==w||0!==b?w+b:f(u.top,u.bottom)):u[m]),width:o.floating.width-(["top","bottom"].includes(i)?2*(0!==g||0!==y?g+y:f(u.left,u.right)):u[v])};return null==l||l({..._,...o}),{data:{skip:!0},reset:{rects:!0}}}}}({boundary:this.boundary,padding:this.overflowPadding,apply:({width:t,height:e})=>{this.$_innerNode.style.maxWidth=null!=t?t+"px":null,this.$_innerNode.style.maxHeight=null!=e?e+"px":null}})));const i=await J(this.$_referenceNode,this.$_popperNode,e);Object.assign(this.result,{x:i.x,y:i.y,placement:i.placement,strategy:i.strategy,arrow:ct(ct({},i.middlewareData.arrow),i.middlewareData.arrowOverflow)})},$_scheduleShow(t=null,e=!1){if(this.$_updateParentShownChildren(!0),this.$_hideInProgress=!1,clearTimeout(this.$_scheduleTimer),bt&&this.instantMove&&bt.instantMove&&bt!==this.parentPopper)return bt.$_applyHide(!0),void this.$_applyShow(!0);e?this.$_applyShow():this.$_scheduleTimer=setTimeout(this.$_applyShow.bind(this),this.$_computeDelay("show"))},$_scheduleHide(t=null,e=!1){this.shownChildren.size>0?this.$_pendingHide=!0:(this.$_updateParentShownChildren(!1),this.$_hideInProgress=!0,clearTimeout(this.$_scheduleTimer),this.isShown&&(bt=this),e?this.$_applyHide():this.$_scheduleTimer=setTimeout(this.$_applyHide.bind(this),this.$_computeDelay("hide")))},$_computeDelay(t){const e=this.delay;return parseInt(e&&e[t]||e||0)},async $_applyShow(t=!1){clearTimeout(this.$_disposeTimer),clearTimeout(this.$_scheduleTimer),this.skipTransition=t,this.isShown||(this.$_ensureTeleport(),await yt(),await this.$_computePosition(),await this.$_applyShowEffect(),this.positioningDisabled||this.$_registerEventListeners([...Y(this.$_referenceNode),...Y(this.$_popperNode)],"scroll",()=>{this.$_computePosition()}))},async $_applyShowEffect(){if(this.$_hideInProgress)return;if(this.computeTransformOrigin){const t=this.$_referenceNode.getBoundingClientRect(),e=this.$_popperNode.querySelector(".v-popper__wrapper"),n=e.parentNode.getBoundingClientRect(),i=t.x+t.width/2-(n.left+e.offsetLeft),o=t.y+t.height/2-(n.top+e.offsetTop);this.result.transformOrigin=`${i}px ${o}px`}this.isShown=!0,this.$_applyAttrsToTarget({"aria-describedby":this.popperId,"data-popper-shown":""});const t=this.showGroup;if(t){let e;for(let n=0;n0)return this.$_pendingHide=!0,void(this.$_hideInProgress=!1);if(clearTimeout(this.$_scheduleTimer),!this.isShown)return;this.skipTransition=t,function(t,e){const n=t.indexOf(e);-1!==n&&t.splice(n,1)}(wt,this),bt===this&&(bt=null),this.isShown=!1,this.$_applyAttrsToTarget({"aria-describedby":void 0,"data-popper-shown":void 0}),clearTimeout(this.$_disposeTimer);const e=ht(this.theme,"disposeTimeout");null!==e&&(this.$_disposeTimer=setTimeout(()=>{this.$_popperNode&&(this.$_detachPopperNode(),this.isMounted=!1)},e)),this.$_removeEventListeners("scroll"),this.$emit("apply-hide"),this.classes.showFrom=!1,this.classes.showTo=!1,this.classes.hideFrom=!0,this.classes.hideTo=!1,await yt(),this.classes.hideFrom=!1,this.classes.hideTo=!0},$_autoShowHide(){this.shown?this.show():this.hide()},$_ensureTeleport(){if(this.$_isDisposed)return;let t=this.container;if("string"==typeof t?t=window.document.querySelector(t):!1===t&&(t=this.$_targetNodes[0].parentNode),!t)throw new Error("No container for popover: "+this.container);t.appendChild(this.$_popperNode),this.isMounted=!0},$_addEventListeners(){const t=t=>{this.isShown&&!this.$_hideInProgress||(t.usedByTooltip=!0,!this.$_preventShow&&this.show({event:t}))};this.$_registerTriggerListeners(this.$_targetNodes,vt,this.triggers,this.showTriggers,t),this.$_registerTriggerListeners([this.$_popperNode],vt,this.popperTriggers,this.popperShowTriggers,t);const e=t=>{t.usedByTooltip||this.hide({event:t})};this.$_registerTriggerListeners(this.$_targetNodes,gt,this.triggers,this.hideTriggers,e),this.$_registerTriggerListeners([this.$_popperNode],gt,this.popperTriggers,this.popperHideTriggers,e)},$_registerEventListeners(t,e,n){this.$_events.push({targetNodes:t,eventType:e,handler:n}),t.forEach(t=>t.addEventListener(e,n,pt?{passive:!0}:void 0))},$_registerTriggerListeners(t,e,n,i,o){let r=n;null!=i&&(r="function"==typeof i?i(r):i),r.forEach(n=>{const i=e[n];i&&this.$_registerEventListeners(t,i,o)})},$_removeEventListeners(t){const e=[];this.$_events.forEach(n=>{const{targetNodes:i,eventType:o,handler:r}=n;t&&t!==o?e.push(n):i.forEach(t=>t.removeEventListener(o,r))}),this.$_events=e},$_refreshListeners(){this.$_isDisposed||(this.$_removeEventListeners(),this.$_addEventListeners())},$_handleGlobalClose(t,e=!1){this.$_showFrameLocked||(this.hide({event:t}),t.closePopover?this.$emit("close-directive"):this.$emit("auto-hide"),e&&(this.$_preventShow=!0,setTimeout(()=>{this.$_preventShow=!1},300)))},$_detachPopperNode(){this.$_popperNode.parentNode&&this.$_popperNode.parentNode.removeChild(this.$_popperNode)},$_swapTargetAttrs(t,e){for(const n of this.$_targetNodes){const i=n.getAttribute(t);i&&(n.removeAttribute(t),n.setAttribute(e,i))}},$_applyAttrsToTarget(t){for(const e of this.$_targetNodes)for(const n in t){const i=t[n];null==i?e.removeAttribute(n):e.setAttribute(n,i)}},$_updateParentShownChildren(t){let e=this.parentPopper;for(;e;)t?e.shownChildren.add(this.randomId):(e.shownChildren.delete(this.randomId),e.$_pendingHide&&e.hide()),e=e.parentPopper},$_isAimingPopper(){const t=this.$el.getBoundingClientRect();if(Pt>=t.left&&Pt<=t.right&&Lt>=t.top&&Lt<=t.bottom){const t=this.$_popperNode.getBoundingClientRect(),e=Pt-Bt,n=Lt-Ot,i=t.left+t.width/2-Bt+(t.top+t.height/2)-Ot+t.width+t.height,o=Bt+e*i,r=Ot+n*i;return Nt(Bt,Ot,o,r,t.left,t.top,t.left,t.bottom)||Nt(Bt,Ot,o,r,t.left,t.top,t.right,t.top)||Nt(Bt,Ot,o,r,t.right,t.top,t.right,t.bottom)||Nt(Bt,Ot,o,r,t.left,t.bottom,t.right,t.bottom)}return!1}},render(){return this.$scopedSlots.default(this.slotData)[0]}});function $t(t){for(let e=0;e=0;i--){const o=wt[i];try{const i=o.$_containsGlobalTarget=Tt(o,t);o.$_pendingHide=!1,requestAnimationFrame(()=>{if(o.$_pendingHide=!1,!n[o.randomId]&&Et(o,i,t)){if(o.$_handleGlobalClose(t,e),!t.closeAllPopover&&t.closePopover&&i){let t=o.parentPopper;for(;t;)n[t.randomId]=!0,t=t.parentPopper;return}let r=o.parentPopper;for(;r&&Et(r,r.$_containsGlobalTarget,t);)r.$_handleGlobalClose(t,e),r=r.parentPopper}})}catch(t){}}}function Tt(t,e){const n=t.popperNode();return t.$_mouseDownContains||n.contains(e.target)}function Et(t,e,n){return n.closeAllPopover||n.closePopover&&e||t.autoHide&&!e}"undefined"!=typeof document&&"undefined"!=typeof window&&(ft?(document.addEventListener("touchstart",$t,!pt||{passive:!0,capture:!0}),document.addEventListener("touchend",(function(t){kt(t,!0)}),!pt||{passive:!0,capture:!0})):(window.addEventListener("mousedown",$t,!0),window.addEventListener("click",(function(t){kt(t)}),!0)),window.addEventListener("resize",(function(t){for(let e=0;e=0&&l<=1&&c>=0&&c<=1}var At;function zt(){zt.init||(zt.init=!0,At=-1!==function(){var t=window.navigator.userAgent,e=t.indexOf("MSIE ");if(e>0)return parseInt(t.substring(e+5,t.indexOf(".",e)),10);if(t.indexOf("Trident/")>0){var n=t.indexOf("rv:");return parseInt(t.substring(n+3,t.indexOf(".",n)),10)}var i=t.indexOf("Edge/");return i>0?parseInt(t.substring(i+5,t.indexOf(".",i)),10):-1}())}function Mt(t,e,n,i,o,r,s,a,l,c){"boolean"!=typeof s&&(l=a,a=s,s=!1);var u,d="function"==typeof n?n.options:n;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),r?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},d._ssrRegister=u):e&&(u=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),u)if(d.functional){var h=d.render;d.render=function(t,e){return u.call(e),h(t,e)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,u):[u]}return n}"undefined"!=typeof window&&window.addEventListener("mousemove",t=>{Bt=Pt,Ot=Lt,Pt=t.clientX,Lt=t.clientY},pt?{passive:!0}:void 0);var Ht={name:"ResizeObserver",props:{emitOnMount:{type:Boolean,default:!1},ignoreWidth:{type:Boolean,default:!1},ignoreHeight:{type:Boolean,default:!1}},mounted:function(){var t=this;zt(),this.$nextTick((function(){t._w=t.$el.offsetWidth,t._h=t.$el.offsetHeight,t.emitOnMount&&t.emitSize()}));var e=document.createElement("object");this._resizeObject=e,e.setAttribute("aria-hidden","true"),e.setAttribute("tabindex",-1),e.onload=this.addResizeHandlers,e.type="text/html",At&&this.$el.appendChild(e),e.data="about:blank",At||this.$el.appendChild(e)},beforeDestroy:function(){this.removeResizeHandlers()},methods:{compareAndNotify:function(){(!this.ignoreWidth&&this._w!==this.$el.offsetWidth||!this.ignoreHeight&&this._h!==this.$el.offsetHeight)&&(this._w=this.$el.offsetWidth,this._h=this.$el.offsetHeight,this.emitSize())},emitSize:function(){this.$emit("notify",{width:this._w,height:this._h})},addResizeHandlers:function(){this._resizeObject.contentDocument.defaultView.addEventListener("resize",this.compareAndNotify),this.compareAndNotify()},removeResizeHandlers:function(){this._resizeObject&&this._resizeObject.onload&&(!At&&this._resizeObject.contentDocument&&this._resizeObject.contentDocument.defaultView.removeEventListener("resize",this.compareAndNotify),this.$el.removeChild(this._resizeObject),this._resizeObject.onload=null,this._resizeObject=null)}}},Dt=function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"resize-observer",attrs:{tabindex:"-1"}})};Dt._withStripped=!0;var Rt=Mt({render:Dt,staticRenderFns:[]},void 0,Ht,"data-v-8859cc6c",!1,void 0,!1,void 0,void 0,void 0);var jt={version:"1.0.1",install:function(t){t.component("resize-observer",Rt),t.component("ResizeObserver",Rt)}},It=null;"undefined"!=typeof window?It=window.Vue:void 0!==i.g&&(It=i.g.Vue),It&&It.use(jt);var qt={computed:{themeClass(){return function(t){const e=[t];let n=dt.themes[t]||{};do{n.$extend&&!n.$resetCss?(e.push(n.$extend),n=dt.themes[n.$extend]||{}):n=null}while(n);return e.map(t=>"v-popper--theme-"+t)}(this.theme)}}},Wt={name:"VPopperContent",components:{ResizeObserver:Rt},mixins:[qt],props:{popperId:String,theme:String,shown:Boolean,mounted:Boolean,skipTransition:Boolean,autoHide:Boolean,handleResize:Boolean,classes:Object,result:Object},methods:{toPx:t=>null==t||isNaN(t)?null:t+"px"}};function Ft(t,e,n,i,o,r,s,a){var l,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),s?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=l):o&&(l=a?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(c.functional){c._injectStyles=l;var u=c.render;c.render=function(t,e){return l.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:c}}const Vt={};var Ut=Ft(Wt,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{ref:"popover",staticClass:"v-popper__popper",class:[t.themeClass,t.classes.popperClass,{"v-popper__popper--shown":t.shown,"v-popper__popper--hidden":!t.shown,"v-popper__popper--show-from":t.classes.showFrom,"v-popper__popper--show-to":t.classes.showTo,"v-popper__popper--hide-from":t.classes.hideFrom,"v-popper__popper--hide-to":t.classes.hideTo,"v-popper__popper--skip-transition":t.skipTransition,"v-popper__popper--arrow-overflow":t.result&&t.result.arrow.overflow,"v-popper__popper--no-positioning":!t.result}],style:t.result?{position:t.result.strategy,transform:"translate3d("+Math.round(t.result.x)+"px,"+Math.round(t.result.y)+"px,0)"}:void 0,attrs:{id:t.popperId,"aria-hidden":t.shown?"false":"true",tabindex:t.autoHide?0:void 0,"data-popper-placement":t.result?t.result.placement:void 0},on:{keyup:function(e){if(!e.type.indexOf("key")&&t._k(e.keyCode,"esc",27,e.key,["Esc","Escape"]))return null;t.autoHide&&t.$emit("hide")}}},[n("div",{staticClass:"v-popper__backdrop",on:{click:function(e){t.autoHide&&t.$emit("hide")}}}),n("div",{staticClass:"v-popper__wrapper",style:t.result?{transformOrigin:t.result.transformOrigin}:void 0},[n("div",{ref:"inner",staticClass:"v-popper__inner"},[t.mounted?[n("div",[t._t("default")],2),t.handleResize?n("ResizeObserver",{on:{notify:function(e){return t.$emit("resize",e)}}}):t._e()]:t._e()],2),n("div",{ref:"arrow",staticClass:"v-popper__arrow-container",style:t.result?{left:t.toPx(t.result.arrow.x),top:t.toPx(t.result.arrow.y)}:void 0},[n("div",{staticClass:"v-popper__arrow-outer"}),n("div",{staticClass:"v-popper__arrow-inner"})])])])}),[],!1,Qt,null,null,null);function Qt(t){for(let t in Vt)this[t]=Vt[t]}var Xt=function(){return Ut.exports}(),Yt={methods:{show(...t){return this.$refs.popper.show(...t)},hide(...t){return this.$refs.popper.hide(...t)},dispose(...t){return this.$refs.popper.dispose(...t)},onResize(...t){return this.$refs.popper.onResize(...t)}}},Kt={name:"VPopperWrapper",components:{Popper:Ct(),PopperContent:Xt},mixins:[Yt,qt],inheritAttrs:!1,props:{theme:{type:String,default(){return this.$options.vPopperTheme}}},methods:{getTargetNodes(){return Array.from(this.$refs.reference.children).filter(t=>t!==this.$refs.popperContent.$el)}}};const Gt={};var Zt=Ft(Kt,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("Popper",t._g(t._b({ref:"popper",attrs:{theme:t.theme,"target-nodes":t.getTargetNodes,"reference-node":function(){return t.$refs.reference},"popper-node":function(){return t.$refs.popperContent.$el}},scopedSlots:t._u([{key:"default",fn:function(e){var i=e.popperId,o=e.isShown,r=e.shouldMountContent,s=e.skipTransition,a=e.autoHide,l=e.show,c=e.hide,u=e.handleResize,d=e.onResize,h=e.classes,p=e.result;return[n("div",{ref:"reference",staticClass:"v-popper",class:[t.themeClass,{"v-popper--shown":o}]},[t._t("default",null,{shown:o,show:l,hide:c}),n("PopperContent",{ref:"popperContent",attrs:{"popper-id":i,theme:t.theme,shown:o,mounted:r,"skip-transition":s,"auto-hide":a,"handle-resize":u,classes:h,result:p},on:{hide:c,resize:d}},[t._t("popper",null,{shown:o,hide:c})],2)],2)]}}],null,!0)},"Popper",t.$attrs,!1),t.$listeners))}),[],!1,Jt,null,null,null);function Jt(t){for(let t in Gt)this[t]=Gt[t]}var te=function(){return Zt.exports}(),ee=ut(ct({},te),{name:"VDropdown",vPopperTheme:"dropdown"});const ne={};var ie=Ft(ee,void 0,void 0,!1,oe,null,null,null);function oe(t){for(let t in ne)this[t]=ne[t]}var re=function(){return ie.exports}(),se=ut(ct({},te),{name:"VMenu",vPopperTheme:"menu"});const ae={};var le=Ft(se,void 0,void 0,!1,ce,null,null,null);function ce(t){for(let t in ae)this[t]=ae[t]}var ue=function(){return le.exports}(),de=ut(ct({},te),{name:"VTooltip",vPopperTheme:"tooltip"});const he={};var pe=Ft(de,void 0,void 0,!1,fe,null,null,null);function fe(t){for(let t in he)this[t]=he[t]}var me=function(){return pe.exports}(),ve={name:"VTooltipDirective",components:{Popper:Ct(),PopperContent:Xt},mixins:[Yt],inheritAttrs:!1,props:{theme:{type:String,default:"tooltip"},html:{type:Boolean,default(){return ht(this.theme,"html")}},content:{type:[String,Number,Function],default:null},loadingContent:{type:String,default(){return ht(this.theme,"loadingContent")}}},data:()=>({asyncContent:null}),computed:{isContentAsync(){return"function"==typeof this.content},loading(){return this.isContentAsync&&null==this.asyncContent},finalContent(){return this.isContentAsync?this.loading?this.loadingContent:this.asyncContent:this.content}},watch:{content:{handler(){this.fetchContent(!0)},immediate:!0},async finalContent(t){await this.$nextTick(),this.$refs.popper.onResize()}},created(){this.$_fetchId=0},methods:{fetchContent(t){if("function"==typeof this.content&&this.$_isShown&&(t||!this.$_loading&&null==this.asyncContent)){this.asyncContent=null,this.$_loading=!0;const t=++this.$_fetchId,e=this.content(this);e.then?e.then(e=>this.onResult(t,e)):this.onResult(t,e)}},onResult(t,e){t===this.$_fetchId&&(this.$_loading=!1,this.asyncContent=e)},onShow(){this.$_isShown=!0,this.fetchContent()},onHide(){this.$_isShown=!1}}};const ge={};var ye=Ft(ve,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("Popper",t._g(t._b({ref:"popper",attrs:{theme:t.theme,"popper-node":function(){return t.$refs.popperContent.$el}},on:{"apply-show":t.onShow,"apply-hide":t.onHide},scopedSlots:t._u([{key:"default",fn:function(e){var i=e.popperId,o=e.isShown,r=e.shouldMountContent,s=e.skipTransition,a=e.autoHide,l=e.hide,c=e.handleResize,u=e.onResize,d=e.classes,h=e.result;return[n("PopperContent",{ref:"popperContent",class:{"v-popper--tooltip-loading":t.loading},attrs:{"popper-id":i,theme:t.theme,shown:o,mounted:r,"skip-transition":s,"auto-hide":a,"handle-resize":c,classes:d,result:h},on:{hide:l,resize:u}},[t.html?n("div",{domProps:{innerHTML:t._s(t.finalContent)}}):n("div",{domProps:{textContent:t._s(t.finalContent)}})])]}}])},"Popper",t.$attrs,!1),t.$listeners))}),[],!1,we,null,null,null);function we(t){for(let t in ge)this[t]=ge[t]}var be=function(){return ye.exports}();function _e(t,e,n){let i;const o=typeof e;return i="string"===o?{content:e}:e&&"object"===o?e:{content:!1},i.placement=function(t,e){let n=t.placement;if(!n&&e)for(const t of mt)e[t]&&(n=t);return n||(n=ht(t.theme||"tooltip","placement")),n}(i,n),i.targetNodes=()=>[t],i.referenceNode=()=>t,i}function Se(t,e,n){const i=_e(t,e,n),o=t.$_popper=new(et())({mixins:[Yt],data:()=>({options:i}),render(t){const e=this.options,{theme:n,html:i,content:o,loadingContent:r}=e,s=((t,e)=>{var n={};for(var i in t)st.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&rt)for(var i of rt(t))e.indexOf(i)<0&&at.call(t,i)&&(n[i]=t[i]);return n})(e,["theme","html","content","loadingContent"]);return t(be,{props:{theme:n,html:i,content:o,loadingContent:r},attrs:s,ref:"popper"})},devtools:{hide:!0}}),r=document.createElement("div");return document.body.appendChild(r),o.$mount(r),t.classList&&t.classList.add("v-popper--has-tooltip"),o}function xe(t){t.$_popper&&(t.$_popper.$destroy(),delete t.$_popper,delete t.$_popperOldShown),t.classList&&t.classList.remove("v-popper--has-tooltip")}function Ce(t,{value:e,oldValue:n,modifiers:i}){const o=_e(t,e,i);if(!o.content||ht(o.theme||"tooltip","disabled"))xe(t);else{let n;t.$_popper?(n=t.$_popper,n.options=o):n=Se(t,e,i),void 0!==e.shown&&e.shown!==t.$_popperOldShown&&(t.$_popperOldShown=e.shown,e.shown?n.show():n.hide())}}var $e={bind:Ce,update:Ce,unbind(t){xe(t)}};function ke(t){t.addEventListener("click",Ee),t.addEventListener("touchstart",Be,!!pt&&{passive:!0})}function Te(t){t.removeEventListener("click",Ee),t.removeEventListener("touchstart",Be),t.removeEventListener("touchend",Oe),t.removeEventListener("touchcancel",Pe)}function Ee(t){const e=t.currentTarget;t.closePopover=!e.$_vclosepopover_touch,t.closeAllPopover=e.$_closePopoverModifiers&&!!e.$_closePopoverModifiers.all}function Be(t){if(1===t.changedTouches.length){const e=t.currentTarget;e.$_vclosepopover_touch=!0;const n=t.changedTouches[0];e.$_vclosepopover_touchPoint=n,e.addEventListener("touchend",Oe),e.addEventListener("touchcancel",Pe)}}function Oe(t){const e=t.currentTarget;if(e.$_vclosepopover_touch=!1,1===t.changedTouches.length){const n=t.changedTouches[0],i=e.$_vclosepopover_touchPoint;t.closePopover=Math.abs(n.screenY-i.screenY)<20&&Math.abs(n.screenX-i.screenX)<20,t.closeAllPopover=e.$_closePopoverModifiers&&!!e.$_closePopoverModifiers.all}}function Pe(t){t.currentTarget.$_vclosepopover_touch=!1}var Le={bind(t,{value:e,modifiers:n}){t.$_closePopoverModifiers=n,(void 0===e||e)&&ke(t)},update(t,{value:e,oldValue:n,modifiers:i}){t.$_closePopoverModifiers=i,e!==n&&(void 0===e||e?ke(t):Te(t))},unbind(t){Te(t)}};const Ne=re,Ae=me;const ze={version:"1.0.0-beta.14",install:function(t,e={}){t.$_vTooltipInstalled||(t.$_vTooltipInstalled=!0,function t(e,n){for(const i in n)Object.prototype.hasOwnProperty.call(n,i)&&("object"==typeof n[i]&&e[i]?t(e[i],n[i]):e[i]=n[i])}(dt,e),t.directive("tooltip",$e),t.directive("close-popper",Le),t.component("v-tooltip",me),t.component("VTooltip",me),t.component("v-dropdown",re),t.component("VDropdown",re),t.component("v-menu",ue),t.component("VMenu",ue))},options:dt};let Me=null;"undefined"!=typeof window?Me=window.Vue:void 0!==i.g&&(Me=i.g.Vue),Me&&Me.use(ze);var He=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["alert box-container",t.containerStyle(),t.addClass,{"d-flex":t.seamlessHeaderBool()}],style:t.customStyle()},[t.seamlessHeaderBool()?n("div",{staticClass:"d-flex"},[t.iconBool()?n("div",{class:["icon-wrapper",t.iconStyle()],style:t.customIconColorStyle()},[t._t("icon",(function(){return[n("i",{class:["fas",t.getFontAwesomeIconStyle()]})]}))],2):t._e(),t._v(" "),n("div",{staticClass:"vertical-divider",class:t.getBootstrapAlertStyle(),attrs:{"aria-hidden":"true"}})]):t._e(),t._v(" "),n("div",{staticClass:"header-and-body"},[t.headerBool()?n("div",{class:["box-header-wrapper",{"alert-dismissible":t.dismissible}]},[t.iconBool()&&!t.seamlessHeaderBool()?n("div",{class:["icon-wrapper",t.iconStyle()],style:t.customIconColorStyle()},[t._t("icon",(function(){return[n("i",{class:["fas",t.getFontAwesomeIconStyle()]})]}))],2):t._e(),t._v(" "),n("div",{staticClass:"box-header"},[t._t("header")],2),t._v(" "),t.dismissible?n("button",{staticClass:"btn-close close-with-heading",attrs:{type:"button","data-bs-dismiss":"alert","aria-label":"Close"}}):t._e()]):t._e(),t._v(" "),n("div",{class:["box-body-wrapper",{"alert-dismissible":t.dismissible&&!t.headerBool(),"box-body-wrapper-with-heading":t.headerBool()}]},[t.iconBool()&&!t.headerBool()?n("div",{class:["icon-wrapper",t.iconStyle()],style:t.customIconColorStyle()},[t._t("icon",(function(){return[n("i",{class:["fas",t.getFontAwesomeIconStyle()]})]}))],2):t._e(),t._v(" "),t.seamlessNoHeaderBool()?n("div",{staticClass:"vertical-divider",class:t.getBootstrapAlertStyle(),attrs:{"aria-hidden":"true"}}):t._e(),t._v(" "),n("div",{staticClass:"contents",style:t.customColorStyle()},[t._t("default")],2),t._v(" "),t.dismissible&&!t.headerBool()?n("button",{staticClass:"btn-close",attrs:{type:"button","data-bs-dismiss":"alert","aria-label":"Close"}}):t._e()])])])};He._withStripped=!0;var De=function(t){return"string"==typeof t?""===t||"true"===t||"false"!==t&&"null"!==t&&"undefined"!==t&&t:t};function Re(t){return"string"==typeof t?""===t||"true"===t||"false"!==t&&"null"!==t&&"undefined"!==t&&t:t}function je(t){return"number"==typeof t?t:null==t||isNaN(Number(t))?null:Number(t)}function Ie(t){var e=t.split("#"),n="";return e.length>1&&(n=e[1]),n}function qe(t,e,n,i,o,r,s,a){var l,c="function"==typeof t?t.options:t;if(e&&(c.render=e,c.staticRenderFns=n,c._compiled=!0),i&&(c.functional=!0),r&&(c._scopeId="data-v-"+r),s?(l=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),o&&o.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(s)},c._ssrRegister=l):o&&(l=a?function(){o.call(this,(c.functional?this.parent:this).$root.$options.shadowRoot)}:o),l)if(c.functional){c._injectStyles=l;var u=c.render;c.render=function(t,e){return l.call(e),u(t,e)}}else{var d=c.beforeCreate;c.beforeCreate=d?[].concat(d,l):[l]}return{exports:t,options:c}}const We=qe({props:{dismissible:{type:Boolean,default:!1},backgroundColor:{type:String,default:null},borderColor:{type:String,default:null},borderLeftColor:{type:String,default:null},color:{type:String,default:null},icon:{type:String,default:null},iconSize:{type:String,default:null},iconColor:{type:String,default:null},type:{type:String,default:""},addClass:{type:String,default:""},light:{type:Boolean,default:!1},seamless:{type:Boolean,default:!1},noIcon:{type:Boolean,default:!1},noBackground:{type:Boolean,default:!1},noBorder:{type:Boolean,default:!1},theme:{type:String,default:""}},computed:{bootStrapStyle:function(){return function(t,e){var n,i,o=["warning","info","definition","success","danger","tip","important","wrong"].includes(t)?t:"",r=["primary","secondary","success","danger","warning","info","light","dark"].includes(e)?e:"";if(r)n=r;else switch(o){case"warning":n="warning";break;case"info":n="info";break;case"definition":n="primary";break;case"success":case"tip":n="success";break;case"important":case"wrong":n="danger";break;default:n="default"}switch(o){case"wrong":i="fa-times";break;case"warning":i="fa-exclamation";break;case"info":i="fa-info";break;case"success":i="fa-check";break;case"important":i="fa-flag";break;case"tip":i="fa-lightbulb";break;case"definition":i="fa-atlas";break;default:i=""}return{style:n,icon:i}}(this.type,this.theme)}},methods:{isSeamless:function(){return!this.light&&this.seamless},seamlessNoHeaderBool:function(){return this.isSeamless()&&!this.headerBool()},seamlessHeaderBool:function(){return this.isSeamless()&&this.headerBool()},headerBool:function(){return!!this.$scopedSlots.header},iconBool:function(){var t=!!this.$scopedSlots.icon;return!this.noIcon&&this.type||t},containerStyle:function(){var t;return t=this.light?"".concat(this.getBootstrapBorderStyle()," alert-border-left"):this.seamless?"seamless":this.getBootstrapAlertStyle(),this.noBackground&&(t+=" no-background"),this.noBorder&&(t+=" no-border"),t},customStyle:function(){var t={};return this.backgroundColor&&(t.backgroundColor=this.backgroundColor,t.borderColor=this.backgroundColor),this.borderColor&&(t.border="1px solid ".concat(this.borderColor)),this.borderLeftColor&&(t.borderLeft="5px solid ".concat(this.borderLeftColor)),t},customColorStyle:function(){return this.color?{color:this.color}:{}},iconStyle:function(){var t="";return this.iconSize&&(t+="fa-".concat(this.iconSize)),(this.light||this.seamless)&&(t+=" ".concat(this.getBootstrapTextStyle())),t},customIconColorStyle:function(){return this.iconColor?{color:"".concat(this.iconColor,"!important")}:{}},getBootstrapAlertStyle:function(){return"alert-".concat(this.bootStrapStyle.style)},getBootstrapTextStyle:function(){return"text-".concat(this.bootStrapStyle.style)},getBootstrapBorderStyle:function(){return"border-".concat(this.bootStrapStyle.style)},getFontAwesomeIconStyle:function(){return this.bootStrapStyle.icon}}},He,[],!1,null,"4d146e2c",null).exports;var Fe=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("nav",{staticClass:"breadcrumb-divider",attrs:{"aria-label":"breadcrumb"}},[n("ol",{staticClass:"breadcrumb"},[n("li",{staticClass:"notlink breadcrumb-marker"},[t._v("\n ››  \n ")]),t._v(" "),t._l(t.items,(function(e,i){return n("li",{key:i,class:["breadcrumb-item",{notlink:null===e.link}],attrs:{"aria-current":{page:t.isLast(i,t.items.length)}}},[null===e.link?n("a",[t._v("\n "+t._s(e.title)+"\n ")]):n("a",{attrs:{href:e.link}},[t._v("\n "+t._s(e.title)+"\n ")])])}))],2)])])};Fe._withStripped=!0;const Ve=qe({data:function(){return{items:[]}},methods:{isLast:function(t,e){return t===e-1}},mounted:function(){var t=Array.from(document.querySelectorAll("ul")).find((function(t){return t.classList.contains("site-nav-list-root")}));if(t){var e=t.querySelector(".current");if(e){this.items.unshift({title:e.textContent,link:null});for(var n=e.parentElement;n!==t;){if("ul"===n.tagName.toLowerCase()){var i=n.parentElement.querySelector("div"),o=i.querySelector("a[href]");null===o?this.items.unshift({title:i.textContent,link:null}):this.items.unshift({title:o.textContent,link:o.getAttribute("href")})}n=n.parentElement}}}}},Fe,[],!1,null,"ef898034",null).exports;var Ue=i(3),Qe=i.n(Ue),Xe=function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isLi?n("li",{ref:"dropdown",class:[{disabled:t.disabledBool},"dropdown",t.addClass]},[t._t("button",(function(){return[n("a",{staticClass:"dropdown-toggle nav-link",class:{disabled:t.disabledBool},attrs:{role:"button","data-bs-toggle":"dropdown"}},[t._t("header")],2)]})),t._v(" "),t._t("dropdown-menu",(function(){return[n("ul",{staticClass:"dropdown-menu",class:[{show:t.show},{"dropdown-menu-end":t.menuAlignRight}]},[t._t("default")],2)]}))],2):t.isSubmenu?n("submenu",{ref:"submenu",scopedSlots:t._u([t._l(t.$scopedSlots,(function(e,n){return{key:n,fn:function(){return[t._t(n)]},proxy:!0}}))],null,!0)}):n("div",{ref:"dropdown",class:[{disabled:t.disabledBool},"btn-group",t.addClass]},[t._t("before"),t._v(" "),t._t("button",(function(){return[n("button",{staticClass:"btn dropdown-toggle",class:[t.btnType,t.btnWithBefore,{"dropdown-toggle-split":t.hasBefore}],attrs:{type:"button",disabled:t.disabledBool,"data-bs-reference":"parent","data-bs-toggle":"dropdown"}},[t._t("header")],2)]})),t._v(" "),t._t("dropdown-menu",(function(){return[n("ul",{staticClass:"dropdown-menu",class:[{show:t.show},{"dropdown-menu-end":t.menuAlignRight}]},[t._t("default")],2)]}))],2)};Xe._withStripped=!0;var Ye=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("li",{ref:"submenu",class:[t.addClass,"dropdown-submenu",{dropend:t.dropright,dropstart:t.dropleft}]},[t._t("button",(function(){return[n("a",{staticClass:"dropdown-item submenu-toggle",class:{disabled:t.disabled},attrs:{role:"button","data-bs-toggle":"dropdown"}},[t._t("header")],2)]})),t._v(" "),t._t("dropdown-menu",(function(){return[n("ul",{staticClass:"dropdown-menu"},[t._t("default")],2)]}))],2)};function Ke(t,n){for(var i=0;i1&&void 0!==arguments[1])||arguments[1];return this&&this.length&&t?(this.each((function(e){tn.push({el:e,callback:t})})),Ge||(Ge=function(t){tn.forEach((function(e){e.el&&(e.el.contains(t.target)||e.el===t.target||e.callback.call(e.el,t,e.el))}))},document.addEventListener("click",Ge,!1),e&&document.addEventListener("touchstart",Ge,!1)),this):this}},{key:"offBlur",value:function(t){return this.each((function(e){tn=tn.filter((function(n){return!(n&&n.el===e&&(!t||n.callback===t))&&e}))})),this}}])&&Ke(e.prototype,n),i&&Ke(e,i),Object.defineProperty(e,"prototype",{writable:!1}),t}(),an=sn.prototype;function ln(t,e){var n=[];return Ze.forEach.call(t,(function(i){if(nn(i))~n.indexOf(i)||n.push(i);else if(on(i))for(var o in i)n.push(i[o]);else if(null!==i)return t.get=an.get,t.set=an.set,t.call=an.call,t.owner=e,t})),hn(n,e)}Object.getOwnPropertyNames(Ze).forEach((function(t){"join"!==t&&"copyWithin"!==t&&"fill"!==t&&void 0===an[t]&&(an[t]=Ze[t])})),window&&window.Symbol&&Symbol.iterator&&(an[Symbol.iterator]=an.values=Ze[Symbol.iterator]);var cn=document&&document.createElement("div");function un(t){var e=this;an[t]||(cn[t]instanceof Function?an[t]=function(){for(var n=[],i=!0,o=arguments.length,r=new Array(o),s=0;sn))},preventOverflow:function(t){t.removeAttribute("style");var e=0,n=(window.innerWidth,window.innerHeight),i=t.getBoundingClientRect();if(void 0!==i){var o=i.y,r=(i.x,i.x,t.offsetWidth,i.y+t.offsetHeight);r>n?t.setAttribute("style","bottom: auto; top: ".concat(-(r-n),"px;")):owindow.innerWidth)e.setAttribute("style","left: 0px;");else{var i=e.parentNode.getBoundingClientRect(),o=i.left+e.offsetWidth-window.innerWidth,r=o<0?i.left:i.left-o;e.setAttribute("style","left: ".concat(r,"px;"))}}const vn=qe({props:{addClass:{type:String,default:""},disabled:{type:[Boolean,String],default:!1}},data:function(){return{show:!1,dropright:!0,dropleft:!1}},inject:{isParentNavbar:{default:!1}},computed:{disabledBool:function(){return Re(this.disabled)}},methods:{hideSubmenu:function(){this.show=!1,pn(this.$refs.submenu).find("ul.dropdown-menu").each((function(t){return t.classList.toggle("show",!1)})),this.alignMenuRight()},showSubmenu:function(){var t=this;this.show=!0,pn(this.$refs.submenu).findChildren("ul").each((function(e){e.classList.toggle("show",!0),window.innerWidth<768&&t.isParentNavbar?mn(e):(fn.isRightAlign(e)?t.alignMenuRight():t.alignMenuLeft(),fn.preventOverflow(e))}))},alignMenuRight:function(){this.dropright=!0,this.dropleft=!1},alignMenuLeft:function(){this.dropright=!1,this.dropleft=!0}},mounted:function(){var t=this,e=pn(this.$refs.submenu);this.show&&this.showSubmenu(),e.onBlur((function(){t.hideSubmenu()}),!1),e.findChildren("a,button").on("click",(function(e){return e.preventDefault(),e.stopPropagation(),t.disabledBool||(t.show?t.hideSubmenu():t.showSubmenu()),!1})),e.findChildren("a,button").on("mouseover",(function(n){if(n.preventDefault(),window.innerWidth>767){if(e.findChildren("ul.show").length>0||t.disabledBool)return!1;n.currentTarget.click(),t.$parent.$parent.$children.forEach((function(e){e.$el===t.$el?e.$refs.submenu.showSubmenu():e.$refs.submenu.hideSubmenu()}))}return!1}))},beforeDestroy:function(){var t=pn(this.$refs.submenu);t.offBlur(),t.findChildren("a,button").off(),t.findChildren("ul").off()}},Ye,[],!1,null,"6df16086",null).exports;const gn=qe({components:{Submenu:vn},props:{disabled:{type:[Boolean,String],default:!1},type:{type:String,default:"light"},menuAlignRight:{type:Boolean,default:!1},addClass:{type:String,default:""}},provide:{hasParentDropdown:!0},inject:{hasParentDropdown:{default:void 0},isParentNavbar:{default:!1}},data:function(){return{show:!1}},computed:{btnType:function(){return"btn-".concat(this.type)},disabledBool:function(){return Re(this.disabled)},isLi:function(){return this.$parent._navbar||this.$parent.menu||this.$parent._tabset},isSubmenu:function(){return this.hasParentDropdown},menu:function(){return!this.$parent||this.$parent.navbar},submenu:function(){return this.$parent&&(this.$parent.menu||this.$parent.submenu)},slots:function(){return this.$scopedSlots.default},hasBefore:function(){return!!this.$scopedSlots.before},btnWithBefore:function(){return this.hasBefore?"btn-with-before":""}},methods:{blur:function(){var t=this;this.unblur(),this._hide=setTimeout((function(){t._hide=null,t.hideDropdownMenu()}),100)},unblur:function(){this._hide&&(clearTimeout(this._hide),this._hide=null)},hideDropdownMenu:function(){var t=this;this.show=!1,pn(this.$refs.dropdown).findChildren("ul").each((function(e){e.classList.toggle("show",!1),window.innerWidth<768&&t.isParentNavbar&&e.style.removeProperty("left")}))},showDropdownMenu:function(){var t=this;this.show=!0,pn(this.$refs.dropdown).findChildren("ul").each((function(e){e.classList.toggle("show",!0),window.innerWidth<768&&t.isParentNavbar&&mn(e)}))}},mounted:function(){var t=this,e=pn(this.$refs.dropdown);this.$slots.button&&e.findChildren(".dropdown-toggle").forEach((function(t){return t.setAttribute("data-bs-toggle","dropdown")})),this.show&&this.showDropdownMenu(),e.onBlur((function(){t.hideDropdownMenu()}),!1),e.findChildren("a,button.dropdown-toggle").on("click",(function(e){return e.preventDefault(),t.disabledBool||(t.show?t.hideDropdownMenu():t.showDropdownMenu()),!1})),e.findChildren("ul").on("click","li>a",(function(e){e.target.classList.contains("submenu-toggle")||t.hideDropdownMenu()}))},beforeDestroy:function(){var t=pn(this.$refs.dropdown);t.offBlur(),t.findChildren("a,button").off(),t.findChildren("ul").off()}},Xe,[],!1,null,"12679d7e",null).exports;var yn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("nav",{ref:"navbar",class:["navbar","navbar-expand-md","d-print-none",t.themeOptions,t.addClass,t.fixedOptions]},[n("div",{staticClass:"container-fluid"},[n("div",{staticClass:"navbar-left"},[t._t("brand")],2),t._v(" "),n("div",{ref:"navbarDefault",staticClass:"navbar-default"},[n("ul",{staticClass:"navbar-nav me-auto mt-2 mt-lg-0"},[t._t("default")],2)]),t._v(" "),t.slots.right?n("ul",{staticClass:"navbar-nav navbar-right"},[t._t("right")],2):t._e()])]),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.isLowerNavbarShowing,expression:"isLowerNavbarShowing"}],ref:"lowerNavbar",staticClass:"lower-navbar-container"},[t._t("lower-navbar",(function(){return[n("site-nav-button"),t._v(" "),n("page-nav-button")]}))],2)])};function wn(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n0?this.isLowerNavbarShowing=!0:this.isLowerNavbarShowing=!1}},created:function(){this._navbar=!0},mounted:function(){var t=this,e=pn('.dropdown>[data-bs-toggle="dropdown"]',this.$el).parent();e.on("click",".dropdown-toggle",(function(t){t.preventDefault(),e.each((function(e){e.contains(t.target)&&e.classList.toggle("open")}))})).on("click",".dropdown-menu>li>a",(function(t){e.each((function(e){e.contains(t.target)&&e.classList.remove("open")}))})).onBlur((function(t){e.each((function(e){e.contains(t.target)||e.classList.remove("open")}))})),this.highlightLink(window.location.href);var n=pn(this.$refs.navbarDefault).find(".current")[0];n&&window.innerWidth<768&&n.offsetLeft+n.offsetWidth>window.innerWidth&&(this.$refs.navbarDefault.scrollLeft=n.offsetLeft+n.offsetWidth-window.innerWidth),this.toggleLowerNavbar(),pn(window).on("resize",this.toggleLowerNavbar),pn(this.$refs.navbarDefault).on("wheel",(function(e){window.innerWidth<768&&!function(t){for(var e=0;e0},srcWithoutFragment:function(){return this.src.split("#")[0]},shouldShowHeader:function(){return!this.localExpanded||!this.expandHeaderless},shouldShowPeek:function(){return this.peek&&!this.localExpanded},collapsedPanelHeight:function(){return this.peek?125:0}},data:function(){return{localExpanded:!1,localMinimized:!1,wasRetrieverLoaded:!1,isRetrieverLoadDone:!this.src,fragment:""}},methods:{toggle:function(){var t=this;this.wasRetrieverLoaded?(this.localExpanded?requestAnimationFrame((function(){if(t.$el.getBoundingClientRect().top<0){var e,n=document.querySelector("header[sticky]");if(null==n)e=0;else{var i=window.getComputedStyle(n,null);e=n.clientHeight-parseFloat(i.paddingTop)-parseFloat(i.paddingBottom)||0}window.scrollTo({top:window.scrollY+t.$el.getBoundingClientRect().top-e-3,left:0,behavior:"instant"})}t.$refs.panel.style.maxHeight="".concat(t.collapsedPanelHeight,"px")})):(this.$refs.panel.style.transition="max-height 0.5s ease-in-out",this.$refs.panel.style.maxHeight="".concat(this.getMaxHeight(),"px")),this.localExpanded=!this.localExpanded):this.open()},close:function(){this.localMinimized=!0,this.localExpanded=!1},open:function(){var t=this;this.localMinimized=!1,this.$nextTick((function(){t.initPanel(),t.localExpanded=!0,t.wasRetrieverLoaded=!0,t.$nextTick((function(){t.$refs.panel.style.maxHeight="".concat(t.getMaxHeight(),"px")}))}))},openPopup:function(){window.open(this.popupUrl)},retrieverUpdateMaxHeight:function(){this.isRetrieverLoadDone=!0,this.localExpanded&&(this.expandedBool?this.$refs.panel.style.maxHeight="none":this.$refs.panel.style.maxHeight="".concat(this.getMaxHeight(),"px"))},getMaxHeight:function(){if(!this.bottomSwitchBool)return this.$refs.panel.scrollHeight;var t=document.querySelector(".card-body > .collapse-button");if(null==t)return this.$refs.panel.scrollHeight;var e=window.getComputedStyle(t),n=parseFloat(e.marginBottom);return Number.isNaN(n)?this.$refs.panel.scrollHeight:this.$refs.panel.scrollHeight+n},initPanel:function(){var t=this;this.$refs.panel.addEventListener("transitionend",(function(e){t.localExpanded&&t.isRetrieverLoadDone&&e.target===t.$refs.panel&&(t.$refs.panel.style.maxHeight="none")})),this.localExpanded?this.$refs.panel.style.maxHeight="none":this.$refs.panel.style.maxHeight="".concat(this.collapsedPanelHeight,"px")}},created:function(){if(this.src){var t=Ie(this.src);t&&(this.fragment=t)}var e=!this.expandableBool&&"false"!==this.expanded;this.localExpanded=e||this.expandedBool,null===this.localExpanded&&(this.localExpanded=!1),this.wasRetrieverLoaded=this.localExpanded||this.peek,this.localMinimized=this.minimizedBool},mounted:function(){this.localMinimized||this.initPanel()}};var Pn=function(){var t=this.$createElement,e=this._self._c||t;return e("button",{class:["collapse-button","btn",this.isLightBg?"btn-outline-secondary":"btn-outline-light"],attrs:{type:"button"}},[e("span",{class:["collapse-icon","glyphicon","glyphicon-menu-down",{opened:this.isOpenBool}],attrs:{"aria-hidden":"true"}})])};Pn._withStripped=!0;const Ln=qe({props:{isOpen:{type:[Boolean,String],default:!1},isLightBg:{type:Boolean,default:!0}},computed:{isOpenBool:function(){return Re(this.isOpen)}}},Pn,[],!1,null,null,null).exports;var Nn=function(){var t=this.$createElement;return(this._self._c||t)("div",[this._v("\n Loading...\n")])};function An(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}Nn._withStripped=!0;const zn=qe({props:{src:{type:String,default:null},fragment:{type:String,default:null},delay:{type:[Boolean,String],default:!1},hasFetched:{type:Boolean,default:!1}},data:function(){return{hasFetchedCopy:this.hasFetched}},computed:{delayBool:function(){return Re(this.delay)},hash:function(){return Ie(this.src)||this.fragment},srcWithoutHash:function(){return this.src.split("#")[0]}},methods:{fetch:function(t){function e(){return t.apply(this,arguments)}return e.toString=function(){return t.toString()},e}((function(){var t=this;this.srcWithoutHash&&(this.hasFetchedCopy||fetch(this.srcWithoutHash).then((function(t){return t.text()})).then((function(e){var i=e;if(t.hash){var o=document.implementation.createHTMLDocument("");o.body.innerHTML=i,o.querySelectorAll("svg > script").forEach((function(t){return t.remove()})),i=o.querySelector("#".concat(t.hash)).innerHTML}if(t.hasFetchedCopy=!0,void 0===i&&t.hash)t.$el.innerHTML="Error: Failed to retrieve page fragment:"+" ".concat(t.srcWithoutHash,"#").concat(t.hash);else{var r=function(t){for(var e=1;e\n".concat(i,"\n"),data:function(){return r}}))).$mount(t.$el),t.$emit("src-loaded")}})).catch((function(e){console.error(e),t.$el.innerHTML="Error: Failed to retrieve content from source: "+"".concat(t.srcWithoutHash,""),t.$emit("src-loaded")})))}))},mounted:function(){this.$nextTick((function(){this.srcWithoutHash||(this.$el.innerHTML=""),this.delayBool||this.fetch()}))}},Nn,[],!1,null,null,null).exports;const Mn=qe({mixins:[On],components:{panelSwitch:Ln,retriever:zn},computed:{showCaret:function(){return this.isSeamless&&this.expandableBool},isSeamless:function(){return"seamless"===this.type},btnType:function(){return this.isSeamless||"light"===this.type?"btn-outline-secondary":"btn-outline-".concat(this.type||"secondary")},borderType:function(){return this.isSeamless?"border-0":this.type?"light"===this.type?"":"border-".concat(this.type):""},cardType:function(){return this.isSeamless?"bg-white":"bg-".concat(this.type||"light")},isLightBg:function(){return"bg-light"===this.cardType||"bg-white"===this.cardType||"bg-warning"===this.cardType}}},Bn,[],!1,null,"264cd63c",null).exports;var Hn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.localMinimized?n("span",{ref:"cardContainer",class:["card-container",t.addClass]},[t.hasId?n("span",{staticClass:"anchor",attrs:{id:t.panelId}}):t._e(),t._v(" "),n("span",{staticClass:"morph"},[n("button",{staticClass:"morph-display-wrapper btn card-title morph-title",on:{click:function(e){return t.minimalOpen()}}},[t.noMinimizedSwitch?t._e():n("div",{class:["glyphicon","glyphicon-chevron-right"]}),t._v(" "),t._t("_alt",(function(){return[n("span",{staticClass:"card-title"},[t._t("header")],2)]}))],2)])]):n("div",{ref:"cardContainer",class:["card-container",t.addClass]},[t.hasId?n("span",{staticClass:"anchor",attrs:{id:t.panelId}}):t._e(),t._v(" "),n("div",{staticClass:"card card-flex"},[n("div",{class:["header-wrapper",{"header-wrapper-bottom":t.isHeaderAtBottom,"header-toggle":t.isExpandableCard}],on:{click:function(e){e.preventDefault(),e.stopPropagation(),t.isExpandableCard&&t.minimalToggle()}}},[n("transition",{attrs:{name:"header-fade"}},[n("span",{directives:[{name:"show",rawName:"v-show",value:!t.isHeaderAtBottom,expression:"!isHeaderAtBottom"}],ref:"headerWrapper",class:["card-title",{ellipses:!t.hasHeaderBool}]},[n("span",{staticClass:"card-title-inline"},[t._t("header")],2),t._v(" "),n("span",{directives:[{name:"show",rawName:"v-show",value:t.showDownSwitch,expression:"showDownSwitch"}],staticClass:"minimal-button glyphicon glyphicon-menu-down minimal-menu-down",attrs:{"aria-hidden":"true"}})])]),t._v(" "),n("div",{class:["button-wrapper",{"button-wrapper-expanded":t.isHeaderAtBottom}]},[t._t("button",(function(){return[n("button",{directives:[{name:"show",rawName:"v-show",value:!t.noCloseBool,expression:"!noCloseBool"}],staticClass:"minimal-button",attrs:{type:"button"},on:{click:function(e){return e.stopPropagation(),t.minimalClose()}}},[n("span",{staticClass:"glyphicon glyphicon-remove minimal-close-button",attrs:{"aria-hidden":"true"}})]),t._v(" "),n("button",{directives:[{name:"show",rawName:"v-show",value:null!==t.popupUrl,expression:"popupUrl !== null"}],staticClass:"minimal-button",attrs:{type:"button"},on:{click:function(e){return e.stopPropagation(),t.openPopup()}}},[n("span",{staticClass:"glyphicon glyphicon-new-window minimal-popup-button",attrs:{"aria-hidden":"true"}})]),t._v(" "),n("button",{directives:[{name:"show",rawName:"v-show",value:t.isHeaderAtBottom&&t.isExpandableCard&&t.bottomSwitchBool,expression:"isHeaderAtBottom && isExpandableCard && bottomSwitchBool"}],staticClass:"minimal-button",attrs:{type:"button"}},[n("span",{staticClass:"glyphicon glyphicon-menu-up minimal-menu-up",attrs:{"aria-hidden":"true"}})])]}))],2)],1),t._v(" "),n("div",{ref:"panel",staticClass:"card-collapse",class:{"card-peek-collapsed":t.shouldShowPeek}},[t.wasRetrieverLoaded||t.preloadBool?n("div",{staticClass:"card-body"},[t._t("default"),t._v(" "),t.hasSrc?n("retriever",{ref:"retriever",attrs:{src:t.srcWithoutFragment,fragment:t.fragment},on:{"src-loaded":t.retrieverUpdateMaxHeight}}):t._e()],2):t._e()])])])};Hn._withStripped=!0;var Dn=qe({mixins:[On],components:{retriever:zn},data:function(){return{isHeaderAtBottom:!1}},computed:{showDownSwitch:function(){return this.hasHeaderBool&&this.isExpandableCard&&!this.noSwitchBool}},methods:{minimalToggle:function(){var t=this;if(this.localExpanded){this.$refs.panel.addEventListener("transitionend",(function e(n){n.target===t.$refs.panel&&(t.isHeaderAtBottom=!1,t.$refs.panel.removeEventListener("transitionend",e))}))}else this.isHeaderAtBottom=!0;this.toggle()},minimalOpen:function(){this.open(),this.isHeaderAtBottom=!0},minimalClose:function(){this.close(),this.isHeaderAtBottom=!1}},created:function(){this.isHeaderAtBottom=this.localExpanded}},Hn,[],!1,null,"01605258",null);const Rn=qe({components:{nestedPanel:Mn,minimalPanel:Dn.exports},props:{panelId:{type:String,default:null},type:{type:String,default:null}},computed:{isMinimal:function(){return"minimal"===this.type}}},En,[],!1,null,null,null).exports;var jn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["annotate-image-wrapper",t.addClass]},[n("img",{ref:"pic",staticClass:"annotate-image",attrs:{src:t.src,alt:t.alt,width:t.computedWidth,loading:t.computedLoadType},on:{"~load":function(e){return t.getWidth.apply(null,arguments)}}}),t._v(" "),n("div",{staticStyle:{top:"0",left:"0",height:"0"}},[t._t("default")],2)])};jn._withStripped=!0;const In=qe({props:{src:{type:String,default:null},alt:{type:String,default:null},height:{type:String,default:""},width:{type:String,default:""},eager:{type:Boolean,default:!1},addClass:{type:String,default:""}},computed:{hasWidth:function(){return""!==this.width},hasHeight:function(){return""!==this.height},computedWidth:function(){return this.hasWidth?this.width:this.widthFromHeight},computedLoadType:function(){return this.eager?"eager":"lazy"}},data:function(){return{widthFromHeight:""}},methods:{getWidth:function(){if(!this.hasWidth&&this.hasHeight){var t=this.$refs.pic,e=t.naturalHeight,n=t.naturalWidth/e;this.widthFromHeight=Math.round(je(this.height)*n)}}},provide:function(){return{width:this.width,height:this.height,src:this.src}}},jn,[],!1,null,null,null).exports;var qn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[t.hasBottomText&&t.hasLabel?n("div",{staticClass:"legend-wrapper"},[n("div",{staticClass:"text-header"},[t._v("\n "+t._s(t.computedBottomHeader)+"\n ")]),t._v(" "),t.hasContent?n("div",[t._v("\n "+t._s(t.content)+"\n ")]):t._e()]):t._e(),t._v(" "),n("div",{staticClass:"annotate-point"},[t.isMounted?n("div",{staticClass:"popover-annotation"},[n("div",{style:t.pointPosition},[t.isMounted?n("v-popover",{attrs:{placement:t.placement,delay:0,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,distance:t.computeDistance,disabled:!t.hasPopover,skidding:t.computeSkidding,"arrow-padding":t.computeArrowPadding,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[t.hasContent||t.hasHeader?n("div",{staticClass:"popover-container"},[t.hasHeader?n("h3",{staticClass:"popover-header"},[t._v("\n "+t._s(t.header)+"\n ")]):t._e(),t._v(" "),t.hasContent?n("div",{staticClass:"popover-body"},[t._v("\n "+t._s(t.content)+"\n ")]):t._e()]):t._e()]},proxy:!0}],null,!1,2937687922)},[n("div",{staticClass:"hover-wrapper"},[n("button",{staticClass:"hover-point",style:t.pointStyle}),t._v(" "),n("div",{staticClass:"hover-label",style:t.labelStyle},[t._v("\n "+t._s(t.label)+"\n ")])])]):t._e()],1)]):t._e()])])};qn._withStripped=!0;const Wn=qe({props:{content:{type:String,default:""},header:{type:String,default:""},placement:{type:String,default:"top"},x:{type:String,default:null},y:{type:String,default:null},color:{type:String,default:"green"},textColor:{type:String,default:"black"},fontSize:{type:String,default:"14"},opacity:{type:String,default:"0.3"},size:{type:String,default:"40"},label:{type:String,default:""},legend:{type:String,default:"popover"},trigger:{type:String,default:"click"}},data:function(){return{targetEl:{},isMounted:!1,width:this.width,height:this.height,src:this.src}},inject:["width","height","src"],computed:{pointPosition:function(){var t=this;this.computeImage((function(){t.width=t.parentEl.offsetWidth,t.height=t.parentEl.offsetHeight}));var e=100*(this.toDecimal(this.x)-this.size/2/this.width),n=100*(this.toDecimal(this.y)-this.size/2/this.height);return{left:"".concat(e,"%"),top:"".concat(n,"%"),position:"absolute",pointerEvents:"all"}},pointStyle:function(){var t=this.hasPopover?"pointer":"default";return{backgroundColor:this.color,opacity:this.opacity,width:"".concat(this.size,"px"),height:"".concat(this.size,"px"),cursor:t}},labelStyle:function(){return{fontSize:"".concat(Math.min(this.fontSize,this.size),"px"),color:this.textColor}},triggers:function(){return this.trigger.split(" ")},computeDistance:function(){return"top"===this.placement?je(this.size*(2/3)):je(this.size/10)},computeSkidding:function(){return"left"===this.placement||"right"===this.placement?-je(this.size/4):0},computeArrowPadding:function(){return"left"===this.placement||"right"===this.placement?je(this.size/2):0},hasHeader:function(){return""!==this.header},hasContent:function(){return""!==this.content},hasWidth:function(){return""!==this.width},hasHeight:function(){return""!==this.height},hasLabel:function(){return""!==this.label},hasBottomText:function(){return"bottom"===this.legend||"both"===this.legend},hasPopover:function(){return"popover"===this.legend||"both"===this.legend},computedBottomHeader:function(){return""!==this.label&&""===this.header?this.label:""===this.label&&""!==this.header?this.header:"".concat(this.label,": ").concat(this.header)}},methods:{computeImage:function(t){var e=new Image;e.onload=function(){t()},e.src=this.src},toDecimal:function(t){return parseFloat(t)/100}},mounted:function(){this.targetEl=this.$el,this.isMounted=!0,this.parentEl=this.$el.parentElement.parentElement.querySelector(".annotate-image")}},qn,[],!1,null,null,null).exports;var Fn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:["image-wrapper",t.addClass]},[n("img",{ref:"pic",staticClass:"img-fluid rounded",attrs:{src:t.src,alt:t.alt,width:t.computedWidth,loading:t.computedLoadType},on:{"~load":function(e){return t.computeWidth.apply(null,arguments)}}}),t._v(" "),n("span",{staticClass:"image-caption"},[t._t("default")],2)])};Fn._withStripped=!0;const Vn=qe({props:{src:{type:String,default:null},alt:{type:String,default:null},height:{type:String,default:""},width:{type:String,default:""},eager:{type:Boolean,default:!1},addClass:{type:String,default:""}},computed:{hasWidth:function(){return""!==this.width},hasHeight:function(){return""!==this.height},computedWidth:function(){return this.hasWidth?this.width:this.widthFromHeight},computedLoadType:function(){return this.eager?"eager":"lazy"}},data:function(){return{widthFromHeight:""}},methods:{computeWidth:function(){if(!this.hasWidth&&this.hasHeight){var t=this.$refs.pic,e=t.naturalHeight,n=t.naturalWidth/e;this.widthFromHeight=Math.round(je(this.height)*n).toString()}}}},Fn,[],!1,null,null,null).exports;var Un=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["quiz-container",t.addClass]},[n("transition",{attrs:{name:"intro-outro-card"},on:{"after-leave":t.showFirstQuestion}},[3===t.state?n("div",{staticClass:"card intro-outro-card"},[n("div",{staticClass:"card-body"},[t._t("intro",(function(){return[n("h4",[t._v("\n Click start to begin\n ")])]})),t._v(" "),n("h5",[t._v(t._s(t.questions.length)+" questions")]),t._v(" "),n("hr"),t._v(" "),n("button",{staticClass:"btn btn-primary d-inline-block",attrs:{type:"button"},on:{click:t.begin}},[t._v("\n Start\n ")])],2)]):t._e()]),t._v(" "),n("transition",{attrs:{name:"intro-outro-card"}},[n("div",{directives:[{name:"show",rawName:"v-show",value:4===t.state,expression:"state === 4"}],staticClass:"progress intro-outro-card",staticStyle:{height:"1px"}},[n("div",{staticClass:"progress-bar progress-bar-z",style:{width:t.currentQuestion/t.questions.length*100+"%"},attrs:{role:"progressbar","aria-valuemin":"0","aria-valuemax":t.questions.length,"aria-valuenow":t.currentQuestion}})])]),t._v(" "),t._t("default"),t._v(" "),n("transition",{attrs:{name:"intro-outro-card"},on:{"after-enter":t.setScoreCircleStyles,"after-leave":t.showFirstQuestion}},[5===t.state?n("div",{staticClass:"card intro-outro-card"},[n("div",{staticClass:"card-body"},[n("h4",{staticClass:"mb-3"},[t._v("\n "+t._s(t.scoreText)+"\n ")]),t._v(" "),n("svg",{attrs:{viewBox:"0 0 100 100",width:"120px",height:"120px"}},[n("circle",{staticClass:"score-background-circle",attrs:{cx:"50",cy:"50",r:"42"}}),t._v(" "),n("circle",{ref:"score",staticClass:"score-circle",attrs:{cx:"50",cy:"50",r:"42",transform:"rotate(-90, 50, 50)","stroke-dashoffset":"264"}}),t._v(" "),n("text",{staticClass:"score",attrs:{x:"22",y:"57",textLength:"56"}},[t._v(t._s(t.score)+" / "+t._s(t.questions.length))])]),t._v(" "),n("hr"),t._v(" "),n("button",{staticClass:"btn btn-outline-primary",attrs:{type:"button"},on:{click:t.begin}},[t._v("\n Retry\n ")])])]):t._e()])],2)};Un._withStripped=!0;const Qn=qe({name:"Quiz",props:{addClass:{type:String,default:null}},data:function(){return{currentQuestion:0,questions:[],score:0,state:3}},provide:function(){return{questions:this.questions,gotoNextQuestion:this.gotoNextQuestion,showNextQuestion:this.showNextQuestion}},computed:{scoreText:function(){return this.score/this.questions.length>.5?"Well done!":"Try again?"}},methods:{gotoNextQuestion:function(){this.questions[this.currentQuestion-1].hide(),this.currentQuestion+=1},showNextQuestion:function(){this.currentQuestion<=this.questions.length?this.questions[this.currentQuestion-1].show():this.complete()},begin:function(){this.currentQuestion=1,this.score=0,this.state=4},showFirstQuestion:function(){this.questions.length&&this.questions[0].show()},reset:function(){this.questions.forEach((function(t){return t.reset()}))},complete:function(){this.score=this.questions.filter((function(t){return 2===t.qState.state})).length,this.state=5,this.reset()},setScoreCircleStyles:function(){var t=this.score/this.questions.length;this.$refs.score.style.strokeDashoffset=264*(1-t),this.$refs.score.style.stroke="#51c2f8"}}},Un,[],!1,null,"7a8f322c",null).exports;var Xn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("transition",{attrs:{name:t.questions?"question":null},on:{"after-leave":t.showNextQuestion}},[t.active?n("div",{class:["card","question",t.shakeClass,t.addClass]},[t.$scopedSlots.header?n("div",{staticClass:"card-header alert-light border-bottom border-light text-dark"},[t._t("header")],2):t._e(),t._v(" "),n("div",{staticClass:"card-body"},[t._t("default"),t._v(" "),t.isTextQuestion()?n("div",{staticClass:"mb-2"},[n("textarea",{directives:[{name:"model",rawName:"v-model",value:t.textareaText,expression:"textareaText"}],staticClass:"form-control",attrs:{disabled:t.qState.answered},domProps:{value:t.textareaText},on:{input:function(e){e.target.composing||(t.textareaText=e.target.value)}}}),t._v(" "),t.qState.answered?n("div",[n("hr"),t._v(" "),t.keywordsSplitTrimmed().length?n("strong",[t._v("\n Keywords: \n "),t._l(t.keywordsSplitTrimmed(),(function(e){return n("span",{key:e,staticClass:"badge rounded-pill bg-light text-dark fw-normal"},[t._v("\n "+t._s(e)+"\n ")])}))],2):t._e()]):t._e()]):t._e(),t._v(" "),t.qState.answered&&t.isTextQuestion()?n("div",{staticClass:"answer"},[t._t("answer")],2):t._e(),t._v(" "),t.showHint?n("box",{staticClass:"mb-0 mt-3",attrs:{type:"tip"}},[t._t("hint")],2):t._e()],2),t._v(" "),t.showCardFooter?n("div",{staticClass:"card-footer alert-light border-top border-light text-dark"},[1===t.qState.state?n("i",{staticClass:"fa fa-times text-danger border-danger result-icon"}):2===t.qState.state?n("i",{staticClass:"fa fa-check text-success border-success result-icon"}):t._e(),t._v(" "),n("transition-group",{staticClass:"float-end",attrs:{name:"q-btn",tag:"div"}},[t.$scopedSlots.hint&&!t.showHint?n("button",{key:"hint",staticClass:"btn btn-success q-btn ms-1",attrs:{type:"button"},on:{click:function(e){t.showHint=!0}}},[t._v("\n Hint\n ")]):t._e(),t._v(" "),0!==t.qState.state||t.isTextWithoutKeywords()&&!t.$scopedSlots.answer?t._e():n("button",{key:"check",staticClass:"btn btn-primary q-btn ms-1",attrs:{type:"button"},on:{click:function(e){return t.checkAnswer(!!t.questions)}}},[t._v("\n Check\n ")]),t._v(" "),0!==t.qState.state&&t.questions?n("button",{key:"active",staticClass:"btn btn-primary q-btn ms-1",attrs:{type:"button"},on:{"~click":function(e){return t.gotoNextQuestion.apply(null,arguments)}}},[t._v("\n Next\n ")]):t._e(),t._v(" "),t.retryState?n("button",{key:"show",staticClass:"btn btn-info q-btn ms-1",attrs:{type:"button"},on:{click:function(e){return t.checkAnswer(!0)}}},[t._v("\n Show\n ")]):t._e(),t._v(" "),t.retryState?n("button",{key:"retry",staticClass:"btn btn-primary q-btn ms-1",attrs:{type:"button"},on:{click:function(e){return t.checkAnswer(!1)}}},[t._v("\n Retry\n ")]):t._e()])],1):t._e()]):t._e()])};Xn._withStripped=!0;function Yn(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function Kn(t){for(var e=1;e=this.threshold?this.markAsCorrect():this.markAsWrong(t)},checkTextAnswer:function(t){for(var e=this.textareaText.toLowerCase(),n=this.keywordsSplitTrimmed(),i=0,o=0;o=this.threshold?this.markAsCorrect():this.markAsWrong(t)},checkAnswer:function(t){"mcq"===this.type?this.checkMcqAnswer(t):"checkbox"===this.type?this.checkCheckboxAnswer(t):"blanks"===this.type?this.checkBlanksAnswer(t):this.isTextQuestion()?this.checkTextAnswer(t):this.markAsCorrect()}}},Xn,[],!1,null,"ae369d74",null).exports;var Zn=function(){var t=this,e=t.$createElement,n=t._self._c||e;return"mcq"===t.qOptionType?n("div",{class:["form-control",t.hintClass],on:{click:t.toggleRadioOn,mouseover:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1}}},[n("div",{class:["row",{disabled:t.qState.answered}]},[n("div",{staticClass:"col-auto p-0"},[n("svg",{staticClass:"radio-svg",attrs:{viewBox:"0 0 100 100"}},[n("circle",{attrs:{cx:"50",cy:"50",r:"47",fill:"none",stroke:"black","stroke-width":"4"}}),t._v(" "),n("circle",{directives:[{name:"show",rawName:"v-show",value:t.selected,expression:"selected"}],attrs:{cx:"50",cy:"50",r:"25",fill:"dodgerblue"}})])]),t._v(" "),n("div",{staticClass:"col content"},[t._t("default")],2),t._v(" "),n("div",{staticClass:"col-1"},[t.qState.answered?n("div",[t.correct?n("i",{staticClass:"fa fa-check text-success",class:{"align-bottom":t.$scopedSlots.reason}}):n("i",{staticClass:"fa fa-times text-danger",class:{"align-bottom":t.$scopedSlots.reason}})]):t._e()])]),t._v(" "),t.qState.answered&&t.$scopedSlots.reason?n("div",[n("hr"),t._v(" "),n("div",{staticClass:"reason"},[t._t("reason")],2)]):t._e()]):"checkbox"===t.qOptionType?n("div",{class:["form-control",t.hintClass],on:{click:t.toggleCheckbox,mouseover:function(e){t.hover=!0},mouseleave:function(e){t.hover=!1}}},[n("label",{class:["row","checkbox-label","m-0",{disabled:t.qState.answered}],on:{click:function(t){t.stopPropagation()}}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.selected,expression:"selected"}],staticClass:"checkbox",attrs:{disabled:t.qState.answered,type:"checkbox",onclick:"event.stopPropagation()"},domProps:{checked:Array.isArray(t.selected)?t._i(t.selected,null)>-1:t.selected},on:{change:function(e){var n=t.selected,i=e.target,o=!!i.checked;if(Array.isArray(n)){var r=t._i(n,null);i.checked?r<0&&(t.selected=n.concat([null])):r>-1&&(t.selected=n.slice(0,r).concat(n.slice(r+1)))}else t.selected=o}}}),t._v(" "),n("div",{staticClass:"col content"},[t._t("default")],2),t._v(" "),n("div",{staticClass:"col-auto"},[t.qState.answered?n("div",[t.correct?n("i",{staticClass:"fa fa-check text-success",class:{"align-bottom":t.$scopedSlots.reason}}):n("i",{staticClass:"fa fa-times text-danger",class:{"align-bottom":t.$scopedSlots.reason}})]):t._e()])]),t._v(" "),t.qState.answered&&t.$scopedSlots.reason?n("div",[n("hr"),t._v(" "),n("div",{staticClass:"reason"},[t._t("reason")],2)]):t._e()]):"blanks"===t.qOptionType?n("div",{class:["form-control","blanks-form-control",t.hintClass]},[n("label",{class:["row","m-0",{disabled:t.qState.answered}],on:{click:function(t){t.stopPropagation()}}},[n("input",{directives:[{name:"model",rawName:"v-model",value:t.inputText,expression:"inputText"}],staticClass:"form-control",attrs:{disabled:t.qState.answered},domProps:{value:t.inputText},on:{input:function(e){e.target.composing||(t.inputText=e.target.value)}}}),t._v(" "),n("div",{staticClass:"col-auto"},[t.qState.answered?n("div",[t.ansIsCorrect?n("i",{staticClass:"fa fa-check text-success"}):n("i",{staticClass:"fa fa-times text-danger blanks-cross"})]):t._e(),t._v(" "),t.isIntermediateResult()?n("div",[t.ansIsCorrect?n("i",{staticClass:"fa fa-check text-success"}):n("i",{staticClass:"fa fa-times text-danger blanks-cross"})]):t._e()]),t._v(" "),t.qState.answered?n("div",{staticClass:"col-auto blanks-keywords"},[t.keywordsSplitTrimmed().length?n("strong",[t._v("\n Keywords: \n "),t._l(t.keywordsSplitTrimmed(),(function(e){return n("span",{key:e,staticClass:"badge rounded-pill bg-light text-dark fw-normal"},[t._v("\n "+t._s(e)+"\n ")])}))],2):n("strong",[t._v("No answer checking keywords provided")])]):t._e()]),t._v(" "),t.qState.answered&&t.$scopedSlots.reason?n("div",[n("div",{staticClass:"reason blanks-reason"},[t._t("reason")],2)]):t._e()]):t._e()};Zn._withStripped=!0;const Jn=qe({name:"McqOption",props:{correct:{type:Boolean,default:!1},keywords:{type:String,default:""}},data:function(){return{selected:!1,hover:!1,inputText:"",ansIsCorrect:!1}},inject:{answers:{default:void 0},qOptionType:{default:void 0},qState:{default:void 0},noIntermediateResult:{default:void 0}},computed:{hintClass:function(){return this.qState.answered?this.correct?"success":"danger":this.selected||this.hover?"alert-light text-dark border border-secondary":""},answeredCorrectly:function(){return this.correct&&this.selected||!this.correct&&!this.selected}},methods:{checkAnswer:function(){var t=!1,e=this.inputText.toLowerCase().trim(),n=this.keywords.toLowerCase().split(",").filter((function(t){return""!==t.trim()}));this.keywords.length||(t=!0);for(var i=0;i=0;r-=1)o="".concat(o.slice(0,i[r].start),"")+"".concat(o.slice(i[r].start,i[r].end),"")+"".concat(o.slice(i[r].end));return o}}},ni,[],!1,null,"98afe086",null).exports;const oi=qe({created:function(){this.items=this.primitiveData},props:{data:{type:Array,default:function(){return[]}},limit:{type:Number,default:8},async:{type:String,default:""},keyProp:{type:String,default:null},onHit:{type:Function,default:function(t){this.reset(),this.value=t}},placeholder:{type:String,default:"Search"},delay:{type:Number,default:200},menuAlignRight:{type:Boolean,default:!1},algolia:{type:Boolean,default:!1}},data:function(){return{value:"",showDropdown:!1,noResults:!0,current:0,items:[]}},computed:{primitiveData:function(){function t(t,e){var n=t.join(" ");return e.reduce((function(t,e){var i=n.match(e);return t+(i?i.length:0)}),0)}if(this.value.length<2||!this.data)return[];var e=[],n=this.value.split(" ").filter((function(t){return""!==t})).map((function(t){return t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")})).map((function(t){return new RegExp(t,"ig")}));return this.data.forEach((function(i){var o=i.headings,r=i.src,s=i.title,a=i.headingKeywords,l=i.frontmatterKeywords||"",c=s||r.substring(0,r.lastIndexOf(".")),u=t([c,l].concat(_n(Object.values(o)),_n(Object.values(a))),n);if(u>0){var d=[];Object.entries(o).forEach((function(e,i){var o=ei(e,2),s=o[0],u=o[1],h=n.some((function(t){return t.test(u)})),p=a[s]&&a[s].some((function(t){return n.some((function(e){return e.test(t)}))}));if(h||p){var f=t([u].concat(_n(a[s]||[])),n);(0!==i||u!==c||l.length)&&d.push({heading:{id:s,text:u},keywords:a[s],src:r,totalMatches:f})}})),d.sort((function(t,e){return e.totalMatches-t.totalMatches})),e.push({headings:d,keywords:l,src:r,title:c,totalMatches:u})}})),e.sort((function(t,e){return e.totalMatches-t.totalMatches})).flatMap((function(t){return t.headings?[t].concat(_n(t.headings)):t}))},dropdownMenuClasses:function(){return["dropdown-menu","search-dropdown-menu",{show:this.showDropdown},{"d-none":!this.showDropdown},{"dropdown-menu-end":this.menuAlignRight}]}},methods:{update:function(){return this.value?(this.data&&(this.items=this.primitiveData,this.showDropdown=this.items.length>0),this.async&&this.query(),!0):(this.reset(),!1)},query:function(t,e){var n,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:100;function o(t){return/^[0-9]+$/.test(t)?Number(t)||1:null}return function(){for(var r=this,s=arguments.length,a=new Array(s),l=0;l0&&(this.current-=1,this.scrollListView())},scrollListView:function(){var t=this.$refs.dropdown,e=t.children[this.current],n=t.scrollTop,i=n+t.clientHeight,o=e.offsetTop+e.offsetHeight;e.offsetTopi&&(t.scrollTop=o-t.clientHeight)}},components:{searchbarPageItem:ii}},ti,[],!1,null,"01e11c9b",null).exports;var ri=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"tab-pane active printable-tab-pane",class:{"tab-pane-hide":!this.show},attrs:{role:"tabpanel"}},[e("div",{staticClass:"nav-tabs printable-tab-header"},[e("div",{ref:"header",staticClass:"nav-link active"},[this._t("header")],2)]),this._v(" "),this._t("default"),this._v(" "),e("hr")],2)};ri._withStripped=!0;const si=qe({props:{header:{type:String,default:""},disabled:{type:[Boolean,String],default:!1}},computed:{headerRendered:function(){return this.$refs.header.innerHTML},active:function(){return this._tabset.show===this},index:function(){return this._tabset.tabs.indexOf(this)},show:function(){return this._tabset&&this._tabset.show===this},disabledBool:function(){return Re(this.disabled)}},created:function(){this._ingroup=this.$parent&&this.$parent._tabgroup;for(var t=this;t&&!0!==t._tabset&&t.$parent;)t=t.$parent;t._tabset?(t.tabs.push(this),this._ingroup?~t.headers.indexOf(this.$parent)||t.headers.push(this.$parent):t.headers.push(this),this._tabset=t):this._tabset={},this._ingroup&&this.$parent.tabs.push(this)},beforeDestroy:function(){if(this._tabset.activeNumber===this.index&&(this._tabset.activeNumber=0),this._ingroup){var t=this.$parent.tabs.indexOf(this);this.$parent.tabs.splice(t,1)}this._tabset.tabs.splice(this.index,1)}},ri,[],!1,null,"661c1b61",null).exports;var ai=function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"printable-tab-group"},[e("div",{ref:"header",staticClass:"printable-tab-group-header"},[this._t("header")],2),this._v(" "),this._t("default")],2)};ai._withStripped=!0;const li=qe({props:{disabled:{type:[Boolean,String],default:!1},header:{type:String,default:""}},data:function(){return{tabs:[],show:!1}},computed:{active:function(){return~this.tabs.indexOf(this._tabset.show)},headerRendered:function(){return this.$refs.header.innerHTML},disabledBool:function(){return De(this.disabled)}},created:function(){this._tabgroup=!0;for(var t=this.$parent&&!0===this.$parent._tabset?this.$parent:{};t&&!t._tabset&&t.$parent;)t=t.$parent;t._tabset?this._tabset=t:(this._tabset={},this.show=!0)},methods:{blur:function(){this.show=!1},toggle:function(){this.show=!this.show}}},ai,[],!1,null,"a785351c",null).exports;var ci=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:[t.addClass,"printable-tabs"]},[n("ul",{staticClass:"nav nav-tabs d-print-none",class:t.getNavStyleClass,attrs:{role:"tablist"}},[t._l(t.headers,(function(e,i){return[e._tabgroup?n("dropdown",{key:i,staticClass:"nav-item",class:{active:e.active},attrs:{header:e.headerRendered,disabled:e.disabled}},t._l(e.tabs,(function(e,i){return n("li",{key:i},[n("a",{staticClass:"nav-link",class:{disabled:e.disabled},attrs:{href:"#"},domProps:{innerHTML:t._s(e.headerRendered)},on:{click:function(n){return n.preventDefault(),t.select(e)}}})])})),0):n("li",{key:i,staticClass:"nav-item",on:{click:function(n){return n.preventDefault(),t.select(e)}}},[n("a",{staticClass:"nav-link",class:{active:e.active,disabled:e.disabledBool},attrs:{href:"#"}},[n("span",{domProps:{innerHTML:t._s(e.headerRendered)}})])])]}))],2),t._v(" "),n("div",{ref:"tab-content",staticClass:"tab-content"},[t._t("default")],2)])};ci._withStripped=!0;const ui=qe({components:{dropdown:gn},props:{navStyle:{type:String,default:"tabs"},active:{type:String,default:"0"},addClass:{type:String,default:""}},data:function(){return{show:null,headers:[],activeNumber:je(this.active),tabs:[]}},created:function(){this._tabset=!0},computed:{getNavStyleClass:function(){return"nav-".concat(this.navStyle)}},watch:{activeNumber:function(t){this.show=this.tabs[t]}},mounted:function(){this.show=this.tabs[this.activeNumber]},methods:{select:function(t){t.disabled||(this.activeNumber=t.index)}}},ci,[],!1,null,"70a68808",null).exports;var di=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:["thumb-wrapper",{"thumb-circle":t.circle},t.addClass],style:[t.getBorder,t.getFontSize,t.getFontColor,t.getBgColor]},[t.hasSrc?n("img",{ref:"pic",staticClass:"thumb-image",attrs:{src:t.src,width:t.computedWidth,height:t.computedHeight,alt:t.alt},on:{"~load":function(e){return t.computeImgSize.apply(null,arguments)}}}):t._e(),t._v(" "),t._t("default")],2)};di._withStripped=!0;const hi=qe({props:{circle:{type:Boolean,default:!1},addClass:{type:String,default:""},alt:{type:String,default:""},background:{type:String,default:""},border:{type:String,default:""},fontColor:{type:String,default:""},fontSize:{type:String,default:""},size:{type:String,default:""},src:{type:String,default:null},text:{type:String,default:""}},computed:{getBorder:function(){return""===this.border?{}:{border:this.border}},getFontSize:function(){var t=this.imageSize/2,e=this.fontSize;return{"font-size":"".concat(void 0===e||""===e?t:e,"px")}},getFontColor:function(){return""===this.fontColor?{}:{color:this.fontColor}},getBgColor:function(){return""===this.background?{}:{background:this.background}},hasSrc:function(){return void 0!==this.src&&""!==this.src},imageSize:function(){return this.size||100}},data:function(){return{computedWidth:"",computedHeight:""}},mounted:function(){var t=this.$el;t.style.width="".concat(this.imageSize,"px"),t.style.height="".concat(this.imageSize,"px"),t.style.lineHeight="".concat(this.imageSize,"px")},methods:{computeImgSize:function(){var t=this.$refs.pic,e=t.naturalHeight,n=t.naturalWidth,i=Math.min(e,n),o=this.imageSize/i;this.computedWidth=n*o,this.computedHeight=e*o}}},di,[],!1,null,null,null).exports;var pi=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:"click"===t.trigger?"trigger-click":"trigger",attrs:{tabindex:"0"},on:t._d({},[t.triggerEventType,function(e){return e.stopPropagation(),t.toggle()}])},["popover"===t.popoverOrTooltipType?n("v-popover",{attrs:{"auto-hide":!t.isInput,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,placement:t.placement,delay:0,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[n("div",{staticClass:"popover-container"},[n("portal-target",{attrs:{name:"popover:"+t.target}})],1)]},proxy:!0}],null,!1,1583262462)},[t.isInput?t._t("default"):n("span",{on:{click:function(t){t.stopPropagation()}}},[t._t("default")],2)],2):"tooltip"===t.popoverOrTooltipType?n("v-tooltip",{attrs:{"auto-hide":!t.isInput,placement:t.placement,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,delay:0,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[n("portal-target",{attrs:{name:"tooltip:"+t.target}})]},proxy:!0}])},[t.isInput?t._t("default"):n("span",{on:{click:function(t){t.stopPropagation()}}},[t._t("default")],2)],2):n("span",[t._t("default")],2)],1)};pi._withStripped=!0;var fi=i(383);function mi(t){return(mi="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function vi(t,e){for(var n=0;nt.length)&&(e=t.length);for(var n=0,i=new Array(e);n1),Mi=[],Hi=!1,Di=0,Ri=-1,ji=function(t){return Mi.some((function(){return function(t,e){var n=!1;return function(t){for(var e=[];t;){if(e.push(t),t.classList.contains("vfm"))return e;t=t.parentElement}return e}(t).forEach((function(t){(function(t){if(!t||t.nodeType!==Node.ELEMENT_NODE)return!1;var e=window.getComputedStyle(t);return["auto","scroll"].includes(e.overflowY)&&t.scrollHeight>t.clientHeight})(t)&&function(t,e){return!(0===t.scrollTop&&e<0||t.scrollTop+t.clientHeight+e>=t.scrollHeight&&e>0)}(t,e)&&(n=!0)})),n}(t,-Di)}))},Ii=function(t){var e=t||window.event;return!!ji(e.target)||e.touches.length>1||(e.preventDefault&&e.preventDefault(),!1)},qi=function(t){t?(Mi=Mi.filter((function(e){return e.targetElement!==t})),zi?(t.ontouchstart=null,t.ontouchmove=null,Hi&&0===Mi.length&&(document.removeEventListener("touchmove",Ii,Oi?{passive:!1}:void 0),Hi=!1)):Mi.length||(void 0!==Ni&&(document.body.style.paddingRight=Ni,Ni=void 0),void 0!==Li&&(document.body.style.overflow=Li,Li=void 0))):console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.")},Wi=function(){},Fi="enter",Vi="entering",Ui="leave",Qi="leavng",Xi={type:[String,Object,Array],default:""},Yi={type:[Object,Array],default:function(){return{}}},Ki={t:"ns-resize",tr:"nesw-resize",r:"ew-resize",br:"nwse-resize",b:"ns-resize",bl:"nesw-resize",l:"ew-resize",tl:"nwse-resize"},Gi={props:{name:{type:String,default:null},value:{type:Boolean,default:!1},ssr:{type:Boolean,default:!0},classes:Xi,overlayClass:Xi,contentClass:Xi,styles:Yi,overlayStyle:Yi,contentStyle:Yi,lockScroll:{type:Boolean,default:!0},hideOverlay:{type:Boolean,default:!1},clickToClose:{type:Boolean,default:!0},escToClose:{type:Boolean,default:!1},preventClick:{type:Boolean,default:!1},attach:{type:null,default:!1,validator:function(t){var e=mi(t);return"boolean"===e||"string"===e||t.nodeType===Node.ELEMENT_NODE}},transition:{type:[String,Object],default:"vfm"},overlayTransition:{type:[String,Object],default:"vfm"},zIndexAuto:{type:Boolean,default:!0},zIndexBase:{type:[String,Number],default:1e3},zIndex:{type:[Boolean,String,Number],default:!1},focusRetain:{type:Boolean,default:!0},focusTrap:{type:Boolean,default:!1},fitParent:{type:Boolean,default:!0},drag:{type:Boolean,default:!1},dragSelector:{type:String,default:""},keepChangedStyle:{type:Boolean,default:!1},resize:{type:Boolean,default:!1},resizeDirections:{type:Array,default:function(){return["t","tr","r","br","b","bl","l","tl"]},validator:function(t){return["t","tr","r","br","b","bl","l","tl"].filter((function(e){return-1!==t.indexOf(e)})).length===t.length}},minWidth:{type:Number,default:0},minHeight:{type:Number,default:0},maxWidth:{type:Number,default:1/0},maxHeight:{type:Number,default:1/0}},data:function(){return{modalStackIndex:null,visible:!1,visibility:{modal:!1,overlay:!1,resize:!1},overlayTransitionState:null,modalTransitionState:null,stopEvent:!1,params:{},dragResizeStyle:{},resolveToggle:Wi,rejectToggle:Wi,state:null,lastMousedownEl:null}},computed:{isComponentReadyToBeDestroyed:function(){return(this.hideOverlay||this.overlayTransitionState===Ui)&&this.modalTransitionState===Ui},calculateZIndex:function(){return!1===this.zIndex?!!this.zIndexAuto&&+this.zIndexBase+2*(this.modalStackIndex||0):this.zIndex},bindStyle:function(){return wi({},!1!==this.calculateZIndex&&{zIndex:this.calculateZIndex})},bindContentStyle:function(){var t=[this.dragResizeStyle];return Array.isArray(this.contentStyle)?t.push.apply(t,bi(this.contentStyle)):t.push(this.contentStyle),t},computedTransition:function(){return"string"==typeof this.transition?{name:this.transition}:wi({},this.transition)},computedOverlayTransition:function(){return"string"==typeof this.overlayTransition?{name:this.overlayTransition}:wi({},this.overlayTransition)}},watch:{value:function(t){if(this.stopEvent)this.stopEvent=!1;else if(this.mounted(),!t){if(this.emitEvent("before-close",!0))return void this.rejectToggle("hide");this.close()}},lockScroll:"handleLockScroll",hideOverlay:function(t){this.value&&!t&&(this.visibility.overlay=!0)},attach:"mounted",isComponentReadyToBeDestroyed:function(t){t&&(this.visible=!1)},drag:function(t){this.visible&&(t?this.addDragDown():this.removeDragDown())},resize:function(t){this.visible&&(t?this.addResizeDown():this.removeResizeDown())},keepChangedStyle:function(t){t||(this.dragResizeStyle={})}},mounted:function(){this.api.modals.push(this),this.$focusTrap=new xi,this.mounted()},beforeDestroy:function(){var t,e=this;this.close(),this.lockScroll&&this.$refs.vfmContainer&&qi(this.$refs.vfmContainer),null==this||null===(t=this.$el)||void 0===t||t.remove();var n=this.api.modals.findIndex((function(t){return t===e}));this.api.modals.splice(n,1)},methods:{mounted:function(){var t=this;if(this.value){if(this.emitEvent("before-open",!1))return void this.rejectToggle("show");var e=this.getAttachElement();if(e||!1===this.attach){!1!==this.attach&&e.appendChild(this.$el);var n=this.api.openedModals.findIndex((function(e){return e===t}));-1!==n&&this.api.openedModals.splice(n,1),this.api.openedModals.push(this),this.modalStackIndex=this.api.openedModals.length-1,this.handleLockScroll(),this.api.openedModals.filter((function(e){return e!==t})).forEach((function(t,n){t.getAttachElement()===e&&(t.modalStackIndex=n,t.visibility.overlay=!1)})),this.visible=!0,this.$nextTick((function(){t.startTransitionEnter()}))}else!1!==e&&console.warn("Unable to locate target ".concat(this.attach))}},close:function(){var t=this,e=this.api.openedModals.findIndex((function(e){return e===t}));if(-1!==e&&this.api.openedModals.splice(e,1),this.api.openedModals.length>0){var n=this.api.openedModals[this.api.openedModals.length-1];(n.focusRetain||n.focusTrap)&&n.$refs.vfmContainer.focus(),!n.hideOverlay&&(n.visibility.overlay=!0)}this.drag&&this.removeDragDown(),this.resize&&this.removeResizeDown(),this.state=null,this.startTransitionLeave()},startTransitionEnter:function(){this.visibility.overlay=!0,this.visibility.modal=!0},startTransitionLeave:function(){this.visibility.overlay=!1,this.visibility.modal=!1},handleLockScroll:function(){var t=this;this.value&&this.$nextTick((function(){t.lockScroll?function(t,e){if(t){if(!Mi.some((function(e){return e.targetElement===t}))){var n={targetElement:t,options:e||{}};Mi=[].concat(bi(Mi),[n]),zi?(t.ontouchstart=function(t){1===t.targetTouches.length&&(Ri=t.targetTouches[0].clientY)},t.ontouchmove=function(e){1===e.targetTouches.length&&function(t,e){Di=t.targetTouches[0].clientY-Ri,!ji(t.target)&&(e&&0===e.scrollTop&&Di>0||function(t){return!!t&&t.scrollHeight-t.scrollTop<=t.clientHeight}(e)&&Di<0?Ii(t):t.stopPropagation())}(e,t)},Hi||(document.addEventListener("touchmove",Ii,Oi?{passive:!1}:void 0),Hi=!0)):function(t){if(void 0===Ni){var e=!!t&&!0===t.reserveScrollBarGap,n=window.innerWidth-document.documentElement.clientWidth;if(e&&n>0){var i=parseInt(getComputedStyle(document.body).getPropertyValue("padding-right"),10);Ni=document.body.style.paddingRight,document.body.style.paddingRight="".concat(i+n,"px")}}void 0===Li&&(Li=document.body.style.overflow,document.body.style.overflow="hidden")}(e)}}else console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.")}(t.$refs.vfmContainer,{reserveScrollBarGap:!0}):qi(t.$refs.vfmContainer)}))},getAttachElement:function(){return!1!==this.attach&&("string"==typeof this.attach?!!window&&window.document.querySelector(this.attach):this.attach)},beforeOverlayEnter:function(){this.overlayTransitionState=Vi},afterOverlayEnter:function(){this.overlayTransitionState=Fi},beforeOverlayLeave:function(){this.overlayTransitionState=Qi},afterOverlayLeave:function(){this.overlayTransitionState=Ui},beforeModalEnter:function(){this.modalTransitionState=Vi},afterModalEnter:function(){this.modalTransitionState=Fi,(this.focusRetain||this.focusTrap)&&this.$refs.vfmContainer.focus(),this.focusTrap&&this.$focusTrap.enable(this.$refs.vfmContainer),this.drag&&this.addDragDown(),this.resize&&this.addResizeDown(),this.$emit("opened",this.createModalEvent({type:"opened"})),this.resolveToggle("show")},beforeModalLeave:function(){this.modalTransitionState=Qi,this.$focusTrap.enabled()&&this.$focusTrap.disable()},afterModalLeave:function(){this.modalTransitionState=Ui,this.modalStackIndex=null,this.lockScroll&&qi(this.$refs.vfmContainer),this.keepChangedStyle||(this.dragResizeStyle={});var t=!1,e=this.createModalEvent({type:"closed",stop:function(){t=!0}});this.$emit("closed",e),this.resolveToggle("hide"),t||(this.params={})},onMousedown:function(t){this.lastMousedownEl=null==t?void 0:t.target},onMouseupContainer:function(){this.lastMousedownEl===this.$refs.vfmContainer&&"resize:move"!==this.state&&(this.$emit("click-outside",this.createModalEvent({type:"click-outside"})),this.clickToClose&&this.$emit("input",!1))},onEsc:function(){this.visible&&this.escToClose&&this.$emit("input",!1)},createModalEvent:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return wi({ref:this},t)},emitEvent:function(t,e){var n=!1,i=this.createModalEvent({type:t,stop:function(){n=!0}});return this.$emit(t,i),!!n&&(this.stopEvent=!0,this.$emit("input",e),!0)},emitState:function(t,e,n){this.state="".concat(e,":").concat(n),this.$emit(this.state,t)},toggle:function(t,e){var n=arguments,i=this;return new Promise((function(o,r){i.resolveToggle=function(t){o(t),i.resolveToggle=Wi},i.rejectToggle=function(t){r(t),i.rejectToggle=Wi};var s="boolean"==typeof t?t:!i.value;s&&2===n.length&&(i.params=e),i.$emit("input",s)}))},pointerDown:function(t){var e=this;t.stopPropagation();var n,i="resize",o="drag",r=this.$refs,s=r.vfmContainer,a=r.vfmContent,l=t.target.getAttribute("direction");if(l)n=i;else{if(!function(t,e,n){return""===n||bi(e.querySelectorAll(n)).includes(t.target)}(t,a,this.dragSelector))return;n=o}this.emitState(t,n,"start");var c,u,d,h,p=Ci(t),f=s.getBoundingClientRect(),m=a.getBoundingClientRect(),v="absolute"===window.getComputedStyle(a).position,g=ki(this.dragResizeStyle.top),y=ki(this.dragResizeStyle.left),w=function(){if(e.fitParent){var t={absolute:function(){return{minTop:0,minLeft:0,maxTop:f.height-m.height,maxLeft:f.width-m.width}},relative:function(){return{minTop:g+f.top-m.top,minLeft:y+f.left-m.left,maxTop:g+f.bottom-m.bottom,maxLeft:y+f.right-m.right}}};return v?t.absolute():t.relative()}return{}}(),b=n===i&&(c=document.body,u="cursor",d=Ki[l],h=c.style[u],c.style[u]=d,function(){c.style[u]=h}),_=function(t){t.stopPropagation(),e.emitState(t,n,"move");var r,s,a=Ci(t),c={x:a.x-p.x,y:a.y-p.y};n===i&&(c=e.getResizeOffset(l,c,f,m,v)),v?(r=m.top-f.top+c.y,s=m.left-f.left+c.x):(r=g+c.y,s=y+c.x),n===o&&e.fitParent&&(r=$i(w.minTop,r,w.maxTop),s=$i(w.minLeft,s,w.maxLeft));var u=wi(wi(wi({position:"relative",top:r+"px",left:s+"px",margin:"unset",touchAction:"none"},v&&{position:"absolute",transform:"unset",width:m.width+"px",height:m.height+"px"}),c.width&&{width:c.width+"px"}),c.height&&{height:c.height+"px"});e.dragResizeStyle=wi(wi({},e.dragResizeStyle),u)};Ei("move",document,_),Ei("up",document,(function t(o){o.stopPropagation(),n===i&&b&&b(),setTimeout((function(){e.emitState(o,n,"end")})),Bi("move",document,_),Bi("up",document,t)}))},addDragDown:function(){Ei("down",this.$refs.vfmContent,this.pointerDown),this.dragResizeStyle.touchAction="none"},removeDragDown:function(){Bi("down",this.$refs.vfmContent,this.pointerDown)},addResizeDown:function(){var t=this;this.visibility.resize=!0,this.$nextTick((function(){Ei("down",t.$refs.vfmResize,t.pointerDown)}))},removeResizeDown:function(){Bi("down",this.$refs.vfmResize,this.pointerDown),this.visibility.resize=!1},getResizeOffset:function(t,e,n,i,o){var r=this,s=function(t,e,o,s){var a,l=i[e],c=n[t]-i[t],u=(a=e).charAt(0).toUpperCase()+a.slice(1);return{axis:o,edgeName:e,min:s?c:-l,max:s?l:c,minEdge:r["min".concat(u)],maxEdge:r["max".concat(u)],getEdge:function(t){return i[e]-t*(s?1:-1)},getOffsetAxis:function(t,n){var o=i[e]-t;return n?s?o:0:(s?1:-1)*o/2}}},a={t:["top","height","y",!0],b:["bottom","height","y",!1],l:["left","width","x",!0],r:["right","width","x",!1]},l={x:0,y:0};return t.split("").forEach((function(t){var n=s.apply(void 0,bi(a[t]));l=wi(wi({},l),function(t){var n,i=e[t.axis];i=r.fitParent?$i(t.min,i,t.max):i;var s=$i(t.minEdge,t.getEdge(i),t.maxEdge);return i=t.getOffsetAxis(s,o),gi(n={},t.edgeName,s),gi(n,t.axis,i),n}(n))})),l}}},Zi=function(t,e,n,i,o,r,s,a,l,c){"boolean"!=typeof s&&(l=a,a=s,s=!1);var u,d="function"==typeof n?n.options:n;if(t&&t.render&&(d.render=t.render,d.staticRenderFns=t.staticRenderFns,d._compiled=!0,o&&(d.functional=!0)),i&&(d._scopeId=i),r?(u=function(t){(t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),e&&e.call(this,l(t)),t&&t._registeredComponents&&t._registeredComponents.add(r)},d._ssrRegister=u):e&&(u=s?function(t){e.call(this,c(t,this.$root.$options.shadowRoot))}:function(t){e.call(this,a(t))}),u)if(d.functional){var h=d.render;d.render=function(t,e){return u.call(e),h(t,e)}}else{var p=d.beforeCreate;d.beforeCreate=p?[].concat(p,u):[u]}return n},Ji="undefined"!=typeof navigator&&/msie [6-9]\\b/.test(navigator.userAgent.toLowerCase()),to={},eo=Zi({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.ssr||t.visible?n("div",{directives:[{name:"show",rawName:"v-show",value:!t.ssr||t.visible,expression:"!ssr || visible"}],staticClass:"vfm vfm--inset",class:[!1===t.attach?"vfm--fixed":"vfm--absolute",{"vfm--prevent-none":t.preventClick}],style:t.bindStyle,on:{keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"esc",27,e.key,["Esc","Escape"])?null:t.onEsc.apply(null,arguments)}}},[n("transition",t._b({ref:"vfmOverlayTransition",on:{"before-enter":t.beforeOverlayEnter,"after-enter":t.afterOverlayEnter,"before-leave":t.beforeOverlayLeave,"after-leave":t.afterOverlayLeave}},"transition",t.computedOverlayTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:!t.hideOverlay&&t.visibility.overlay,expression:"!hideOverlay && visibility.overlay"}],staticClass:"vfm__overlay vfm--overlay vfm--absolute vfm--inset",class:t.overlayClass,style:t.overlayStyle})]),t._v(" "),n("transition",t._b({ref:"vfmTransition",on:{"before-enter":t.beforeModalEnter,"after-enter":t.afterModalEnter,"before-leave":t.beforeModalLeave,"after-leave":t.afterModalLeave}},"transition",t.computedTransition,!1),[n("div",{directives:[{name:"show",rawName:"v-show",value:t.visibility.modal,expression:"visibility.modal"}],ref:"vfmContainer",staticClass:"vfm__container vfm--absolute vfm--inset vfm--outline-none",class:t.classes,style:t.styles,attrs:{"aria-expanded":t.visibility.modal.toString(),role:"dialog","aria-modal":"true",tabindex:"-1"},on:{mouseup:function(e){return e.target!==e.currentTarget?null:t.onMouseupContainer.apply(null,arguments)},mousedown:function(e){return e.target!==e.currentTarget?null:t.onMousedown.apply(null,arguments)}}},[n("div",{ref:"vfmContent",staticClass:"vfm__content",class:[t.contentClass,{"vfm--prevent-auto":t.preventClick}],style:t.bindContentStyle,on:{mousedown:function(e){return t.onMousedown(null)}}},[t._t("default",null,{params:t.params,close:function(){return t.$emit("input",!1)}}),t._v(" "),t.visibility.resize&&t.visibility.modal?n("div",{ref:"vfmResize",staticClass:"vfm__resize vfm--absolute vfm--inset vfm--prevent-none vfm--select-none vfm--touch-none"},t._l(t.resizeDirections,(function(t){return n("div",{key:t,staticClass:"vfm--absolute vfm--prevent-auto",class:"vfm--resize-"+t,attrs:{direction:t}})})),0):t._e()],2)])])],1):t._e()},staticRenderFns:[]},(function(t){t&&t("data-v-1cd72822_0",{source:".vfm--fixed[data-v-1cd72822]{position:fixed}.vfm--absolute[data-v-1cd72822]{position:absolute}.vfm--inset[data-v-1cd72822]{top:0;right:0;bottom:0;left:0}.vfm--overlay[data-v-1cd72822]{background-color:rgba(0,0,0,.5)}.vfm--prevent-none[data-v-1cd72822]{pointer-events:none}.vfm--prevent-auto[data-v-1cd72822]{pointer-events:auto}.vfm--outline-none[data-v-1cd72822]:focus{outline:0}.vfm-enter-active[data-v-1cd72822],.vfm-leave-active[data-v-1cd72822]{transition:opacity .2s}.vfm-enter[data-v-1cd72822],.vfm-leave-to[data-v-1cd72822]{opacity:0}.vfm--touch-none[data-v-1cd72822]{touch-action:none}.vfm--select-none[data-v-1cd72822]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vfm--resize-bl[data-v-1cd72822],.vfm--resize-br[data-v-1cd72822],.vfm--resize-tl[data-v-1cd72822],.vfm--resize-tr[data-v-1cd72822]{width:12px;height:12px;z-index:10}.vfm--resize-t[data-v-1cd72822]{top:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-tr[data-v-1cd72822]{top:-6px;right:-6px;cursor:nesw-resize}.vfm--resize-r[data-v-1cd72822]{top:0;right:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-br[data-v-1cd72822]{bottom:-6px;right:-6px;cursor:nwse-resize}.vfm--resize-b[data-v-1cd72822]{bottom:-6px;left:0;width:100%;height:12px;cursor:ns-resize}.vfm--resize-bl[data-v-1cd72822]{bottom:-6px;left:-6px;cursor:nesw-resize}.vfm--resize-l[data-v-1cd72822]{top:0;left:-6px;width:12px;height:100%;cursor:ew-resize}.vfm--resize-tl[data-v-1cd72822]{top:-6px;left:-6px;cursor:nwse-resize}",map:void 0,media:void 0})}),Gi,"data-v-1cd72822",!1,void 0,!1,(function(t){return function(t,e){return function(t,e){var n=Ji?e.media||"default":t,i=to[n]||(to[n]={ids:new Set,styles:[]});if(!i.ids.has(t)){i.ids.add(t);var o=e.source;if(e.map&&(o+="\n/*# sourceURL="+e.map.sources[0]+" */",o+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(e.map))))+" */"),i.element||(i.element=document.createElement("style"),i.element.type="text/css",e.media&&i.element.setAttribute("media",e.media),void 0===Ai&&(Ai=document.head||document.getElementsByTagName("head")[0]),Ai.appendChild(i.element)),"styleSheet"in i.element)i.styles.push(o),i.element.styleSheet.cssText=i.styles.filter(Boolean).join("\n");else{var r=i.ids.size-1,s=document.createTextNode(o),a=i.element.childNodes;a[r]&&i.element.removeChild(a[r]),a.length?i.element.insertBefore(s,a[r]):i.element.appendChild(s)}}}(t,e)}}),void 0,void 0),no=Zi({render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"modals-container"},t._l(t.api.dynamicModals,(function(e,i){return n(e.component,t._g(t._b({key:e.id,tag:"component",on:{closed:function(e){return t.slice(i)},"before-open":function(n){return t.beforeOpen(n,e,i)},opened:e.opened},scopedSlots:t._u([t._l(e.slots,(function(e,i){return{key:i,fn:function(){return[t.isString(e)?n("div",{key:i,domProps:{innerHTML:t._s(e)}}):n(e.component,t._g(t._b({key:i,tag:"component"},"component",e.bind,!1),e.on))]},proxy:!0}}))],null,!0),model:{value:e.value,callback:function(n){t.$set(e,"value",n)},expression:"modal.value"}},"component",e.bind,!1),e.on))})),1)},staticRenderFns:[]},void 0,{props:{},methods:{slice:function(t){this.api.dynamicModals.splice(t,1)},beforeOpen:function(t,e,n){var i=this;t.ref.params=e.params,this.$nextTick((function(){e.value||(i.slice(n),e.reject("show"))}))},isString:function(t){return"string"==typeof t}}},void 0,!1,void 0,!1,void 0,void 0,void 0);function io(t,e){var n=wi(wi({},t),{},{props:wi({},t.props)});return Object.assign(n.props,{api:{type:Object,default:function(){return e}}}),n}var oo=0,ro=function(){var t,e,n=(e=null,et().observable({show:function(t){for(var n=this,i=arguments.length,o=new Array(i>1?i-1:0),r=1;r1?e-1:0),i=1;i1&&void 0!==arguments[1]?arguments[1]:{},n=0===oo?so:ro(),i=n.$vfm,o=n.VueFinalModal,r=n.ModalsContainer;oo+=1;var s=e.key||"$vfm",a=e.componentName||"VueFinalModal",l=e.dynamicContainerName||"ModalsContainer";t.prototype[s]=i,t.component(a,o),t.component(l,r)}),uo=function(t){return{install:function(e,n){var i=Object.assign({},t,n);co(e,i)}}};uo.install=co;const ho=qe({name:"Trigger",components:{PortalTarget:fi.YC},props:{for:{type:String,default:""},trigger:{type:String,default:"hover focus"},placement:{type:String,default:"top"}},data:function(){return{popoverOrTooltipType:void 0,isInput:!1}},methods:{toggle:function(){this.for&&ao.show(this.for)}},computed:{triggerEventType:function(){return"click"===this.trigger||"focus"===this.trigger?this.trigger:"mouseenter"},triggers:function(){return this.trigger.split(" ")},target:function(){return this.for}},mounted:function(){if(this.isInput=this.$slots.default&&this.$slots.default.some((function(t){return"input"===t.tag})),this.for&&void 0===this.popoverOrTooltipType){var t=document.getElementById(this.for);if(!t)return;this.popoverOrTooltipType=t.dataset.mbComponentType}}},pi,[],!1,null,null,null).exports;var po=function(){var t=this.$createElement;return(this._self._c||t)("div",{staticClass:"site-nav-root"},[this._t("default")],2)};po._withStripped=!0;const fo=qe({name:"SiteNav",mounted:function(){var t=this,e=Sn(new URL(window.location.href).pathname);this.$el.querySelectorAll("a[href]").forEach((function(n){var i=Sn(n.getAttribute("href"));if(e===i){n.classList.add("current");for(var o=n.parentElement;o&&o!==t.$el;)"ul"===o.tagName.toLowerCase()&&o.classList.contains("site-nav-dropdown-container")&&o.classList.add("site-nav-dropdown-container-open"),o=o.parentElement}}))}},po,[],!1,null,null,null).exports;var mo=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("span",{class:[{"nav-menu-close-icon":t.show}],on:{click:function(e){return t.toggleNavMenu(void 0)}}},[t._t("navMenuIcon")],2),t._v(" "),n("div",{ref:"navMenuContainer",class:["nav-menu",{"nav-menu-open":t.show}],style:t.navbarHeight,on:{click:t.toggleNavMenu}},[n("portal-target",{attrs:{name:t.portalName,multiple:""}})],1)])};mo._withStripped=!0;var vo={};const go=qe({components:{PortalTarget:fi.YC},props:{type:{type:String,default:null},portalName:{type:String,default:null}},inject:{toggleLowerNavbar:{default:void 0}},data:function(){return{show:!1,navbarHeight:""}},methods:{toggleNavMenu:function(t){var e,n=this;t&&"a"===t.target.tagName.toLowerCase()||!t&&this.show?(document.body.style.removeProperty("overflow"),this.show=!1):(vo[e="closeOverlay"]&&vo[e].forEach((function(t){return t()})),document.body.style.overflow="hidden",this.show=!0,this.$nextTick((function(){var t=n.$refs.navMenuContainer,e=window.innerHeight-t.getBoundingClientRect().top;n.navbarHeight="height: ".concat(e,"px")})))}},mounted:function(){var t,e,n=this;this.toggleLowerNavbar&&this.toggleLowerNavbar(),e=function(){n.show=!1},vo[t="closeOverlay"]||(vo[t]=[]),vo[t].push(e)}},mo,[],!1,null,"1a3e7aee",null).exports;var yo=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n(t.tagName,t._b({tag:"component"},"component",t.$attrs,!1),[t._t("default"),t._v(" "),t.enablePortal?n("portal",{attrs:{to:t.to}},[n(t.tagName,t._b({tag:"component",class:[t.$vnode.data.staticClass||"","mb-mobile-nav"],style:t.$vnode.data.staticStyle},"component",t.$attrs,!1),[t._t("default")],2)],1):t._e()],2)};yo._withStripped=!0;const wo=qe({name:"OverlaySource",components:{Portal:fi.h_},props:{to:{type:String,default:void 0},tagName:{type:String,default:void 0}},data:function(){return{enablePortal:!1}},mounted:function(){this.enablePortal=!0}},yo,[],!1,null,"e6005420",null).exports;var bo=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:"click"===t.trigger?"trigger-click":"trigger",attrs:{"data-mb-component-type":"popover",tabindex:"0"}},[t.targetEl.id?n("portal",{attrs:{to:"popover:"+t.targetEl.id}},[t.hasHeader?n("h3",{staticClass:"popover-header"},[t._t("header")],2):t._e(),t._v(" "),n("div",{staticClass:"popover-body"},[t._t("content")],2)]):t._e(),t._v(" "),t.isMounted?n("v-popover",{attrs:{"auto-hide":!t.isInput,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,placement:t.placement,delay:0,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[n("div",{staticClass:"popover-container"},[t.hasHeader?n("h3",{staticClass:"popover-header"},[t._t("header")],2):t._e(),t._v(" "),n("div",{staticClass:"popover-body"},[t._t("content")],2)])]},proxy:!0}],null,!0)},[t.isInput?t._t("default"):n("span",{on:{click:function(t){t.stopPropagation()}}},[t._t("default")],2)],2):t._e()],1)};bo._withStripped=!0;const _o=qe({name:"Popover",components:{Portal:fi.h_},props:{trigger:{type:String,default:"hover focus"},placement:{type:String,default:"top"}},data:function(){return{targetEl:{},isMounted:!1}},computed:{triggers:function(){return this.trigger.split(" ")},hasHeader:function(){return!!this.$slots.header}},mounted:function(){this.targetEl=this.$el,this.isInput=this.$slots.default&&this.$slots.default.some((function(t){return"input"===t.tag})),this.isMounted=!0}},bo,[],!1,null,null,null).exports;var So=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("span",{class:"click"===t.trigger?"trigger-click":"trigger",attrs:{"data-mb-component-type":"tooltip",tabindex:"0"}},[t.targetEl.id?n("portal",{attrs:{to:"tooltip:"+t.targetEl.id}},[t._t("content")],2):t._e(),t._v(" "),t.isMounted?n("v-tooltip",{attrs:{"auto-hide":!t.isInput,triggers:t.triggers,"popper-triggers":t.triggers,"hide-triggers":t.triggers,placement:t.placement,delay:0,"shift-cross-axis":""},scopedSlots:t._u([{key:"popper",fn:function(){return[t._t("content")]},proxy:!0}],null,!0)},[t._v(" "),t.isInput?t._t("default"):n("span",{on:{click:function(t){t.stopPropagation()}}},[t._t("default")],2)],2):t._e()],1)};So._withStripped=!0;const xo=qe({name:"Tooltip",components:{Portal:fi.h_},props:{trigger:{type:String,default:"hover focus"},placement:{type:String,default:"top"}},data:function(){return{targetEl:{},isInput:!1,isMounted:!1}},computed:{triggers:function(){return this.trigger.split(" ")}},mounted:function(){this.targetEl=this.$el,this.isInput=this.$slots.default&&this.$slots.default.some((function(t){return"input"===t.tag})),this.isMounted=!0}},So,[],!1,null,null,null).exports;var Co=function(){var t=this,e=t.$createElement,n=t._self._c||e;return t.isMounted?n("vue-final-modal",{attrs:{ssr:"",name:t.id,"content-class":["modal-dialog",t.optionalModalSize,t.optionalCentering],"overlay-transition":"none",transition:t.effectClass,"click-to-close":"false"!==t.backdrop,"esc-to-close":"","z-index-base":"2000"},model:{value:t.show,callback:function(e){t.show=e},expression:"show"}},[n("div",{staticClass:"modal-content"},[t.hasHeader?n("div",{staticClass:"modal-header"},[n("h5",{staticClass:"modal-title"},[t._t("header")],2),t._v(" "),n("button",{staticClass:"btn-close",attrs:{type:"button","aria-label":"Close"},on:{click:function(e){return t.close()}}})]):t._e(),t._v(" "),n("div",{staticClass:"modal-body overflow-auto"},[t._t("default")],2),t._v(" "),t.hasFooter||t.hasOk?n("div",{staticClass:"modal-footer"},[t.hasFooter?t._t("footer"):n("button",{staticClass:"btn btn-primary",on:{click:function(e){return t.close()}}},[t._v("\n "+t._s(t.okText)+"\n ")])],2):t._e()])]):t._e()};Co._withStripped=!0;const $o=qe({name:"Modal",components:{VueFinalModal:lo},data:function(){return{show:!1,isMounted:!1,zoomEffect:{"enter-class":"modal-zoom","enter-to-class":"modal-zoom-show","leave-to-class":"modal-zoom","leave-class":"modal-zoom-show"}}},props:{okText:{type:String,default:""},effect:{type:String,default:"zoom"},id:{type:String,default:""},small:{type:Boolean,default:!1},large:{type:Boolean,default:!1},center:{type:Boolean,default:!1},backdrop:{type:String,default:""}},computed:{hasHeader:function(){return!!this.$slots.header},hasFooter:function(){return!!this.$slots.footer},hasOk:function(){return""!==this.okText},optionalModalSize:function(){return this.small||this.large?this.small?"modal-sm":"modal-lg":""},optionalCentering:function(){return this.center?"modal-dialog-centered":""},effectClass:function(){return"zoom"===this.effect?this.zoomEffect:"vfm"}},methods:{close:function(){this.show=!1}},mounted:function(){this.isMounted=!0}},Co,[],!1,null,null,null).exports;var ko=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{class:["scroll-top-button",t.getIconSize(),"d-print-none",{lighten:t.$data.isLighten}],style:t.iconStyle(),attrs:{"aria-hidden":"true"},on:{click:function(e){return t.handleScrollTop()}}},[t._t("icon",(function(){return[n("i",{class:["fas fa-arrow-circle-up"]})]}))],2)};ko._withStripped=!0;var To={box:We,breadcrumb:Ve,dropdown:gn,navbar:Tn,panel:Rn,annotate:In,aPoint:Wn,pic:Vn,quiz:Qn,question:Gn,qOption:Jn,retriever:zn,searchbar:oi,tab:si,tabGroup:li,tabs:ui,thumbnail:hi,trigger:ho,siteNav:fo,submenu:vn,siteNavButton:Cn,pageNavButton:kn,overlay:go,overlaySource:wo,popover:_o,tooltip:xo,modal:$o,VPopover:Ne,VTooltip:Ae,scrollTopButton:qe({name:"ScrollTopButton",props:{icon:{type:String,default:null},iconSize:{type:String,default:"lg"},iconColor:{type:String,default:null},bottom:{type:String,default:null},right:{type:String,default:null}},data:function(){return{isVisible:!1,isLighten:!1,timers:{showOrHideButtonTimer:0,lightenButtonTimer:0}}},methods:{initScrollTopButton:function(){window.addEventListener("scroll",this.promptScrollTopButton)},destroyScrollTopButton:function(){window.removeEventListener("scroll",this.promptScrollTopButton)},promptScrollTopButton:function(){this.resetScrollTopButton(),this.showOrHideScrollTopButton()},resetScrollTopButton:function(){clearTimeout(this.timers.showOrHideButtonTimer),clearTimeout(this.timers.lightenButtonTimer),this.isLighten=!1},showOrHideScrollTopButton:function(){var t=this;this.timers.showOrHideButtonTimer=setTimeout((function(){document.body.scrollTop>20||document.documentElement.scrollTop>20?(t.isVisible=!0,t.lightenScrollTopButton()):t.isVisible=!1}),100)},lightenScrollTopButton:function(){var t=this;this.timers.lightenButtonTimer=setTimeout((function(){t.isLighten||(t.isLighten=!0)}),1e3)},iconStyle:function(){var t={};return t.display=this.isVisible?"block":"none",this.iconColor&&(t.color=this.iconColor),t.bottom=this.bottom?this.bottom:"2%",t.right=this.right?this.right:"2%",t.position="fixed",t},handleScrollTop:function(){document.body.scrollIntoView({block:"start",behavior:"smooth"})},getIconSize:function(){return this.iconSize?"fa-".concat(this.iconSize):""}},mounted:function(){this.initScrollTopButton()},beforeDestroy:function(){this.destroyScrollTopButton()}},ko,[],!1,null,null,null).exports},Eo={closeable:Qe()};const Bo={MarkBindVue:{plugin:{install:function(t){Object.keys(Eo).forEach((function(e){t.directive(e,Eo[e])})),Object.keys(To).forEach((function(e){t.component(e,To[e])}))}},components:To,directives:Eo},appFactory:function(){return{data:function(){return{searchData:[]}},methods:{searchCallback:function(t){var e="".concat(baseUrl,"/").concat(t.src.replace(/.md$/,".html")),n=t.heading?"#".concat(t.heading.id):"";window.location="".concat(e).concat(n)}}}}};i(605);function Oo(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function Po(t){for(var e=1;e767&&n&&l()})).observe(t);var i,o=0,r=window.location.hash,s=function(){if(!(window.innerWidth>767)){if(r!==window.location.hash)return r=window.location.hash,void l();r=window.location.hash;var i=window.pageYOffset;if(!(window.innerHeight+i>=document.body.offsetHeight)){if(i>o){t.style.position="static";var s=t.getBoundingClientRect().top+e;if(t.style.position="sticky",s>0)return;n=!0,t.style.overflow="hidden",t.classList.add("hide-header")}else l();o=i}}};window.addEventListener("scroll",(function(){i&&clearTimeout(i),i=setTimeout(s,20)}))}function a(){var e=window.getComputedStyle(t,null);return t.clientHeight-parseFloat(e.paddingTop)-parseFloat(e.paddingBottom)}function l(){n=!1,t.classList.remove("hide-header")}}function zo(){document.querySelectorAll("script[style-bypass-vue-compilation]").forEach((function(t){var e=document.createElement("style");e.innerHTML=t.innerHTML,t.parentNode.replaceChild(e,t)})),Ao()}Vue.use(Lo.plugin),window.onload=function(){if(window.location.hash){var t=document.getElementById(window.location.hash.slice(1));t&&t.scrollIntoView({behavior:"smooth",block:"start",inline:"nearest"})}},window.handleSiteNavClick=function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(e){var n=t.getElementsByTagName("a");if(n.length)return void(window.location.href=n[0].href)}var i=t.nextElementSibling,o=t.lastElementChild.lastElementChild;i.classList.toggle("site-nav-dropdown-container-open"),o.classList.toggle("site-nav-rotate-icon")};const Mo={setup:function(){new Vue(Po(Po({render:function(t){return pageVueRenderFn.call(this,t)},staticRenderFns:pageVueStaticRenderFns},No()),{},{mounted:function(){zo()}})).$mount("#app",!0)},setupWithSearch:function(){new Vue(Po(Po({render:function(t){return pageVueRenderFn.call(this,t)},staticRenderFns:pageVueStaticRenderFns},No()),{},{mounted:function(){zo(),function(t){fetch("".concat(baseUrl,"/siteData.json")).then((function(t){return t.json()})).then((function(e){t.searchData=e.pages}))}(this)}})).$mount("#app",!0)}}})(),o=o.default})()); \ No newline at end of file diff --git a/markbind/material-icons/material-icons-outlined.woff b/markbind/material-icons/material-icons-outlined.woff index e480658..edeb9df 100644 Binary files a/markbind/material-icons/material-icons-outlined.woff and b/markbind/material-icons/material-icons-outlined.woff differ diff --git a/markbind/material-icons/material-icons-outlined.woff2 b/markbind/material-icons/material-icons-outlined.woff2 index 894359b..d44b948 100644 Binary files a/markbind/material-icons/material-icons-outlined.woff2 and b/markbind/material-icons/material-icons-outlined.woff2 differ diff --git a/markbind/material-icons/material-icons-round.woff b/markbind/material-icons/material-icons-round.woff index 588054b..bc0002b 100644 Binary files a/markbind/material-icons/material-icons-round.woff and b/markbind/material-icons/material-icons-round.woff differ diff --git a/markbind/material-icons/material-icons-round.woff2 b/markbind/material-icons/material-icons-round.woff2 index 0b56bbe..e9e305f 100644 Binary files a/markbind/material-icons/material-icons-round.woff2 and b/markbind/material-icons/material-icons-round.woff2 differ diff --git a/markbind/material-icons/material-icons-sharp.woff b/markbind/material-icons/material-icons-sharp.woff index f259235..80d8c99 100644 Binary files a/markbind/material-icons/material-icons-sharp.woff and b/markbind/material-icons/material-icons-sharp.woff differ diff --git a/markbind/material-icons/material-icons-sharp.woff2 b/markbind/material-icons/material-icons-sharp.woff2 index b468080..4062685 100644 Binary files a/markbind/material-icons/material-icons-sharp.woff2 and b/markbind/material-icons/material-icons-sharp.woff2 differ diff --git a/markbind/material-icons/material-icons-two-tone.woff b/markbind/material-icons/material-icons-two-tone.woff index 8e19ce5..ddf106c 100644 Binary files a/markbind/material-icons/material-icons-two-tone.woff and b/markbind/material-icons/material-icons-two-tone.woff differ diff --git a/markbind/material-icons/material-icons-two-tone.woff2 b/markbind/material-icons/material-icons-two-tone.woff2 index 209503c..8f79990 100644 Binary files a/markbind/material-icons/material-icons-two-tone.woff2 and b/markbind/material-icons/material-icons-two-tone.woff2 differ diff --git a/markbind/material-icons/material-icons.woff b/markbind/material-icons/material-icons.woff index 6cca193..88fdf4d 100644 Binary files a/markbind/material-icons/material-icons.woff and b/markbind/material-icons/material-icons.woff differ diff --git a/markbind/material-icons/material-icons.woff2 b/markbind/material-icons/material-icons.woff2 index ba80b6c..5492a6e 100644 Binary files a/markbind/material-icons/material-icons.woff2 and b/markbind/material-icons/material-icons.woff2 differ diff --git a/showcase.html b/showcase.html index 19529f2..af4866e 100644 --- a/showcase.html +++ b/showcase.html @@ -3,10 +3,8 @@ - - - MarkBind - Showcase - + + MarkBind - Showcase @@ -14,8 +12,7 @@ - - + @@ -23,11 +20,26 @@ const baseUrl = '' - + diff --git a/showcase.page-vue-render.js b/showcase.page-vue-render.js index ab72253..0f55d66 100644 --- a/showcase.page-vue-render.js +++ b/showcase.page-vue-render.js @@ -1,13 +1,13 @@ 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"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_m(0),_v(" "),_m(1)])} +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"}},[_m(0),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(1)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"flex-body"}},[_c('div',{attrs:{"id":"content-wrapper"}},[_c('h1',{attrs:{"id":"examples-of-markbind-websites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"examples-of-markbind-websites"}}),_v("Examples of MarkBind Websites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#examples-of-markbind-websites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h2',{attrs:{"id":"course-websites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"course-websites"}}),_v("Course Websites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#course-websites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://www.comp.nus.edu.sg/~cs2103"}},[_c('strong',[_v("CS2103/T Software Engineering")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.comp.nus.edu.sg/~cs2113"}},[_c('strong',[_v("CS2113/T Software Engineering and OOP")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-cs3281.github.io/website/"}},[_c('strong',[_v("CS3281&2 Thematic Systems Project")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-tic2002-2019.github.io/website/"}},[_c('strong',[_v("TIC2002 Introduction to Software Engineering")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-te3201.github.io/2020/"}},[_c('strong',[_v("TE3201 Software Engineering")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-cs3203.github.io/course-website/"}},[_c('strong',[_v("CS3203 Software Engineering Project")])])])]),_v(" "),_c('h2',{attrs:{"id":"online-books"}},[_c('span',{staticClass:"anchor",attrs:{"id":"online-books"}}),_v("Online Books"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#online-books","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://se-education.org/se-book/"}},[_c('strong',[_v("Software Engineering for Self-Directed Learners")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://se-education.org/learningresources/"}},[_c('strong',[_v("A Student's Guide to Software Engineering Tools & Techniques")])])])]),_v(" "),_c('h2',{attrs:{"id":"product-project-websites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"product-project-websites"}}),_v("Product/Project Websites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#product-project-websites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ul',[_c('li',[_v("This website "),_c('span',{staticClass:"dimmed"},[_v("(i.e., MarkBind website)")])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://reposense.org"}},[_c('strong',[_v("reposense.org")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://se-education.org"}},[_c('strong',[_v("se-education.org")])])])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])])} +with(this){return _c('div',{attrs:{"id":"content-wrapper"}},[_c('h1',{attrs:{"id":"examples-of-markbind-websites"}},[_v("Examples of MarkBind Websites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#examples-of-markbind-websites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h2',{attrs:{"id":"course-websites"}},[_v("Course Websites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#course-websites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://www.comp.nus.edu.sg/~cs2103"}},[_c('strong',[_v("CS2103/T Software Engineering")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.comp.nus.edu.sg/~cs2113"}},[_c('strong',[_v("CS2113/T Software Engineering and OOP")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-cs3281.github.io/website/"}},[_c('strong',[_v("CS3281&2 Thematic Systems Project")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-tic2002-2019.github.io/website/"}},[_c('strong',[_v("TIC2002 Introduction to Software Engineering")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-te3201.github.io/2020/"}},[_c('strong',[_v("TE3201 Software Engineering")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://nus-cs3203.github.io/course-website/"}},[_c('strong',[_v("CS3203 Software Engineering Project")])])])]),_v(" "),_c('h2',{attrs:{"id":"online-books"}},[_v("Online Books"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#online-books","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ul',[_c('li',[_c('a',{attrs:{"href":"https://se-education.org/se-book/"}},[_c('strong',[_v("Software Engineering for Self-Directed Learners")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://se-education.org/learningresources/"}},[_c('strong',[_v("A Student's Guide to Software Engineering Tools & Techniques")])])])]),_v(" "),_c('h2',{attrs:{"id":"product-project-websites"}},[_v("Product/Project Websites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#product-project-websites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ul',[_c('li',[_v("This website "),_c('span',{staticClass:"dimmed"},[_v("(i.e., MarkBind website)")])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://reposense.org"}},[_c('strong',[_v("reposense.org")])])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://se-education.org"}},[_c('strong',[_v("se-education.org")])])])])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/siteData.json b/siteData.json index 9856f3f..5a05bb6 100644 --- a/siteData.json +++ b/siteData.json @@ -58,7 +58,7 @@ "src": "userGuide/cliCommands.md", "title": "User Guide: Command Line Interface (CLI)", "headings": { - "markbind-cli": "MarkBind CLI", + "cli-commands": "CLI Commands", "overview": "Overview", "init-command": "init Command", "serve-command": "serve Command", @@ -72,7 +72,7 @@ "src": "userGuide/components/advanced.md", "title": "User Guide: Advanced Component Usage", "headings": { - "advanced-tips-and-tricks": "Advanced Tips and Tricks", + "advanced": "Advanced", "richer-formatting-of-attributes-using-slots": "Richer formatting of attributes using slots", "inserting-custom-classes-into-components": "Inserting custom classes into components" }, @@ -82,7 +82,7 @@ "src": "userGuide/components/imagesAndDiagrams.md", "title": "User Guide: Image & Diagram Components", "headings": { - "image-and-amp-diagram-components": "Image & Diagram Components", + "images-and-amp-diagrams": "Images & Diagrams", "pictures": "Pictures", "annotations": "Annotations", "thumbnails": "Thumbnails", @@ -95,12 +95,15 @@ "src": "userGuide/components/navigation.md", "title": "User Guide: Navigation Components", "headings": { - "navigation-components": "Navigation Components", + "navigation": "Navigation", "dropdowns": "Dropdowns", "search-bars": "Search Bars", "navbars": "Navbars", + "breadcrumbs": "Breadcrumbs", + "usage": "Usage", "site-navigation-menus": "Site Navigation Menus", - "page-navigation-menus": "Page Navigation Menus" + "page-navigation-menus": "Page Navigation Menus", + "scroll-to-top-button": "Scroll To Top Button" }, "headingKeywords": { "page-navigation-menus": [ @@ -112,7 +115,7 @@ "src": "userGuide/components/others.md", "title": "User Guide: Other Components", "headings": { - "other-components": "Other Components", + "others": "Others", "questions-and-quizzes": "Questions and Quizzes", "introduction": "Introduction", "mcq-and-checkbox-questions": "MCQ and Checkbox Questions", @@ -123,7 +126,9 @@ "text-questions": "Text Questions", "quizzes": "Quizzes", "which-of-the-following-is-true-2": "Which of the following is true?", - "german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-2": "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-2": "German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.", + "which-of-the-following-is-true-3": "Which of the following is true?", + "german-sociologist-called-the-process-of-simultaneously-analyzing-the-behavior-of-individuals-and-the-society-that-shapes-that-behavior-3": "German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________." }, "headingKeywords": {} }, @@ -131,7 +136,7 @@ "src": "userGuide/components/popups.md", "title": "User Guide: Pop-Up Components", "headings": { - "pop-up-components": "Pop-Up Components", + "pop-ups": "Pop-Ups", "tooltips": "Tooltips", "popovers": "Popovers", "modals": "Modals" @@ -142,7 +147,7 @@ "src": "userGuide/components/presentation.md", "title": "User Guide: Presentational Components", "headings": { - "presentational-components": "Presentational Components", + "presentation": "Presentation", "badges": "Badges", "boxes": "Boxes", "header": "Header 🚀", @@ -227,7 +232,7 @@ "using-variables": "Using variables", "custom-formatting": "Custom formatting", "adding-days": "Adding days", - "page-variables": "Page variables", + "nunjucks-variables": "Nunjucks variables", "advanced-formatting": "Advanced Formatting", "math-formulae": "Math Formulae", "relevant-tips-and-amp-tricks": "Relevant Tips & Tricks" @@ -247,7 +252,7 @@ "src": "userGuide/gitignoreFile.md", "title": "User Guide: .gitignore", "headings": { - "gitignore": ".gitignore" + "gitignore-file": ".gitignore File" }, "headingKeywords": {}, "frontmatterKeywords": ".gitignore" @@ -256,6 +261,7 @@ "src": "userGuide/glossary.md", "title": "Glossary", "headings": { + "glossary": "Glossary", "live-preview": "Live Preview " }, "headingKeywords": {} @@ -300,7 +306,7 @@ "markbind-extensions-to-markdown": " MarkBind Extensions to Markdown", "markbind-custom-syntax": " MarkBind Custom Syntax", "support-for-html-javascript-css": " Support for HTML, JavaScript, CSS", - "markbind-vue-components-and-bootstrap": " MarkBind Vue components and Bootstrap", + "support-for-bootstrap": " Support for Bootstrap", "support-for-nunjucks": " Support for Nunjucks" }, "headingKeywords": {} @@ -393,7 +399,7 @@ "src": "userGuide/themes.md", "title": "User Guide: Themes", "headings": { - "themes": "Themes", + "applying-themes": "Applying Themes", "specifying-a-theme": "Specifying a Theme", "supported-themes": "Supported Themes", "bootswatch-cerulean": "bootswatch-cerulean", @@ -496,6 +502,7 @@ "plugin-googleanalytics": "Plugin: GoogleAnalytics", "plugin-disqus": "Plugin: Disqus", "plugin-mathdelimiters": "Plugin: MathDelimiters", + "plugin-web3forms": "Plugin: Web3Forms", "using-external-plugins": "Using External Plugins", "adding-external-plugins": "Adding External Plugins", "writing-plugins": "Writing Plugins" diff --git a/userGuide/addingNavigationButtons.html b/userGuide/addingNavigationButtons.html index 826f5cf..ad27225 100644 --- a/userGuide/addingNavigationButtons.html +++ b/userGuide/addingNavigationButtons.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Adding Navigation Buttons - + + MarkBind - User Guide: Adding Navigation Buttons @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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">
 {% if previous_page != ''%}
 <span class="float-start">
@@ -47,7 +54,23 @@
 </div>
 <br>
 {% endmacro %}
-

Example Here is an example of how the default template's directory structure will look like after the changes.

root +

Example Here is an example of how the default template's directory structure will look like after the changes.

root ├── _markbind ├── _site ├── contents @@ -56,19 +79,51 @@ ├── stylesheets ├── index.md └── site.json -

Editing the content files

  1. Add the following code into the topic1.md file:
topic1.md
<!--- Add this to the top of the file -->
+

Editing the content files

  1. Add the following code into the topic1.md file:
topic1.md
<!--- Add this to the top of the file -->
 <span id="title" class="d-none">Topic 1</span>
 
 <!--- Add this to the end of the file -->
 {% from "njk/common.njk" import previous_next %}
 {{ previous_next('', 'topic2') }}
-
  1. Add the following code into the topic2.md file:
topic2.md
<!--- Add this to the top of the file -->
+
  1. Add the following code into the topic2.md file:
topic2.md
<!--- Add this to the top of the file -->
 <span id="title" class="d-none">Topic 2</span>
 
 <!--- Add this to the end of the file -->
 {% from "njk/common.njk" import previous_next %}
 {{ previous_next('topic1', '') }}
-

Example Here is an example of how the files will look like after the changes.

topic1.md
<span id="title" class="d-none">Topic 1</span>
+

Example Here is an example of how the files will look like after the changes.

topic1.md
<span id="title" class="d-none">Topic 1</span>
 
 <br>
 
@@ -78,7 +133,23 @@
 
 {% from "njk/common.njk" import previous_next %}
 {{ previous_next('', 'topic2') }}
-
topic2.md
<span id="title" class="d-none">Topic 2</span>
+
topic2.md
<span id="title" class="d-none">Topic 2</span>
 
 <br>
 <box>
@@ -87,14 +158,61 @@
 
 {% from "njk/common.njk" import previous_next %}
 {{ previous_next('topic1', '') }}
-

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


+

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


+ diff --git a/userGuide/addingNavigationButtons.page-vue-render.js b/userGuide/addingNavigationButtons.page-vue-render.js index 558c847..1667e4c 100644 --- a/userGuide/addingNavigationButtons.page-vue-render.js +++ b/userGuide/addingNavigationButtons.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("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 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[Name_Of_Section]")]),_v(".")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("[Name_Of_Section]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("{% from \"njk/common.njk\" import previous_next %}\n")]),_c('span',[_v("{{ previous_next('[Previous_Page_Filename]', '[Next_Page_Filename]') }}\n")])])]),_c('panel',{attrs:{"type":"info","expanded":"","no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Effect after changes are made")])])]},proxy:true}])},[_v(" "),_c('ol',[_c('li',[_v("Changing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[Name_Of_Section]")]),_v(" will affect the "),_c('strong',[_v("text in the navigation button")]),_v(" when attempting to navigate to the current page from the previous and next pages.")]),_v(" "),_c('li',[_v("Changing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[Previous_Page_Filename]")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[Next_Page_Filename]")]),_v(" will link the current page to the respective previous and next pages.")]),_v(" "),_c('li',[_v("Line 4 aims to "),_c('strong',[_v("import the previous_next function")]),_v(" from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("common.njk")]),_v(" file that you created earlier. You can refer to the Nunjucks docs for the syntax "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#import"}},[_v("here")]),_v(".")]),_v(" "),_c('li',[_v("Line 5 aims to "),_c('strong',[_v("call the previous_next function")]),_v(" you imported. You can refer to the Nunjucks docs for the syntax "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#variables"}},[_v("here")]),_v(".")])])])],1),_v(" "),_m(20),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{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":"#adding-navigation-buttons"}},[_v("Adding Navigation Buttons‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#adding-the-required-file-and-folder"}},[_v("Adding the required file and folder‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#editing-the-content-files"}},[_v("Editing the content files‎")])])])],1)])],1),_v(" "),_m(21)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_m(9),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(10),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_m(15),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(16),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_m(17),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_m(18),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(19),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_m(20),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_m(21),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(22),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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"},[_m(23),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(24),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_m(25),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("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 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[Name_Of_Section]")]),_v(".")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("[Name_Of_Section]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("{% from \"njk/common.njk\" import previous_next %}\n")]),_c('span',[_v("{{ previous_next('[Previous_Page_Filename]', '[Next_Page_Filename]') }}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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":"info","expanded":"","no-close":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Effect after changes are made")])])]},proxy:true}])},[_v(" "),_c('ol',[_c('li',[_v("Changing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[Name_Of_Section]")]),_v(" will affect the "),_c('strong',[_v("text in the navigation button")]),_v(" when attempting to navigate to the current page from the previous and next pages.")]),_v(" "),_c('li',[_v("Changing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[Previous_Page_Filename]")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[Next_Page_Filename]")]),_v(" will link the current page to the respective previous and next pages.")]),_v(" "),_c('li',[_v("Line 4 aims to "),_c('strong',[_v("import the previous_next function")]),_v(" from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("common.njk")]),_v(" file that you created earlier. You can refer to the Nunjucks docs for the syntax "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#import"}},[_v("here")]),_v(".")]),_v(" "),_c('li',[_v("Line 5 aims to "),_c('strong',[_v("call the previous_next function")]),_v(" you imported. You can refer to the Nunjucks docs for the syntax "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#variables"}},[_v("here")]),_v(".")])])])],1),_v(" "),_m(26),_v(" "),_c('br')],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":"#adding-navigation-buttons"}},[_v("Adding Navigation Buttons‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#adding-the-required-file-and-folder"}},[_v("Adding the required file and folder‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#editing-the-content-files"}},[_v("Editing the content files‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(27)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,7 +11,7 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/addingNavigationButtons.html"}},[_c('em',[_v("User Guide → Adding Navigation Buttons")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"adding-navigation-buttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-navigation-buttons"}}),_v("Adding Navigation Buttons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-navigation-buttons","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"adding-navigation-buttons"}},[_v("Adding Navigation Buttons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-navigation-buttons","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("Navigation buttons can "),_c('strong',[_v("greatly help your website visitors browse through your content with ease")]),_v(".")])])} @@ -26,13 +26,16 @@ with(this){return _c('ol',[_c('li',[_v("Define a function to read the page title with(this){return _c('p',[_v("In the following example, we will be editing the site content generated from the "),_c('a',{attrs:{"href":"/userGuide/templates.html#templates"}},[_v("default template")]),_v(" (by running "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(" in the terminal).")])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"adding-the-required-file-and-folder"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-the-required-file-and-folder"}}),_v("Adding the required file and folder"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-the-required-file-and-folder","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"adding-the-required-file-and-folder"}},[_v("Adding the required file and folder"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-the-required-file-and-folder","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('ol',[_c('li',[_v("Create a folder "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("njk")]),_v(" in the root directory.")]),_v(" "),_c('li',[_v("In the folder, create a file "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("common.njk")]),_v(" with the following code:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("common.njk")])])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**common.njk**","class":"hljs html"}},[_c('span',[_v("{% macro previous_next(previous_page, next_page) %}\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("\"clearfix\"")]),_v(">")]),_v("\n")]),_c('span',[_v("{% if previous_page != ''%}\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("\"float-start\"")]),_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("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{ previous_page }}.html\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":far-arrow-alt-circle-left: "),_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("\"{{ previous_page }}.md#title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("{% endif %}\n")]),_c('span',[_v("{% if next_page != ''%}\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("\"float-end\"")]),_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("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{ next_page }}.html\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{ next_page }}.md#title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" />")]),_v(" :far-arrow-alt-circle-right:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("{% endif %}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("{% endmacro %}\n")])])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("common.njk")])])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"**common.njk**","class":"hljs html"}},[_c('span',[_v("{% macro previous_next(previous_page, next_page) %}\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("\"clearfix\"")]),_v(">")]),_v("\n")]),_c('span',[_v("{% if previous_page != ''%}\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("\"float-start\"")]),_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("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{ previous_page }}.html\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":far-arrow-alt-circle-left: "),_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("\"{{ previous_page }}.md#title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("{% endif %}\n")]),_c('span',[_v("{% if next_page != ''%}\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("\"float-end\"")]),_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("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{ next_page }}.html\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{ next_page }}.md#title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" />")]),_v(" :far-arrow-alt-circle-right:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("{% endif %}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("{% endmacro %}\n")])])} },function anonymous( ) { with(this){return _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 is an example of how the default template's directory structure will look like after the changes.")])} @@ -41,33 +44,48 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _c('div',{staticClass:"indented"},[_c('div',{staticClass:"tree"},[_v("root\n├── _markbind\n├── _site\n├── contents\n├── njk/\n│ └── common.njk\n├── stylesheets\n├── index.md\n└── site.json\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"editing-the-content-files"}},[_c('span',{staticClass:"anchor",attrs:{"id":"editing-the-content-files"}}),_v("Editing the content files"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#editing-the-content-files","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"editing-the-content-files"}},[_v("Editing the content files"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#editing-the-content-files","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('ol',[_c('li',[_v("Add the following code into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("topic1.md")]),_v(" file:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("topic1.md")])])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**topic1.md**","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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("Topic 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("{% from \"njk/common.njk\" import previous_next %}\n")]),_c('span',[_v("{{ previous_next('', 'topic2') }}\n")])])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("topic1.md")])])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"**topic1.md**","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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("Topic 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("{% from \"njk/common.njk\" import previous_next %}\n")]),_c('span',[_v("{{ previous_next('', 'topic2') }}\n")])])} },function anonymous( ) { with(this){return _c('ol',{attrs:{"start":"2"}},[_c('li',[_v("Add the following code into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("topic2.md")]),_v(" file:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("topic2.md")])])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**topic2.md**","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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("Topic 2"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("{% from \"njk/common.njk\" import previous_next %}\n")]),_c('span',[_v("{{ previous_next('topic1', '') }}\n")])])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("topic2.md")])])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"**topic2.md**","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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("Topic 2"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("{% from \"njk/common.njk\" import previous_next %}\n")]),_c('span',[_v("{{ previous_next('topic1', '') }}\n")])])} },function anonymous( ) { with(this){return _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 is an example of how the files will look like after the changes.")])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("topic1.md")])])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**topic1.md**","class":"line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("Topic 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Topic 1\n")]),_c('span',[_v("\n")]),_c('span',[_v("> More content to be added\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{% from \"njk/common.njk\" import previous_next %}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{{ previous_next('', 'topic2') }}")]),_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("topic2.md")])])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**topic2.md**","class":"line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("Topic 2"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\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("\"fas fa-tools\"")]),_v(">")]),_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("span")]),_v(">")]),_v(" This is a placeholder page"),_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":"highlighted"}},[_v("{% from \"njk/common.njk\" import previous_next %}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{{ previous_next('topic1', '') }}")]),_v("\n")])])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("topic1.md")])])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"**topic1.md**","class":"line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("Topic 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Topic 1\n")]),_c('span',[_v("\n")]),_c('span',[_v("> More content to be added\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{% from \"njk/common.njk\" import previous_next %}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{{ previous_next('', 'topic2') }}")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("topic2.md")])])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"**topic2.md**","class":"line-numbers hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("Topic 2"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\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("\"fas fa-tools\"")]),_v(">")]),_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("span")]),_v(">")]),_v(" This is a placeholder page"),_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":"highlighted"}},[_v("{% from \"njk/common.njk\" import previous_next %}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{{ previous_next('topic1', '') }}")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("You should now be able to navigate between "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Topic 1")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Topic 2")]),_v(" with ease!")])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Redirecting to a Custom 404 Page")])])])])])])} +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Redirecting to a Custom 404 Page")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/templates.html"}},[_c('span',[_c('span',[_v("Templates")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/addingPages.html b/userGuide/addingPages.html index a51aee4..37b4702 100644 --- a/userGuide/addingPages.html +++ b/userGuide/addingPages.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Adding Pages - + + MarkBind - User Guide: Adding Pages @@ -14,8 +12,7 @@ - - + @@ -23,12 +20,53 @@ 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


+ diff --git a/userGuide/addingPages.page-vue-render.js b/userGuide/addingPages.page-vue-render.js index b758685..f3e181f 100644 --- a/userGuide/addingPages.page-vue-render.js +++ b/userGuide/addingPages.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("It is easy to add files to a MarkBind site as any file inside the "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(" becomes a part of the generated website.")],1)])]),_v(" "),_c('p',[_v("This includes any static assets such as images and other media files.")]),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_c('p',[_v("Here are the steps to add a new page to your site:")]),_v(" "),_c('ol',[_m(8),_v(" "),_m(9),_v(" "),_c('li',[_v("Use the "),_c('trigger',{attrs:{"trigger":"click","for":"modal:addingPages-livePreview"}},[_v("live preview")]),_v(" to view the generated web page for the new file.")],1)]),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:addingPages-livePreview"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Live Preview")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("Regeneration of affected content upon any change to "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]},proxy:true}])},[_v("source files")]),_v(", then reloading the updated site in the Browser.")],1)]),_v(" "),_c('li',[_c('p',[_v("Regeneration will also occur upon any modification to attributes in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" with the exception of "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Copying "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("files that don't affect page generation (eg. images), but are used in the site")]},proxy:true}])},[_v("assets")]),_v(" to the site output folder.")],1)])]),_v(" "),_c('p',[_v("Use "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.")])])]),_v(" "),_m(10),_v(" "),_c('p',[_v("You can easily include and deploy any external "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".html")]),_v(" files that are built using other tools")]},proxy:true}])},[_v("HTML web pages")]),_v(", along with your MarkBind site.")],1),_v(" "),_m(11),_v(" "),_c('p',[_v("The general approach is as follows:")]),_v(" "),_c('ol',[_c('li',[_v("Create a folder with the path that you want the HTML web page to be available at.")]),_v(" "),_c('li',[_v("Exclude the files from being further processed by MarkBind by adding them to the "),_c('trigger',{attrs:{"trigger":"click","for":"modal:addingPages-prevent-processing"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")]),_v(" attribute of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file")]),_v(".")],1),_v(" "),_c('li',[_v("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).")]),_v(" "),_m(12),_v(" "),_c('li',[_v("Deploy the built files manually or using a continuous integration process.")])]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("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 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{no-validation}")]),_v(" at the end like this:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs md"}},[_c('span',[_v("This is ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("my cool page generated from another tool")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("/my-cool-page/index.html{no-validation}")]),_v(")\n")])])]),_c('p',[_v("See the "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intra-site-links"}},[_v("link Validation section")]),_v(" for more details.")])]),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:addingPages-prevent-processing"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Prevent Further Processing")]},proxy:true}])},[_v(" "),_c('p',[_v("To prevent MarkBind from further processing any of the static assets (in the event that these files are generated from other tools or already processed), you can include")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pagesExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yourStaticFolder/*\"")]),_v("]\n")])])]),_c('p',[_v("in your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file. See the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#pagesexclude"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")]),_v(" attribute")]),_v(" for more details. Alternatively, you can configure the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#pages"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")]),_v(" attribute")]),_v(" accordingly.")])]),_v(" "),_m(13),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(14)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("It is easy to add files to a MarkBind site as any file inside the "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(" becomes a part of the generated website.")],1)])]),_v(" "),_c('p',[_v("This includes any static assets such as images and other media files.")]),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_c('p',[_v("Here are the steps to add a new page to your site:")]),_v(" "),_c('ol',[_m(8),_v(" "),_m(9),_v(" "),_c('li',[_v("Use the "),_c('trigger',{attrs:{"trigger":"click","for":"modal:addingPages-livePreview"}},[_v("live preview")]),_v(" to view the generated web page for the new file.")],1)]),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:addingPages-livePreview"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Live Preview")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("Regeneration of affected content upon any change to "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]},proxy:true}])},[_v("source files")]),_v(", then reloading the updated site in the Browser.")],1)]),_v(" "),_c('li',[_c('p',[_v("Regeneration will also occur upon any modification to attributes in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" with the exception of "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Copying "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("files that don't affect page generation (eg. images), but are used in the site")]},proxy:true}])},[_v("assets")]),_v(" to the site output folder.")],1)])]),_v(" "),_c('p',[_v("Use "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.")])])]),_v(" "),_m(10),_v(" "),_c('p',[_v("You can easily include and deploy any external "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".html")]),_v(" files that are built using other tools")]},proxy:true}])},[_v("HTML web pages")]),_v(", along with your MarkBind site.")],1),_v(" "),_m(11),_v(" "),_c('p',[_v("The general approach is as follows:")]),_v(" "),_c('ol',[_c('li',[_v("Create a folder with the path that you want the HTML web page to be available at.")]),_v(" "),_c('li',[_v("Exclude the files from being further processed by MarkBind by adding them to the "),_c('trigger',{attrs:{"trigger":"click","for":"modal:addingPages-prevent-processing"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")]),_v(" attribute of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file")]),_v(".")],1),_v(" "),_c('li',[_v("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).")]),_v(" "),_m(12),_v(" "),_c('li',[_v("Deploy the built files manually or using a continuous integration process.")])]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("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 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{no-validation}")]),_v(" at the end like this:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs md"}},[_c('span',[_v("This is ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("my cool page generated from another tool")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("/my-cool-page/index.html{no-validation}")]),_v(")\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 the "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intra-site-links"}},[_v("link Validation section")]),_v(" for more details.")])]),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:addingPages-prevent-processing"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Prevent Further Processing")]},proxy:true}])},[_v(" "),_c('p',[_v("To prevent MarkBind from further processing any of the static assets (in the event that these files are generated from other tools or already processed), you can include")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pagesExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yourStaticFolder/*\"")]),_v("]\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file. See the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#pagesexclude"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")]),_v(" attribute")]),_v(" for more details. Alternatively, you can configure the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#pages"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")]),_v(" attribute")]),_v(" accordingly.")])]),_v(" "),_m(13),_v(" "),_c('br')],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(14)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,7 +11,7 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_c('em',[_v("User Guide → Adding Pages")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"adding-pages"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-pages"}}),_v("Adding Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-pages","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"adding-pages"}},[_v("Adding Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-pages","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('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(" If you have an image "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("images/logo.png")]),_v(" in your root directory, it will be available as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/images/logo.png")]),_v(" in the generated website.")])])} @@ -35,7 +35,7 @@ with(this){return _c('li',[_v("Add a "),_c('code',{pre:true,attrs:{"class":"hljs with(this){return _c('li',[_v("Update the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#pages"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")]),_v(" attribute of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(" to cover the new file, if necessary.")])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"external-static-html-web-pages"}},[_c('span',{staticClass:"anchor",attrs:{"id":"external-static-html-web-pages"}}),_v("External Static HTML Web Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#external-static-html-web-pages","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"external-static-html-web-pages"}},[_v("External Static HTML Web Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#external-static-html-web-pages","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _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(" Your code coverage tool generates a HTML Coverage Report into a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("coverage")]),_v(" folder and you want it to be accessible at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/coverage/index.html")])])])} @@ -47,6 +47,6 @@ with(this){return _c('li',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs i with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/authoringContents.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Authoring Contents")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_c('span',[_c('span',[_v("MarkBind Syntax Overview")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/authoringContents.html b/userGuide/authoringContents.html index 8d75171..47e0648 100644 --- a/userGuide/authoringContents.html +++ b/userGuide/authoringContents.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Authoring Contents - + + MarkBind - User Guide: Authoring Contents @@ -14,8 +12,7 @@ - - + @@ -23,17 +20,42 @@ 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.

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


+ diff --git a/userGuide/authoringContents.page-vue-render.js b/userGuide/authoringContents.page-vue-render.js index 66bc86b..4d8afbf 100644 --- a/userGuide/authoringContents.page-vue-render.js +++ b/userGuide/authoringContents.page-vue-render.js @@ -1,14 +1,14 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_c('blockquote',[_c('span',[_c('strong',[_v("It is easy to add files to a MarkBind site as any file inside the "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(" becomes a part of the generated website.")],1)])]),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(23)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_c('blockquote',[_c('span',[_c('strong',[_v("It is easy to add files to a MarkBind site as any file inside the "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(" becomes a part of the generated website.")],1)])]),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('br')],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(23)])} }; var pageVueStaticRenderFns = [function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Authoring Contents")])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"authoring-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"authoring-contents"}}),_v("Authoring Contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#authoring-contents","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"authoring-contents"}},[_v("Authoring Contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#authoring-contents","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Adding Pages")])])])} @@ -74,6 +74,6 @@ with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Getting Started")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/addingPages.html"}},[_c('span',[_c('span',[_v("Adding Pages")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/cliCommands.html b/userGuide/cliCommands.html index 4ae7519..20aa92a 100644 --- a/userGuide/cliCommands.html +++ b/userGuide/cliCommands.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Command Line Interface (CLI) - + + MarkBind - User Guide: Command Line Interface (CLI) @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ const baseUrl = '' -

CLI Commands

Overview

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

$ markbind --help
 Usage: markbind <command>
  
  Options:
@@ -36,28 +43,62 @@
    init|i [options] [root]            init a markbind website project
    serve|s [options] [root]           build then serve a website from a directory
    build|b [options] [root] [output]  build a website
-   deploy|d [options]                 deploy the site to the repo's GitHub pages
-

init Command


Format: markbind init [options] [root]

Alias: markbind i

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

Arguments:

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

Options

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

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

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

    Examples

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

    build Command


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

    Alias: markbind b

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

    Arguments:

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

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

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

  • [root] [output]
    -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 give <base> value.
    Example --baseUrl staging

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

Examples

  • markbind build
  • markbind build ./myWebsite : Generates the site from the myWebsite directory.
  • markbind build ./myWebsite ./myOutDir : Generates the site to the directory named myOutDir in the current directory.
  • markbind build ./myWebsite ./myWebsite/myOutDir : Generates the site to the directory named myOutDir in the myWebsite directory.
  • markbind build ./stagingDir --baseUrl staging

deploy Command


Format: markbind deploy [options]

Alias: markbind d

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

Options

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

Related: User Guide: Deploying the Website.

--help Option


Format: markbind [command] --help

Alias: markbind [command] -h

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

Examples

  • markbind --help : Prints a summary of MarkBind commands.
  • markbind serve --help : Prints a detailed usage guide for the serve command.
+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:

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

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

  • markbind --help : Prints a summary of MarkBind commands.
  • markbind serve --help : Prints a detailed usage guide for the serve command.
+ diff --git a/userGuide/cliCommands.page-vue-render.js b/userGuide/cliCommands.page-vue-render.js index 68f74bf..b19c64f 100644 --- a/userGuide/cliCommands.page-vue-render.js +++ b/userGuide/cliCommands.page-vue-render.js @@ -1,23 +1,23 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_c('div',{pre:true,attrs:{"class":"page-nav-print d-none d-print-block"}}),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_c('hr'),_v(" "),_c('div',{attrs:{"id":"markbind-init"}},[_m(4),_v(" "),_c('br'),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-c")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--convert")]),_c('br'),_v("\nConvert an existing GitHub wiki or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs")]),_v(" folder into a MarkBind website. See "),_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html#converting-existing-project-documentation-wiki"}},[_v("Converting an existing GitHub project")]),_v(" for more information.")])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-t")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--template")]),_v(" "),_c('br'),_v("\nWhen initialising MarkBind, change the template that you start with. See "),_c('a',{attrs:{"href":"/userGuide/templates.html"}},[_v("templates")]),_v(".")])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(" : Initializes the site in the current working directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init ./myWebsite")]),_v(" : Initializes the site in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init --convert --template minimal")]),_v(": Converts the GitHub wiki or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs")]),_v(" folder in the current working directory into a minimal MarkBind website.")])])])],1),_v(" "),_c('hr'),_v(" "),_m(10),_v(" "),_c('br'),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_c('ol',[_m(14),_v(" "),_m(15),_v(" "),_c('li',[_v("Opens a "),_c('trigger',{attrs:{"trigger":"click","for":"modal:cliCommands-livePreview"}},[_v("live preview")]),_v(" of the website.")],1)]),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:cliCommands-livePreview"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Live Preview")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("Regeneration of affected content upon any change to "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]},proxy:true}])},[_v("source files")]),_v(", then reloading the updated site in the Browser.")],1)]),_v(" "),_c('li',[_c('p',[_v("Regeneration will also occur upon any modification to attributes in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" with the exception of "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Copying "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("files that don't affect page generation (eg. images), but are used in the site")]},proxy:true}])},[_v("assets")]),_v(" to the site output folder.")],1)])]),_v(" "),_c('p',[_v("Use "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.")])])]),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-o ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--one-page ")]),_c('br'),_v("\nServes only a single page from your website "),_c('strong',[_v("initially")]),_v(". If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" is not specified, it defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v("."),_c('br'),_v(" "),_c('ul',[_c('li',[_v("Thereafter, when changes to source files have been made, the opened pages will be rebuilt if it was affected."),_c('br')]),_v(" "),_c('li',[_v("Navigating to a new page will build the new page, if it has not been built before, or there were some changes to source files that affected it before navigating to it."),_c('br')]),_v(" "),_c('li',[_c('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("--one-page guide/index.md")])])])])]),_v(" "),_c('box',{staticStyle:{"width":"calc(100% - 50px)","position":"relative","left":"40px"},attrs:{"type":"info","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Caveats")])]},proxy:true}])},[_v(" "),_c('p',[_v("Essentially, this optional feature is very useful when writing content, more so if your build times are starting to slow down!")]),_v(" "),_c('p',[_v("The caveat is that not building all pages during the initial process, or not rebuilding all affected pages when a file changes, will cause your search results for these pages to be empty or outdated, until you navigate to them to trigger a rebuild.")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-b")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--background-build")]),_v(" "),_c('strong',[_v("[BETA]")]),_c('br'),_v("\nIf "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--one-page")]),_v(" is specified, this mode enhances the single-page serve by building the pages that are not yet built\nor marked to be rebuilt in the background.")]),_v(" "),_c('p',[_v("You can still edit the pages during the background build. When MarkBind detects changes to the source\nfiles, the background build will stop, rebuild the files affected, then resumes the background build with the\nremaining pages.")])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-s ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--site-config ")]),_c('br'),_v("\nSpecify the site config file (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(")"),_c('br'),_v(" "),_c('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("-s otherSite.json")])])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-n")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--no-open")]),_c('br'),_v("\nDon't open a live preview in the browser automatically.")])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-f")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--force-reload")]),_c('br'),_v("\nForce live reload to process all files in the site, instead of just the relevant files. This option is useful when you are modifying a file that is not a file type monitored by the "),_c('trigger',{attrs:{"trigger":"click","for":"modal:cliCommands-livePreview"}},[_v("live preview")]),_v(" feature.")],1)]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-p ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--port ")]),_c('br'),_v("\nServe the website in the specified port.")])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve ./myWebsite")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve -p 8888 -s otherSite.json")])])])],1),_v(" "),_c('hr'),_v(" "),_m(18),_v(" "),_c('br'),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--baseUrl ")]),_c('br'),_v("\nOverride the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" property (read from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(") with the give "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" value."),_c('br'),_v(" "),_c('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("--baseUrl staging")])])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-s ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--site-config ")]),_c('br'),_v("\nSpecify the site config file (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(")"),_c('br'),_v(" "),_c('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("-s otherSite.json")])])])]),_v(" "),_c('p',[_c('strong',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])])]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build ./myWebsite")]),_v(" : Generates the site from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myWebsite")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build ./myWebsite ./myOutDir")]),_v(" : Generates the site to the directory named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myOutDir")]),_v(" in the current directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build ./myWebsite ./myWebsite/myOutDir")]),_v(" : Generates the site to the directory named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myOutDir")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myWebsite")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build ./stagingDir --baseUrl staging")])])])]),_v(" "),_c('hr'),_v(" "),_m(24),_v(" "),_c('br'),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-c ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--ci ")]),_c('br'),_v("\nDeploy the site in CI Environments using the GitHub personal access token stored in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(". (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(")"),_c('br'),_v(" "),_c('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("-c PA_TOKEN")])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related: "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("User Guide: Deploying the Website")]),_v(".")])])]),_v(" "),_c('hr'),_v(" "),_m(28),_v(" "),_c('br'),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_m(33),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#markbind-cli"}},[_v("MarkBind CLI‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#overview"}},[_v("Overview‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#init-command"}},[_v("init Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#serve-command"}},[_v("serve Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#build-command"}},[_v("build Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploy-command"}},[_v("deploy Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#help-option"}},[_v("--help Option‎")])])])],1)])],1),_v(" "),_m(34)])} +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('div',{pre:true,attrs:{"class":"page-nav-print d-none d-print-block"}}),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_c('pre',[_m(3),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('hr'),_v(" "),_c('div',{attrs:{"id":"markbind-init"}},[_m(4),_v(" "),_c('br'),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-c")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--convert")]),_c('br'),_v("\nConvert an existing GitHub wiki or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs")]),_v(" folder into a MarkBind website. See "),_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html#converting-existing-project-documentation-wiki"}},[_v("Converting an existing GitHub project")]),_v(" for more information.")])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-t")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--template")]),_v(" "),_c('br'),_v("\nWhen initialising MarkBind, change the template that you start with. See "),_c('a',{attrs:{"href":"/userGuide/templates.html"}},[_v("templates")]),_v(".")])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(" : Initializes the site in the current working directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init ./myWebsite")]),_v(" : Initializes the site in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init --convert --template minimal")]),_v(": Converts the GitHub wiki or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs")]),_v(" folder in the current working directory into a minimal MarkBind website.")])])])],1),_v(" "),_c('hr'),_v(" "),_m(10),_v(" "),_c('br'),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_c('ol',[_m(14),_v(" "),_m(15),_v(" "),_c('li',[_v("Opens a "),_c('trigger',{attrs:{"trigger":"click","for":"modal:cliCommands-livePreview"}},[_v("live preview")]),_v(" of the website.")],1)]),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:cliCommands-livePreview"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Live Preview")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("Regeneration of affected content upon any change to "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]},proxy:true}])},[_v("source files")]),_v(", then reloading the updated site in the Browser.")],1)]),_v(" "),_c('li',[_c('p',[_v("Regeneration will also occur upon any modification to attributes in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" with the exception of "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Copying "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("files that don't affect page generation (eg. images), but are used in the site")]},proxy:true}])},[_v("assets")]),_v(" to the site output folder.")],1)])]),_v(" "),_c('p',[_v("Use "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.")])])]),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-o ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--one-page ")]),_c('br'),_v("\nServes only a single page from your website "),_c('strong',[_v("initially")]),_v(". If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" is not specified, it defaults to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v("."),_c('br'),_v(" "),_c('ul',[_c('li',[_v("Thereafter, when changes to source files have been made, the opened pages will be rebuilt if it was affected."),_c('br')]),_v(" "),_c('li',[_v("Navigating to a new page will build the new page, if it has not been built before, or there were some changes to source files that affected it before navigating to it."),_c('br')]),_v(" "),_c('li',[_c('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("--one-page guide/index.md")])])])])]),_v(" "),_c('box',{staticStyle:{"width":"calc(100% - 50px)","position":"relative","left":"40px"},attrs:{"type":"info","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Caveats")])]},proxy:true}])},[_v(" "),_c('p',[_v("Essentially, this optional feature is very useful when writing content, more so if your build times are starting to slow down!")]),_v(" "),_c('p',[_v("The caveat is that not building all pages during the initial process, or not rebuilding all affected pages when a file changes, will cause your search results for these pages to be empty or outdated, until you navigate to them to trigger a rebuild.")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-b")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--background-build")]),_v(" "),_c('strong',[_v("[BETA]")]),_c('br'),_v("\nIf "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--one-page")]),_v(" is specified, this mode enhances the single-page serve by building the pages that are not yet built\nor marked to be rebuilt in the background.")]),_v(" "),_c('p',[_v("You can still edit the pages during the background build. When MarkBind detects changes to the source\nfiles, the background build will stop, rebuild the files affected, then resumes the background build with the\nremaining pages.")])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-s ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--site-config ")]),_c('br'),_v("\nSpecify the site config file (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(")"),_c('br'),_v(" "),_c('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("-s otherSite.json")])])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-n")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--no-open")]),_c('br'),_v("\nDon't open a live preview in the browser automatically.")])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-f")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--force-reload")]),_c('br'),_v("\nForce live reload to process all files in the site, instead of just the relevant files. This option is useful when you are modifying a file that is not a file type monitored by the "),_c('trigger',{attrs:{"trigger":"click","for":"modal:cliCommands-livePreview"}},[_v("live preview")]),_v(" feature.")],1)]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-p ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--port ")]),_c('br'),_v("\nServe the website in the specified port.")])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(" : Serves the site from the current working directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve ./myWebsite")]),_v(" : Serves the site from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve -p 8888 -s otherSite.json")]),_v(" : Serves the site in Port 8888 from the current working directory, using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("otherSite.json")]),_v(" as the site configuration file.")])])],1),_v(" "),_c('hr'),_v(" "),_m(18),_v(" "),_c('br'),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--baseUrl ")]),_c('br'),_v("\nOverride the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" property (read from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(") with the given "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" value."),_c('br'),_v(" "),_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("--baseUrl staging")])])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-s ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--site-config ")]),_c('br'),_v("\nSpecify the site config file (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(")"),_c('br'),_v(" "),_c('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("-s otherSite.json")])])])]),_v(" "),_c('p',[_c('strong',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])])]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build")]),_v(" : Generates the site from the current working directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build ./myWebsite")]),_v(" : Generates the site from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build ./myWebsite ./myOutDir")]),_v(" : Generates the site from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite")]),_v(" directory to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myOutDir")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build ./stagingDir --baseUrl staging")]),_v(" : Generates the site from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./stagingDir")]),_v(" directory, with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" property in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("staging")]),_v(".")])])]),_v(" "),_c('hr'),_v(" "),_m(24),_v(" "),_c('br'),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_c('panel',{attrs:{"type":"minimal","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Options")]),_v(" "),_c('span',{staticClass:"fas fa-cogs",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-c ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--ci ")]),_c('br'),_v("\nDeploy the site in CI Environments using the GitHub personal access token stored in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(")."),_c('br'),_v(" "),_c('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("-c PA_TOKEN")])])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-n")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--no-build")]),_c('br'),_v("\nSkips the generation of the site before deploying it. By default, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")]),_v(" 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 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("build")]),_v(" command (e.g. baseUrl is specified using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--baseUrl")]),_v(" flag for the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build")]),_v(" command).")])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-s ")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--site-config ")]),_c('br'),_v("\nSpecify the site config file (default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(")."),_c('br'),_v(" "),_c('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("-s otherSite.json")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related: "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("User Guide: Deploying the Website")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])])])]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")]),_v(" : Deploys after generating the site from the current working directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy ./myWebsite")]),_v(" : Deploys after generating the site from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("./myWebsite")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy --no-build")]),_v(" : Deploys the site from the current working directory without generating it.")])])]),_v(" "),_c('hr'),_v(" "),_m(30),_v(" "),_c('br'),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_m(33),_v(" "),_m(34),_v(" "),_m(35)],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":"#cli-commands"}},[_v("CLI Commands‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#overview"}},[_v("Overview‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#init-command"}},[_v("init Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#serve-command"}},[_v("serve Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#build-command"}},[_v("build Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploy-command"}},[_v("deploy Command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#help-option"}},[_v("--help Option‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(36)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"markbind-cli"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-cli"}}),_v("MarkBind CLI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-cli","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"cli-commands"}},[_v("CLI Commands"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#cli-commands","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"overview"}},[_c('span',{staticClass:"anchor",attrs:{"id":"overview"}}),_v("Overview"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#overview","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"overview"}},[_v("Overview"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#overview","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("An overview of MarkBind's Command Line Interface (CLI) can be referenced with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind --help")]),_v(":")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ markbind --help\n")]),_c('span',[_v("Usage: markbind \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" Options:\n")]),_c('span',[_v(" -V, --version output the version number\n")]),_c('span',[_v(" -h, --help output usage information\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" Commands:\n")]),_c('span',[_v(" init|i [options] [root] init a markbind website project\n")]),_c('span',[_v(" serve|s [options] [root] build then serve a website from a directory\n")]),_c('span',[_v(" build|b [options] [root] [output] build a website\n")]),_c('span',[_v(" deploy|d [options] deploy the site to the repo's GitHub pages\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ markbind --help\n")]),_c('span',[_v("Usage: markbind \n")]),_c('span',[_v(" \n")]),_c('span',[_v(" Options:\n")]),_c('span',[_v(" -V, --version output the version number\n")]),_c('span',[_v(" -h, --help output usage information\n")]),_c('span',[_v(" \n")]),_c('span',[_v(" Commands:\n")]),_c('span',[_v(" init|i [options] [root] init a markbind website project\n")]),_c('span',[_v(" serve|s [options] [root] build then serve a website from a directory\n")]),_c('span',[_v(" build|b [options] [root] [output] build a website\n")]),_c('span',[_v(" deploy|d [options] [root] deploy the latest build of the site to the repo's Github pages\n")])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"init-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"init-command"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("init")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#init-command","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"init-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("init")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#init-command","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init [options] [root]")])])} @@ -35,7 +35,7 @@ with(this){return _c('p',[_c('strong',[_v("Arguments:")])])} with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root]")]),_c('br'),_v("\nRoot directory. Default is the current directory."),_c('br'),_v(" "),_c('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("./myWebsite")])])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"serve-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"serve-command"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#serve-command","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"serve-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#serve-command","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve [options] [root]")])])} @@ -59,7 +59,7 @@ with(this){return _c('p',[_c('strong',[_v("Arguments:")])])} with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root]")]),_c('br'),_v("\nRoot directory. The default is the directory where this command was executed."),_c('br'),_v(" "),_c('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("./myWebsite")])])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"build-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"build-command"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("build")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#build-command","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"build-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("build")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#build-command","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build [options] [root] [output]")])])} @@ -77,19 +77,25 @@ with(this){return _c('p',[_c('strong',[_v("Arguments:")])])} with(this){return _c('ul',[_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root]")]),_c('br'),_v("\nRoot directory. Default is the current directory."),_c('br'),_v(" "),_c('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("./myWebsite")])])]),_v(" "),_c('li',[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root] [output]")]),_c('br'),_v("\nRead source files from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root]")]),_v(" directory and put the generated files in the specified "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[output]")]),_v(" directory. Default output directory is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v("."),_c('br'),_v(" "),_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("./myWebsite ./myWebsite/myOutDir")])])])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"deploy-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploy-command"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy-command","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"deploy-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")]),_v(" Command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy-command","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy [options]")])])} +with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy [options] [root]")])])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Alias:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind d")])])} },function anonymous( ) { -with(this){return _c('p',[_c('strong',[_v("Description:")]),_v(" Deploys the site to the repo's GitHub pages by pushing everything in the generated site (default dir: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(") to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("gh-pages")]),_v(" branch of the current git working directory's remote repo.")])} +with(this){return _c('p',[_c('strong',[_v("Description:")]),_v(" Deploys the site to the repo's GitHub pages by generating the site (default dir: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(") and pushing the generated site to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("gh-pages")]),_v(" branch of the current git working directory's remote repo.")])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"help-option"}},[_c('span',{staticClass:"anchor",attrs:{"id":"help-option"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--help")]),_v(" Option"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#help-option","onclick":"event.stopPropagation()"}})])} +with(this){return _c('p',[_c('strong',[_v("Arguments:")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[root]")]),_c('br'),_v("\nRoot directory. Default is the current directory."),_c('br'),_v(" "),_c('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("./myWebsite")])])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"help-option"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--help")]),_v(" Option"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#help-option","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Format:")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind [command] --help")])])} @@ -107,6 +113,6 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind --help")]),_v(" : Prints a summary of MarkBind commands.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve --help")]),_v(" : Prints a detailed usage guide for the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command.")])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/components/advanced.html b/userGuide/components/advanced.html index 480e2f3..e7a7737 100644 --- a/userGuide/components/advanced.html +++ b/userGuide/components/advanced.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Advanced Component Usage - + + MarkBind - User Guide: Advanced Component Usage @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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>
   <p slot="header" class="card-title">
     <i><strong>
@@ -41,10 +48,26 @@
   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">
@@ -55,33 +78,128 @@
     <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
+

Inserting custom classes into components

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

Example
Easily apply Bootstrap classes without using a wrapper! -
Markup 
<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


+
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


+ diff --git a/userGuide/components/advanced.page-vue-render.js b/userGuide/components/advanced.page-vue-render.js index 655967c..6d7ac65 100644 --- a/userGuide/components/advanced.page-vue-render.js +++ b/userGuide/components/advanced.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',{attrs:{"id":"slots"}},[_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('div',[_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])]),_v(" "),_c('div',{attrs:{"id":"slots-info"}},[_c('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")])])])]),_v(" "),_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(10),_v(" "),_m(11),_v(" "),_c('div',[_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('trigger',{attrs:{"for":"modal:tip-example","trigger":"click"}},[_v("Click here to show Modal.")])],1),_v(" "),_c('modal',{attrs:{"id":"modal:tip-example"},scopedSlots:_u([{key:"header",fn:function(){return [_c('span',{staticClass:"modal-title text-center"},[_c('span',{staticStyle:{"font-size":"20pt"}},[_c('span',{staticStyle:{"color":"red"}},[_v("BIG")]),_v(" header")])])]},proxy:true},{key:"footer",fn:function(){return [_c('span',{staticClass:"text-center"},[_c('span',{staticStyle:{"font-size":"10pt"}},[_v("Tiny "),_c('span',{staticStyle:{"color":"green"}},[_v("footer")])])])]},proxy:true}])},[_v("\n Modal allows you to style both header and footer individually, with style classes and inline styles.\n ")])],1)],1)]),_v(" "),_m(15),_v(" "),_m(16),_c('box',{attrs:{"type":"info"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"text-danger"},[_c('span',[_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]},proxy:true}])},[_v("\n info\n")]),_v(" "),_m(17),_v(" "),_m(18),_c('box',{attrs:{"type":"info","seamless":""},scopedSlots:_u([{key:"icon",fn:function(){return [_c('img',{attrs:{"width":"75%","src":"https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"}})]},proxy:true}])},[_v("\n some very useful info\n")]),_v(" "),_m(19),_v(" "),_m(20),_c('box',{attrs:{"type":"info","light":""},scopedSlots:_u([{key:"icon",fn:function(){return [_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"50"}},[_v("📖")])]},proxy:true}])},[_v("\n use thumbnail as the icon\n")]),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('i',{staticStyle:{"font-style":"normal","font-weight":"bold","color":"dimgray"}},[_v("Example")]),_c('br'),_v(" "),_c('box',{attrs:{"type":"info","add-class":"lead font-italic text-center"}},[_v("\n Easily apply Bootstrap classes without using a wrapper!\n ")])],1),_v(" "),_c('box',{attrs:{"border-left-color":"black"}},[_c('i',{staticStyle:{"font-style":"normal","font-weight":"bold","color":"dimgray"}},[_v("Markup")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("add-class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lead font-italic text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Easily apply Bootstrap classes without using a wrapper!\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('br'),_v(" "),_m(23),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#advanced-tips-and-tricks"}},[_v("Advanced Tips and Tricks‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#richer-formatting-of-attributes-using-slots"}},[_v("Richer formatting of attributes using slots‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#inserting-custom-classes-into-components"}},[_v("Inserting custom classes into components‎")])])])],1)])],1),_v(" "),_m(24)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',{attrs:{"id":"slots"}},[_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('div',[_m(7),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(8),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(9),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])]),_v(" "),_c('div',{attrs:{"id":"slots-info"}},[_c('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(10),_v(" "),_m(11),_v(" "),_c('div',[_m(12),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(13),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(14),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('trigger',{attrs:{"for":"modal:tip-example","trigger":"click"}},[_v("Click here to show Modal.")])],1),_v(" "),_c('modal',{attrs:{"id":"modal:tip-example"},scopedSlots:_u([{key:"header",fn:function(){return [_c('span',{staticClass:"modal-title text-center"},[_c('span',{staticStyle:{"font-size":"20pt"}},[_c('span',{staticStyle:{"color":"red"}},[_v("BIG")]),_v(" header")])])]},proxy:true},{key:"footer",fn:function(){return [_c('span',{staticClass:"text-center"},[_c('span',{staticStyle:{"font-size":"10pt"}},[_v("Tiny "),_c('span',{staticStyle:{"color":"green"}},[_v("footer")])])])]},proxy:true}])},[_v("\n Modal allows you to style both header and footer individually, with style classes and inline styles.\n ")])],1)],1)]),_v(" "),_m(15),_v(" "),_c('pre',[_m(16),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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":"info"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"text-danger"},[_c('span',[_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]},proxy:true}])},[_v("\n info\n")]),_v(" "),_m(17),_v(" "),_c('pre',[_m(18),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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":"info","seamless":""},scopedSlots:_u([{key:"icon",fn:function(){return [_c('img',{attrs:{"width":"75%","src":"https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif"}})]},proxy:true}])},[_v("\n some very useful info\n")]),_v(" "),_m(19),_v(" "),_c('pre',[_m(20),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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":"info","light":""},scopedSlots:_u([{key:"icon",fn:function(){return [_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"50"}},[_v("📖")])]},proxy:true}])},[_v("\n use thumbnail as the icon\n")]),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('i',{staticStyle:{"font-style":"normal","font-weight":"bold","color":"dimgray"}},[_v("Example")]),_c('br'),_v(" "),_c('box',{attrs:{"type":"info","add-class":"lead font-italic text-center"}},[_v("\n Easily apply Bootstrap classes without using a wrapper!\n ")])],1),_v(" "),_c('box',{attrs:{"border-left-color":"black"}},[_c('i',{staticStyle:{"font-style":"normal","font-weight":"bold","color":"dimgray"}},[_v("Markup")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("add-class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lead font-italic text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Easily apply Bootstrap classes without using a wrapper!\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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(" "),_m(23),_v(" "),_c('br')],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":"#advanced"}},[_v("Advanced‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#richer-formatting-of-attributes-using-slots"}},[_v("Richer formatting of attributes using slots‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#inserting-custom-classes-into-components"}},[_v("Inserting custom classes into components‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(24)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,10 +11,10 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_c('em',[_v("User Guide → Advanced Component Usage")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"advanced-tips-and-tricks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tips-and-tricks"}}),_v("Advanced Tips and Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tips-and-tricks","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"advanced"}},[_v("Advanced"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"richer-formatting-of-attributes-using-slots"}},[_c('span',{staticClass:"anchor",attrs:{"id":"richer-formatting-of-attributes-using-slots"}}),_v("Richer formatting of attributes using slots"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#richer-formatting-of-attributes-using-slots","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"richer-formatting-of-attributes-using-slots"}},[_v("Richer formatting of attributes using slots"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#richer-formatting-of-attributes-using-slots","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Most component attributes allow a richer form of formatting using slots, denoted by an attribute"),_c('strong',[_c('sup',[_v("[S]")])]),_v(" superscript in the respective components' tables.\nIn other cases, when the option is of type \"Slot\", only the slot option is available.")])} @@ -29,7 +29,7 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -44,7 +44,7 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:tip-example\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("Click here to show Modal."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:tip-example\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal-title text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size:20pt\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:red;\"")]),_v(">")]),_v("BIG"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" Modal allows you to style both header and footer individually, with style classes and inline styles.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"footer\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size:10pt\"")]),_v(">")]),_v("Tiny "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:green;\"")]),_v(">")]),_v("footer"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:tip-example\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("Click here to show Modal."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:tip-example\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal-title text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size:20pt\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:red;\"")]),_v(">")]),_v("BIG"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" Modal allows you to style both header and footer individually, with style classes and inline styles.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"footer\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"font-size:10pt\"")]),_v(">")]),_v("Tiny "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"color:green;\"")]),_v(">")]),_v("footer"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -53,22 +53,22 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Override the default icon for a certain type of box.")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"icon\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-danger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fas-home:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"icon\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-danger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fas-home:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Use pictures (or even gifs) as the icon for a box.")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"icon\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" some very useful info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"icon\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://icons8.com/vue-static/landings/animated-icons/icons/cloud/cloud.gif\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" some very useful info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Use "),_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html#thumbnails"}},[_v("thumbnail")]),_v(" as the icon.")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"icon\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50\"")]),_v("/>")]),_v("\n")]),_c('span',[_v(" use thumbnail as the icon\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"icon\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"50\"")]),_v("/>")]),_v("\n")]),_c('span',[_v(" use thumbnail as the icon\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{staticClass:"mt-4 mb-3",attrs:{"id":"inserting-custom-classes-into-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inserting-custom-classes-into-components"}}),_v("Inserting custom classes into components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inserting-custom-classes-into-components","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{staticClass:"mt-4 mb-3",attrs:{"id":"inserting-custom-classes-into-components"}},[_v("Inserting custom classes into components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inserting-custom-classes-into-components","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Every component documented in our user guide allows you to insert your own defined CSS classes.\nThis is done by adding the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("add-class")]),_v(" attribute to a component along with the desired class names.")])} @@ -77,6 +77,6 @@ with(this){return _c('p',[_v("Every component documented in our user guide allow with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/others.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Other Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_c('span',[_c('span',[_v("Using HTML, JavaScript, CSS")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/components/imagesAndDiagrams.html b/userGuide/components/imagesAndDiagrams.html index e33e35e..5998a7f 100644 --- a/userGuide/components/imagesAndDiagrams.html +++ b/userGuide/components/imagesAndDiagrams.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Image & Diagram Components - + + MarkBind - User Guide: Image & Diagram Components @@ -14,8 +12,7 @@ - - + @@ -23,26 +20,68 @@ 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">
   MarkBind Logo
 </pic>
 
 <pic src="https://markbind.org/images/logo-lightbackground.png" width="300" alt="Logo" eager>
   MarkBind Logo
 </pic>
-

OUTPUT:

Logo +

OUTPUT:

Logo MarkBind Logo Logo MarkBind Logo

Options

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

Annotations

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

Annotate wrappers (<annotate>) are used in conjunction with Annotate +

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">
   <!-- Minimal Point -->
   <a-point x="25%" y="25%" content="This point is 25% from the left and 25% from the top" />
@@ -61,7 +100,23 @@
   <!-- Customize Font Size (default font size is 14) -->
   <a-point x="75%" y="75%" content="This point is 75% from the left and 75% from the top"  fontSize="30" label="3"/>
 </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" />
@@ -74,7 +129,23 @@
   <!-- 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) -->
@@ -82,7 +153,23 @@
   <!-- 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
2: Headers are displayed as well
Clicking on this does nothing @@ -90,13 +177,29 @@ 3: Headers are displayed at both positions
There is text at both locations -

Sample use cases for Annotate

Here we showcase some use cases of the Annotate feature.

Example 1: Describing elements in an image

CODE:

<annotate src="https://markbind.org/userGuide/diagrams/object.png" height="500" alt="Sample Image">
+

Sample use cases for Annotate

Here we showcase some use cases of the Annotate feature.

Example 1: Describing elements in an image

CODE:

<annotate src="../../images/annotateSampleObject.png" height="500" alt="Sample Image">
   <a-point x="6%" y="50%" content="You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance." label="1" header="Class inheritance" legend="both"/>
   <a-point x="25.5%" y="50%" content="UML uses a solid diamond symbol to denote composition." label="2" header="Composition" color="red"  legend="both"/>
   <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
1: Class inheritance
You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance. @@ -112,17 +215,49 @@ 4: Association labels
Association labels describe the meaning of the association. -

Example 2: Drawing over elements

CODE:

<annotate src="https://markbind.org/userGuide/diagrams/sequence.png" height="500" alt="Sample Image">
+

Example 2: Drawing over elements

CODE:

<annotate src="../../images/annotateSampleSequence.png" height="500" alt="Sample Image">
   <a-point x="35%" y="18.5%" content="Operation is invoked" header="Operation"  opacity="0.2" size="30"/>
   <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.
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.
opacity String '0.3' The opacity of the point.
Supports range of values from 0 to 1.
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.
eager boolean false The <pic> component lazy loads its images by default.
If you want to eagerly load the images, simply specify this attribute.
<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.
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.
opacity String '0.3' The opacity of the point.
Supports range of values from 0 to 1.
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.
eager boolean false The <pic> component lazy loads its images by default.
If you want to eagerly load the images, simply specify this attribute.
<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"/>
@@ -131,9 +266,41 @@
 <thumbnail text=":book:" background="#dff5ff" size="100"/>
 <thumbnail text="___CS___" background="#333" font-color="white" size="100"/>
 <thumbnail text=":fas-book:" font-color="darkgreen" border="3px solid darkgreen" size="100"/>
-

OUTPUT:

📖 CS 📖 CS

Options

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

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

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

Diagrams

You can use the PlantUML syntax to add diagrams.

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

  • Java 8 or later (required - to run the PlantUML JAR executable)
  • Graphviz v2.38 or later (optional - you don't need this if you only need sequence diagrams and activity (beta) diagrams) -
    • A warning will be displayed if you don't have Graphviz installed. To disable this warning, you may modify your site.json like this.

CODE:

<puml width="300">
+

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 don't have Graphviz installed (ignore this warning if you are on Windows). 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
@@ -145,7 +312,23 @@
 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
@@ -155,14 +338,62 @@
 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.
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>
+

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.
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
@@ -170,7 +401,23 @@
   reading.md
   site.json
 </tree>
-

OUTPUT:

C:/course/ +

OUTPUT:

C:/course/ ├── textbook/ │ └── index.md ├── index.md @@ -187,7 +434,23 @@ + textbook/ + index.md </tree> -

OUTPUT:

C:/course/ +

OUTPUT:

C:/course/ ├── textbook/ └── index.md C:/course/ @@ -196,14 +459,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>
-

OUTPUT:

Enjoy MarkBind? +

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? └── You may want to: ├── Like ❤️ ├── Share 💬 @@ -227,24 +506,40 @@ :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
@@ -252,15 +547,46 @@
   reading.md
   site.json
 </tree>
-
C:/course/ +
C:/course/ ├── textbook/ │ └── index.md ├── index.md ├── reading.md └── site.json -

Presentational Components

Pop-Up Components


+

Presentational Components

Pop-Up Components


+ diff --git a/userGuide/components/imagesAndDiagrams.page-vue-render.js b/userGuide/components/imagesAndDiagrams.page-vue-render.js index 2032e78..5b9a75d 100644 --- a/userGuide/components/imagesAndDiagrams.page-vue-render.js +++ b/userGuide/components/imagesAndDiagrams.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_m(9),_v(" "),_m(10),_m(11),_v(" "),_c('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('hr'),_v(" "),_c('div',[_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_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',[_m(16),_v(" "),_m(17),_v(" "),_m(18),_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%","content":"This point is 25% from the left and 25% from the top"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"This point is 50% from the left and 25% from the top","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"This point is 75% from the left and 25% from the top","header":"This has a header"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"This point is 33% from the left and 50% from the top","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"This point is 66% from the left and 50% from the top","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"This point is 25% from the left and 75% from the top","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"This point is 50% from the left and 75% from the top","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"This point is 75% from the left and 75% from the top","fontSize":"30","label":"3"}})],1)],1)],1)]),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_c('div',[_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"33%","y":"33%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Popover on the left","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Popover on the right","placement":"right"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom","trigger":"hover focus"}})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_c('div',[_m(26),_v(" "),_m(27),_v(" "),_m(28),_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%","content":"There is only text when you click me","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Clicking on this does nothing","label":"2","legend":"bottom","header":"Headers are displayed as well"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"There is text at both locations","label":"3","legend":"both","header":"Headers are displayed at both positions"}})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_m(29),_v(" "),_c('p',[_v("Here we showcase some use cases of the Annotate feature.")]),_v(" "),_m(30),_v(" "),_c('div',[_m(31),_v(" "),_m(32),_v(" "),_m(33),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('annotate',{attrs:{"src":"https://markbind.org/userGuide/diagrams/object.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"Class inheritance","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"Aggregation","color":"blue","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow","legend":"both"}})],1)],1)],1)]),_v(" "),_m(34),_v(" "),_c('div',[_m(35),_v(" "),_m(36),_v(" "),_m(37),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('annotate',{attrs:{"src":"https://markbind.org/userGuide/diagrams/sequence.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"35%","y":"18.5%","content":"Operation is invoked","header":"Operation","opacity":"0.2","size":"30"}}),_v(" "),_c('a-point',{attrs:{"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"}}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","content":"Return control and possibly some return value","header":"Return Value","opacity":"0.2","size":"30","color":"blue"}})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_m(38),_v(" "),_m(39),_m(40),_v(" "),_m(41),_v(" "),_m(42),_v(" "),_m(43),_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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],1)],1)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(44),_v(" "),_m(45),_v(" "),_c('div',[_m(46),_v(" "),_m(47),_v(" "),_m(48),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('thumbnail',{attrs:{"circle":"","src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"circle":"","font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('thumbnail',{attrs:{"src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})])],1)],1)]),_v(" "),_m(49),_v(" "),_m(50),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" are specified, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" will take higher priority.")])]),_v(" "),_m(51),_v(" "),_m(52)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(53),_v(" "),_m(54),_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 later (required - to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v(" v2.38 or later (optional - you don't need this if you 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 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('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")])])])])]),_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('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',[_m(55),_v(" "),_m(56),_v(" "),_m(57),_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(" "),_m(58),_v(" "),_c('div',[_m(59),_v(" "),_m(60),_v(" "),_m(61),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_m(62),_v(" "),_m(63),_m(64),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(65),_v(" "),_m(66),_v(" "),_c('p',[_v("Use indentation (2 spaces) to indicate the level of nesting.")]),_v(" "),_c('div',[_m(67),_v(" "),_m(68),_v(" "),_m(69),_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',[_m(70),_v(" "),_m(71),_v(" "),_m(72),_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("")]),_v("\n")])])])]),_v(" "),_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',[_m(73),_v(" "),_m(74),_v(" "),_m(75),_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(" "),_m(76),_v(" "),_m(77),_v(" "),_m(78)],1),_v(" "),_c('hr'),_v(" "),_c('br'),_v(" "),_m(79),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#image-and-amp-diagram-components"}},[_v("Image & Diagram Components‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#pictures"}},[_v("Pictures‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#annotations"}},[_v("Annotations‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#thumbnails"}},[_v("Thumbnails‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#diagrams"}},[_v("Diagrams‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tree"}},[_v("Tree‎")])])])],1)])],1),_v(" "),_m(80)])} +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(" "),_m(1),_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(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',[_m(6),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(7),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_m(9),_v(" "),_m(10),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(11),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('div',[_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_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',[_m(16),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(17),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(18),_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%","content":"This point is 25% from the left and 25% from the top"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"This point is 50% from the left and 25% from the top","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"This point is 75% from the left and 25% from the top","header":"This has a header"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"This point is 33% from the left and 50% from the top","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"This point is 66% from the left and 50% from the top","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"This point is 25% from the left and 75% from the top","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"This point is 50% from the left and 75% from the top","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"This point is 75% from the left and 75% from the top","fontSize":"30","label":"3"}})],1)],1)],1)]),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_c('div',[_m(21),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(22),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(23),_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%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Popover on the left","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Popover on the right","placement":"right"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom","trigger":"hover focus"}})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_c('div',[_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(27),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(28),_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%","content":"There is only text when you click me","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Clicking on this does nothing","label":"2","legend":"bottom","header":"Headers are displayed as well"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"There is text at both locations","label":"3","legend":"both","header":"Headers are displayed at both positions"}})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_m(29),_v(" "),_c('p',[_v("Here we showcase some use cases of the Annotate feature.")]),_v(" "),_m(30),_v(" "),_c('div',[_m(31),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(32),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(33),_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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"Class inheritance","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"Aggregation","color":"blue","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow","legend":"both"}})],1)],1)],1)]),_v(" "),_m(34),_v(" "),_c('div',[_m(35),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(36),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(37),_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%","content":"Operation is invoked","header":"Operation","opacity":"0.2","size":"30"}}),_v(" "),_c('a-point',{attrs:{"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"}}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","content":"Return control and possibly some return value","header":"Return Value","opacity":"0.2","size":"30","color":"blue"}})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_m(38),_v(" "),_m(39),_m(40),_v(" "),_m(41),_v(" "),_m(42),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(43),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],1)],1)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(44),_v(" "),_m(45),_v(" "),_c('div',[_m(46),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(47),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(48),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('thumbnail',{attrs:{"circle":"","src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"circle":"","font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('thumbnail',{attrs:{"src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})])],1)],1)]),_v(" "),_m(49),_v(" "),_m(50),_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',[_m(51),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(52)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(53),_v(" "),_m(54),_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 don't have Graphviz installed (ignore this warning if you are on Windows). 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',[_m(55),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(56),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(57),_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(" "),_m(58),_v(" "),_c('div',[_m(59),_v(" "),_c('div',{staticClass:"indented"},[_m(60),_v(" "),_c('pre',[_m(61),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(62),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(63),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_m(64),_v(" "),_m(65),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(66),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(67),_v(" "),_m(68),_v(" "),_c('p',[_v("Use indentation (2 spaces) to indicate the level of nesting.")]),_v(" "),_c('div',[_m(69),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(70),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(71),_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',[_m(72),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(73),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(74),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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',[_m(75),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(76),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(77),_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(" "),_m(78),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(79),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(80)],1),_v(" "),_c('hr'),_v(" "),_c('br'),_v(" "),_m(81),_v(" "),_c('br')],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":"#images-and-amp-diagrams"}},[_v("Images & Diagrams‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#pictures"}},[_v("Pictures‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#annotations"}},[_v("Annotations‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#thumbnails"}},[_v("Thumbnails‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#diagrams"}},[_v("Diagrams‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tree"}},[_v("Tree‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(82)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,13 +11,13 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_c('em',[_v("User Guide → Image & Diagram Components")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"image-and-amp-diagram-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"image-and-amp-diagram-components"}}),_v("Image & Diagram Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#image-and-amp-diagram-components","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"images-and-amp-diagrams"}},[_v("Images & Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images-and-amp-diagrams","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("The image components here provide "),_c('strong',[_v("convenient syntax & styling abstractions")]),_v(" on top of raw HTML and Markdown images.\nDiagrams, in the form of "),_c('strong',[_v("inline PlantUML components")]),_v(" are also supported.")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"pictures"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"pictures"}},[_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pic")]),_v(" component allows you to add captions below the image.")])])} @@ -26,7 +26,7 @@ with(this){return _c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"clas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -38,10 +38,10 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])])} },function anonymous( ) { -with(this){return _c('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("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"annotations"}},[_c('span',{staticClass:"anchor",attrs:{"id":"annotations"}}),_v("Annotations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#annotations","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"annotations"}},[_v("Annotations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#annotations","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _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.")])])} @@ -56,7 +56,7 @@ with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inl with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("\"33%\"")]),_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 33% 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("\"66%\"")]),_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 66% 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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("\"33%\"")]),_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 33% 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("\"66%\"")]),_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 66% 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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -71,7 +71,7 @@ with(this){return _c('p',[_v("Similar to "),_c('strong',[_c('a',{attrs:{"href":" with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -86,7 +86,7 @@ with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lan with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -101,7 +101,7 @@ with(this){return _c('p',[_c('strong',[_v("Example 1: Describing elements in an with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/userGuide/diagrams/object.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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -113,7 +113,7 @@ with(this){return _c('p',[_c('strong',[_v("Example 2: Drawing over elements")]), with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/userGuide/diagrams/sequence.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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -134,10 +134,10 @@ with(this){return _c('p',[_v("This is effectively the same as the options used f with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("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("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _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")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"thumbnails"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"thumbnails"}},[_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("thumbnail")]),_v(" component allows you to insert thumbnails using text, images, or icons.")])])} @@ -146,7 +146,7 @@ with(this){return _c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"clas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -158,13 +158,13 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" is specified")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("background")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the background color."),_c('br'),_v(" Accepts any valid CSS background property")])]),_v(" "),_c('tr',[_c('td',[_v("border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the border thickness, type, and color."),_c('br'),_v(" Accepts any valid CSS border property")])]),_v(" "),_c('tr',[_c('td',[_v("circle")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("If this option is enabled, the thumbnail will be circle shaped instead of square")])]),_v(" "),_c('tr',[_c('td',[_v("font-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The color of the text, affects normal text and icons (but not emojis)")])]),_v(" "),_c('tr',[_c('td',[_v("font-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Text size, defaults to half of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("size")]),_v(", affects text, icons and emojis")])]),_v(" "),_c('tr',[_c('td',[_v("size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("100")]),_v(" "),_c('td',[_v("The size of the thumbnail in pixels")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The text to use in the thumbnail, "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#emoji"}},[_v("emojis")]),_v(" and markdown are supported here")])])])])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumb")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('thumb',{pre:true,attrs:{"circle":"","src":"https://markbind.org/images/logo-lightbackground.png","size":"100"}})],1)} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"diagrams"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"diagrams"}},[_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("You can use the "),_c('a',{attrs:{"href":"http://plantuml.com/"}},[_v("PlantUML")]),_v(" syntax to add diagrams.")])} @@ -173,7 +173,7 @@ with(this){return _c('p',[_v("You can use the "),_c('a',{attrs:{"href":"http://p with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -185,7 +185,13 @@ with(this){return _c('p',[_v("Alternatively, a PlantUML diagram can be specified with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")])])]),_c('p',[_v("in another file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("puml")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"diagrams/sequence.puml\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("300")]),_v(" />")]),_v("\n")])])])])} +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")])} +},function anonymous( +) { +with(this){return _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")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -197,10 +203,10 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("@enduml\n")]),_c('span',[_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"tree"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tree"}}),_v("Tree"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tree","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"tree"}},[_v("Tree"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tree","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tree")]),_v(" component allows you to generate tree-like visualisations, suitable for displaying folder structure.")])])} @@ -209,7 +215,7 @@ with(this){return _c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"clas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -218,7 +224,7 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -227,7 +233,7 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_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("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -236,7 +242,7 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You 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.")])])])} },function anonymous( ) { -with(this){return _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("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _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")])])} @@ -245,6 +251,6 @@ with(this){return _c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('d with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/presentation.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Presentational Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/popups.html"}},[_c('span',[_c('span',[_v("Pop-Up Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/components/navigation.html b/userGuide/components/navigation.html index 809e557..15173fc 100644 --- a/userGuide/components/navigation.html +++ b/userGuide/components/navigation.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Navigation Components - + + MarkBind - User Guide: Navigation Components @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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">
   <li><a href="#dropdown" class="dropdown-item">Action</a></li>
   <li><a href="#dropdown" class="dropdown-item">Another action</a></li>
@@ -64,9 +71,25 @@
   </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>
@@ -75,34 +98,130 @@
     <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>
-

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

<li slot="right">
+

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

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

OUTPUT:

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

+

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>
-
        <li slot="right">
+

          Options

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

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

          See: User Guide: Site Configuration → enableSearch.

          Related topic: User Guide: Making the Site Searchable.

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

          <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
+
          <li slot="right">
   <form class="navbar-form">
     <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback"></searchbar>
   </form>
 </li>
-
          +
          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>
@@ -143,7 +262,23 @@
     <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>
 
@@ -151,8 +286,8 @@
   <navbar type="dark">
     <a slot="brand" href="/index.html" title="Home" class="navbar-brand"><img src="/images/logo-darkbackground.svg" height="20"></a>
     <li><a highlight-on="exact" href="/index.html" class="nav-link">HOME</a></li>
-    <div tags="environment--ug"><li><a highlight-on="sibling-or-child" href="/userGuide/index.html" class="nav-link">USER GUIDE</a></li></div>
-    <div tags="environment--dg"><li><a highlight-on="sibling-or-child" href="/devGuide/index.html" class="nav-link">DEVELOPER GUIDE</a></li></div>
+    <div tags="environment--ug environment--combined"><li><a highlight-on="sibling-or-child" href="/userGuide/index.html" class="nav-link">USER GUIDE</a></li></div>
+    <div tags="environment--dg environment--combined"><li><a highlight-on="sibling-or-child" href="/devGuide/index.html" class="nav-link">DEVELOPER GUIDE</a></li></div>
     <li><a highlight-on="exact" href="/showcase.html" class="nav-link">SHOWCASE</a></li>
     <li><a highlight-on="exact" href="/about.html" class="nav-link">ABOUT</a></li>
     <li>
@@ -166,7 +301,23 @@
   </navbar>
 </header>
 
-

              Highlight Options

              Name Description
              child Highlights link if URL in address bar is a child of the link. E.g foo/bar is a child of foo.
              sibling Highlights link if URL in address bar is a sibling of the link. E.g foo/bar and foo/bear are siblings.
              sibling-or-child Highlights link if URL in address bar is a sibling or child of the link.
              exact Highlights link if URL in address bar exactly matches link.
              none No highlighting.
              <navbar type="primary">
+

              Highlight Options

              Name Description
              child Highlights link if URL in address bar is a child of the link. E.g foo/bar is a child of foo.
              sibling Highlights link if URL in address bar is a sibling of the link. E.g foo/bar and foo/bear are siblings.
              sibling-or-child Highlights link if URL in address bar is a sibling or child of the link.
              exact Highlights link if URL in address bar exactly matches link.
              none No highlighting.
              <navbar type="primary">
   <!-- Brand as slot -->
   <a slot="brand" href="/" title="Home" class="navbar-brand">MarkBind</a>
   <li><a href="/userGuide/components/navigation.html#navbars" class="nav-link">Highlighted Link</a></li>
@@ -179,8 +330,24 @@
     <a href="https://github.com/MarkBind/markbind" target="_blank" class="nav-link">Fork...</a>
   </li>
 </navbar>
-

              Mobile page and site navigation menus

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

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

              Alternatively, if you want to display 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>
@@ -190,7 +357,23 @@
     <page-nav-button />
   </div>
 </navbar>
-
              Component Description
              page-nav-button Pulls any element with an identifier, id=page-nav into the menu. If no such element exists, it pulls any page navigation menu used in the layout.
              site-nav-button Pulls any element with an identifier, id=site-nav into the menu. If no such element exists, it pulls all site navigation menu components used in the layout.

              Styling the mobile page and site navigation menus

              You may also wish to style your navigation content differently on mobile view. +

              Component Description
              page-nav-button Pulls any element with an identifier, id=page-nav into the menu. If no such element exists, it pulls any page navigation menu used in the layout.
              site-nav-button Pulls any element with an identifier, id=site-nav into the menu. If no such element exists, it pulls all site navigation menu components used in the layout.

              Styling the mobile page and site navigation menus

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

              CSS class attached to the root navigation element
              .mb-mobile-nav {
     display: block !important;
     margin: 0 !important;
@@ -199,13 +382,85 @@
     width: 100% !important;
     max-width: 100% !important;
 }
-

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

              Example

              #site-nav.mb-mobile-nav {
+

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

              Example

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

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

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

              Steps to add a siteNav:

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

              CODE:

              <site-nav>
+

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

              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)
@@ -214,26 +469,111 @@
   * [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, * Docs :expanded: will make the menu item Docs expand by default.

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

              Page Navigation Menus

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

              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 +

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

              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.

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

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


              Pop-Up Components

              Other Components


              +

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


              + diff --git a/userGuide/components/navigation.page-vue-render.js b/userGuide/components/navigation.page-vue-render.js index 6747547..6eb0b3d 100644 --- a/userGuide/components/navigation.page-vue-render.js +++ b/userGuide/components/navigation.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Action")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('dropdown',{attrs:{"type":"primary","menu-align-right":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Right aligned list")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])])]),_v(" "),_c('div',{staticClass:"btn-group d-flex mt-3",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)],1)]),_v(" "),_m(9),_v(" "),_c('div',[_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Multi-Level Dropdown")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])]),_v(" "),_c('dropdown',{scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Submenu")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])])])],1)],1)],1)]),_v(" "),_m(13),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(14),_v(" "),_c('tbody',[_m(15),_v(" "),_m(16),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('td',[_v("Dropdown button header text. (Supports inline MarkDown syntax)")])]),_v(" "),_m(19)])])]),_m(20),_v(" "),_m(21),_v(" "),_c('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('hr'),_v(" "),_c('div',[_m(22),_v(" "),_m(23),_v(" "),_c('div',{attrs:{"id":"body"}},[_c('div',[_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_m(27),_v(" "),_m(28),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_m(29),_v(" "),_m(30)],1),_v(" "),_m(31),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(32),_v(" "),_m(33),_v(" "),_m(34),_v(" "),_m(35),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_m(36),_v(" "),_m(37),_v(" "),_m(38),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1)],1)]),_v(" "),_m(39),_v(" "),_m(40),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"none\"")]),_v(" attribute and 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("")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to apply Bootstrap background styles.")])]),_v(" "),_m(41),_v(" "),_m(42),_m(43),_v(" "),_m(44),_m(45),_v(" "),_c('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(" "),_m(46),_v(" "),_m(47),_v(" "),_c('p',[_v("If you are viewing the documentation on a larger device, resize the window to see what it looks like.")]),_v(" "),_c('p',[_v("Alternatively, if you want to display "),_c('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("")]),_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(" "),_m(48),_v(" "),_m(49),_v(" "),_m(50),_v(" "),_m(51),_m(52),_m(53),_v(" "),_c('p',[_v("You may also wish to style your navigation content differently on mobile view.\nBy default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.")]),_v(" "),_m(54),_m(55),_v(" "),_m(56),_v(" "),_m(57),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("layouts")]),_v(" section to find out how to add custom CSS files to a page!")])])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(58),_v(" "),_c('div',{attrs:{"id":"content"}},[_m(59),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_m(60),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_m(61),_v(" "),_m(62),_v(" "),_m(63),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_m(64),_v(" "),_m(65),_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("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_m(66)]),_v(" "),_c('div',{attrs:{"id":"examples"}})]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(67),_v(" "),_m(68),_v(" "),_c('div',{attrs:{"id":"content"}},[_m(69),_v(" "),_m(70),_v(" "),_c('ol',[_c('li',[_c('p',[_c('strong',[_v("Specify the smallest heading level you want to be included")]),_v(" within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" of a page with "),_c('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(" "),_m(71),_v(" "),_m(72),_v(" "),_m(73),_v(" "),_m(74)]),_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("")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("Table of Contents")])])])])]),_v(" "),_c('p',[_v("You can specify multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("")]),_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("")]),_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('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"}},[_m(75),_v(" "),_m(76),_m(77),_v(" "),_c('p',[_m(78),_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("")]),_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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" {{ content }}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"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("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])],1)],1),_v(" "),_m(79)]),_v(" "),_c('hr'),_v(" "),_c('br'),_v(" "),_m(80),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#navigation-components"}},[_v("Navigation Components‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#dropdowns"}},[_v("Dropdowns‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#search-bars"}},[_v("Search Bars‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#navbars"}},[_v("Navbars‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#site-navigation-menus"}},[_v("Site Navigation Menus‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#page-navigation-menus"}},[_v("Page Navigation Menus‎")])])])],1)])],1),_v(" "),_m(81)])} +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(" "),_m(1),_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(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',[_m(6),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(7),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Action")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('dropdown',{attrs:{"type":"primary","menu-align-right":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Right aligned list")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])])]),_v(" "),_c('div',{staticClass:"btn-group d-flex mt-3",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)],1)]),_v(" "),_m(9),_v(" "),_c('div',[_m(10),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(11),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(12),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Multi-Level Dropdown")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])]),_v(" "),_c('dropdown',{scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Submenu")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])])])],1)],1)],1)]),_v(" "),_m(13),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(14),_v(" "),_c('tbody',[_m(15),_v(" "),_m(16),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('td',[_v("Dropdown button header text. (Supports inline MarkDown syntax)")])]),_v(" "),_m(19)])])]),_m(20),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(21),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('div',[_m(22),_v(" "),_m(23),_v(" "),_c('div',{attrs:{"id":"body"}},[_c('div',[_m(24),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(25),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(26),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(27),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_m(28),_v(" "),_m(29),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_m(30),_v(" "),_m(31)],1),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(32),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(33),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('div',[_m(34),_v(" "),_m(35),_v(" "),_m(36),_v(" "),_m(37),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_m(38),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(39),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(40),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1)],1)]),_v(" "),_m(41),_v(" "),_m(42),_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("")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to apply Bootstrap background styles.")])]),_v(" "),_m(43),_v(" "),_c('pre',[_m(44),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(45),_v(" "),_m(46),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(47),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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(" "),_m(48),_v(" "),_m(49),_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("")]),_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(" "),_m(50),_v(" "),_m(51),_v(" "),_m(52),_v(" "),_c('pre',[_m(53),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(54),_m(55),_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"},[_m(56),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(57),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_m(58),_v(" "),_m(59),_v(" "),_c('pre',[_m(60),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('hr'),_v(" "),_c('div',[_m(61),_v(" "),_c('p',[_v("Breadcrumb components provide an easy way for readers to navigate the hierarchy of the site.")]),_v(" "),_m(62),_v(" "),_m(63),_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(" "),_m(64),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(65),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(66),_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',[_m(67),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('div',[_m(68),_v(" "),_c('div',{attrs:{"id":"content"}},[_m(69),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_m(70),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_m(71),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(72),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(73),_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(" "),_m(74),_v(" "),_m(75),_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('hr'),_v(" "),_c('div',[_m(76),_v(" "),_m(77),_v(" "),_c('div',{attrs:{"id":"content"}},[_m(78),_v(" "),_m(79),_v(" "),_c('ol',[_c('li',[_c('p',[_c('strong',[_v("Specify the smallest heading level you want to be included")]),_v(" within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" of a page with "),_c('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(" "),_m(80),_v(" "),_m(81),_v(" "),_m(82),_v(" "),_m(83)]),_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("")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("Table of Contents")])])])])]),_v(" "),_c('p',[_v("You can specify multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("")]),_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("")]),_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"}},[_m(84),_v(" "),_c('pre',[_m(85),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(86),_v(" "),_c('p',[_m(87),_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("")]),_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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug 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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg 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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" {{ content }}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"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("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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(" "),_m(88)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(89),_v(" "),_c('div',{attrs:{"id":"content"}},[_m(90),_v(" "),_m(91),_v(" "),_m(92),_v(" "),_m(93),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(94),_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(" "),_m(95),_v(" "),_m(96),_v(" "),_c('td',[_v("Inline MarkDown text of the icon displayed on the left.")])]),_v(" "),_m(97),_v(" "),_m(98),_v(" "),_m(99)])])])]),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('pre',[_m(100),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(101)]),_v(" "),_c('hr'),_v(" "),_c('br'),_v(" "),_m(102),_v(" "),_c('br')],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":"#navigation"}},[_v("Navigation‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#dropdowns"}},[_v("Dropdowns‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#search-bars"}},[_v("Search Bars‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#navbars"}},[_v("Navbars‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#breadcrumbs"}},[_v("Breadcrumbs‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#site-navigation-menus"}},[_v("Site Navigation Menus‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#page-navigation-menus"}},[_v("Page Navigation Menus‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#scroll-to-top-button"}},[_v("Scroll To Top Button‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(103)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,13 +11,13 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_c('em',[_v("User Guide → Navigation Components")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"navigation-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navigation-components"}}),_v("Navigation Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navigation-components","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"navigation"}},[_v("Navigation"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navigation","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("The components in this page are used for scaffolding "),_c('strong',[_v("site and page navigation")]),_v(".")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"dropdowns"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"dropdowns"}},[_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("While the main use case for dropdowns is under navbars, they can also be used as top-level components.")])])} @@ -26,7 +26,7 @@ with(this){return _c('p',[_c('strong',[_v("While the main use case for dropdowns with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -38,7 +38,7 @@ with(this){return _c('p',[_c('strong',[_v("Dropdowns can also be nested within e with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -68,10 +68,10 @@ with(this){return _c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You may refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/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.")])])])} },function anonymous( ) { -with(this){return _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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Action\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"search-bars"}},[_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component allows users to search all headings within any page on the site.")])} @@ -80,7 +80,10 @@ with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs in with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -98,10 +101,13 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticCla with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])])} },function anonymous( ) { -with(this){return _c('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("")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"navbars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navbars"}}),_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"navbars"}},[_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Navbar allows visitors of your website to navigate through pages easily.")])])} @@ -116,7 +122,7 @@ with(this){return _c('ul',[_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"cl with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -131,7 +137,7 @@ with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticC with(this){return _c('p',[_c('strong',[_c('strong',[_v("Navbar Link Highlighting")])])])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug 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-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg 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-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_c('strong',[_v("Highlight Options")])])])} @@ -140,7 +146,7 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Highlight Options")])])] with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a child of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" is a child of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bear")]),_v(" are siblings.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling or child of the link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar exactly matches link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")])]),_v(" "),_c('td',[_v("No highlighting.")])])])])])} },function anonymous( ) { -with(this){return _c('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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_c('strong',[_v("Mobile page and site navigation menus")])])])} @@ -158,7 +164,7 @@ with(this){return _c('p',[_v("If you wish to alter the button placement on the n with(this){return _c('p',[_v("By default, if the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot is not specified, the site and page navigation buttons are simply placed as such.")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lower-navbar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-menu-container\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lower-navbar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-menu-container\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Component")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("page-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=page-nav")]),_v(" into the menu. If no such element exists, it pulls any "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation menu")]),_v(" used in the layout.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=site-nav")]),_v(" into the menu. If no such element exists, it pulls all "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation menu components")]),_v(" used in the layout.")])])])])])} @@ -167,7 +173,10 @@ with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticC with(this){return _c('p',[_c('strong',[_c('strong',[_v("Styling the mobile page and site navigation menus")])])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("CSS class attached to the root navigation element")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"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")])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("CSS class attached to the root navigation element")])])} +},function anonymous( +) { +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_v("If you require greater customisation, you may simply compose the respective selectors with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".mb-mobile-nav")]),_v(" element.")])} @@ -176,10 +185,31 @@ with(this){return _c('p',[_v("If you require greater customisation, you may simp with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])])} },function anonymous( ) { -with(this){return _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")])])])} +with(this){return _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")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"breadcrumbs"}},[_v("Breadcrumbs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#breadcrumbs","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"usage"}},[_v("Usage"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#usage","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"site-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus","onclick":"event.stopPropagation()"}})])} +with(this){return _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.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,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")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,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")])])} +},function anonymous( +) { +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])])} @@ -191,7 +221,7 @@ with(this){return _c('ol',[_c('li',[_v("Format your siteNav as an unordered Mark with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -203,10 +233,7 @@ with(this){return _c('p',[_v("MarkBind has styles nested lists with additional p with(this){return _c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])])} },function anonymous( ) { -with(this){return _c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])} -},function anonymous( -) { -with(this){return _c('h2',{attrs:{"id":"page-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"keyword d-none"},[_v("print page nav as table of content")])])} @@ -233,7 +260,7 @@ with(this){return _c('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav a with(this){return _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("

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

              ")]),_v(" headings in the pageNav, and set a custom pageNav title like so:")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("Then, in your "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout file")]),_v(", use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component to position the pageNav.")])} @@ -245,9 +272,48 @@ with(this){return _c('span',{staticClass:"large"},[_c('span',{staticClass:"badge with(this){return _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(".")])])} },function anonymous( ) { +with(this){return _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()"}})])} +},function anonymous( +) { +with(this){return _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.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Adding a scroll-top-button")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to layout file.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} +},function anonymous( +) { +with(this){return _c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])])} +},function anonymous( +) { +with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":fas-arrow-circle-up:")])])} +},function anonymous( +) { +with(this){return _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.")])])} +},function anonymous( +) { +with(this){return _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.")])])} +},function anonymous( +) { +with(this){return _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.")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _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.")])])} +},function anonymous( +) { with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/popups.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Pop-Up Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/others.html"}},[_c('span',[_c('span',[_v("Other Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/components/others.html b/userGuide/components/others.html index 66ffb70..ae4a515 100644 --- a/userGuide/components/others.html +++ b/userGuide/components/others.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Other Components - + + MarkBind - User Guide: Other Components @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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:">
 
   <!-- Anything you place directly under a question not in a slot is inserted into the question body! -->
@@ -35,19 +42,35 @@
 
   <!-- 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.
@@ -72,20 +95,36 @@
   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?
 
@@ -100,18 +139,34 @@
   11 / 11 = 1
   </q-option>
 </question>
-

              OUTPUT:

              Which of the following is true?

              q-option Options and Slots

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

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

              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). This works well for some and not others.

              CODE:

              <question type="blanks" hint="Google it!">
@@ -121,11 +176,27 @@
   <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 __________.
 
@@ -134,12 +205,28 @@
   <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! +

              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! 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?"
@@ -151,21 +238,53 @@
   :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.

              Deprecation notes

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

              Quizzes

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

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

              CODE:

              <quiz>
+

              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:

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

              OUTPUT:

              + Click start to begin +

              0 questions

              Quiz Options and Slots

              Name Type Default Description
              intro String '' Quiz intro markup above the question count.
              intro Slot Click start to begin Quiz intro markup. Overrides the intro attribute if both are present.
              MCQ and Checkbox questions
              <!-- use type="checkbox" for checkbox questions -->
 
 <question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
   <!-- Insert the reason for the option using the reason attribute -->
@@ -193,7 +312,23 @@
   </div>
 </question>
 
-
              Fill-in-the-Blanks questions
              
+
              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 __________.
@@ -202,7 +337,23 @@
   <q-option keywords="figuration"></q-option>
 </question>
 
-
              Text questions
              
+
              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">
@@ -213,19 +364,66 @@
   </div>
 </question>
 
-
              Quiz
              <quiz>
+
              Quiz
              <quiz>
   <question type="mcq">...</question>
   <question type="checkbox">...</question>
   <question type="blanks">...</question>
   <question type="text">...</question>
 </quiz>
-

              - Click start to begin -

              0 questions

              Navigation Components

              Advanced Component Usage


              +

              + Click start to begin +

              0 questions

              Navigation Components

              Advanced Component Usage


              + diff --git a/userGuide/components/others.page-vue-render.js b/userGuide/components/others.page-vue-render.js index 72002d0..99c139a 100644 --- a/userGuide/components/others.page-vue-render.js +++ b/userGuide/components/others.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_c('p',{staticClass:"mt-3"},[_v("Question and quiz components provide an easy way to test readers on the relevant content topic in the page.")]),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',[_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which of the following is correct?")])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)]),_v(" "),_m(12),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Header and Hint example "),_c('strong',[_v("with slots")])])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Headers and Hints using slots")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Which of the following is correct?"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/math-question.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"math question image\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"200\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-block mx-auto\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html\"")]),_v(">")]),_v("Daily Mail"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Think out of the box! "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-box\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Need another hint? "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Two of the answers are correct!\"")]),_v(">")]),_v("Hover over me!"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-mouse-pointer\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('p',[_v("Which of the following is correct?")]),_v(" "),_c('p',[_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️")])])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('p',[_v("Need another hint? "),_c('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(" "),_m(13),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(14),_v(" "),_c('tbody',[_m(15),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_c('td',[_v("The markup to insert into the question header. The header is omitted if this is not provided.")])]),_v(" "),_c('tr',[_c('td',[_v("hint"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_c('td',[_v("The content to display in the hint box.")])])])])]),_m(20),_v(" "),_m(21),_v(" "),_c('p',[_v("In both instances, you can include the possible answers using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component, placed anywhere inside the "),_c('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("")]),_v(" attribute.")],1),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_c('div',[_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1)],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("MCQ questions can have multiple correct options!")]),_v(" "),_m(27),_v(" "),_c('div',[_m(28),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1)],1)],1)]),_v(" "),_m(31),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(32),_v(" "),_c('tbody',[_m(33),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(34),_v(" "),_m(35),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_m(36),_v(" "),_m(37),_v(" "),_m(38),_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',[_m(39),_v(" "),_m(40),_v(" "),_m(41),_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"}},[_c('span',{staticClass:"anchor",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(" "),_m(42),_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',[_m(43),_v(" "),_m(44),_v(" "),_m(45),_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"}},[_c('span',{staticClass:"anchor",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(" "),_m(46),_v(" "),_m(47),_m(48),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(49),_v(" "),_c('tbody',[_m(50),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(51),_v(" "),_m(52),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_m(53),_v(" "),_m(54),_v(" "),_m(55),_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(" "),_m(56),_v(" "),_c('div',[_m(57),_v(" "),_m(58),_v(" "),_m(59),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute.")]),_v(" "),_c('p',[_v("If you don't want to validate the answer at all, you may also omit the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute entirely. Doing so also always marks the question as correct inside "),_c('a',{attrs:{"href":"#quizzes"}},[_v("quizzes")]),_v(".")])]),_v(" "),_m(60),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(61),_v(" "),_c('tbody',[_m(62),_v(" "),_m(63),_v(" "),_c('tr',[_c('td',[_v("answer"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(64),_v(" "),_m(65),_v(" "),_c('td',[_v("The answer or explanation to display when the user clicks the check button.")])])])])]),_c('box',{attrs:{"type":"important"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Deprecation notes")])]},proxy:true}])},[_v(" "),_c('ul',[_c('li',[_v("The old "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("has-input")]),_v(" attributes translate to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(", but will be deprecated in a future version.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v("s without a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type")]),_v(" (or an unrecognised one) will always be marked correct when placed in quizzes.")])])]),_v(" "),_m(66),_v(" "),_m(67),_v(" "),_m(68),_v(" "),_c('div',[_m(69),_v(" "),_m(70),_v(" "),_m(71),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true-2"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"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"}},[_c('span',{staticClass:"anchor",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(" "),_m(72),_v(" "),_m(73),_v(" "),_m(74),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v("\n\n ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\n\n "),_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',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)])],1),_v(" "),_c('hr'),_v(" "),_c('br'),_v(" "),_m(75),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#other-components"}},[_v("Other Components‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#questions-and-quizzes"}},[_v("Questions and Quizzes‎")])])])],1)])],1),_v(" "),_m(76)])} +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(" "),_m(1),_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(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_c('p',{staticClass:"mt-3"},[_v("Question and quiz components provide an easy way to test readers on the relevant content topic in the page.")]),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',[_m(9),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_m(10),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(11),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_m(12),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which of the following is correct?")])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)]),_v(" "),_m(13),_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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Which of the following is correct?"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/math-question.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"math question image\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"200\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-block mx-auto\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html\"")]),_v(">")]),_v("Daily Mail"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Think out of the box! "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-box\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Need another hint? "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Two of the answers are correct!\"")]),_v(">")]),_v("Hover over me!"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-mouse-pointer\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_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(" "),_m(14),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(15),_v(" "),_c('tbody',[_m(16),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('td',[_v("The markup to insert into the question header. The header is omitted if this is not provided.")])]),_v(" "),_c('tr',[_c('td',[_v("hint"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_c('td',[_v("The content to display in the hint box.")])])])])]),_m(21),_v(" "),_m(22),_v(" "),_c('p',[_v("In both instances, you can include the possible answers using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component, placed anywhere inside the "),_c('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("")]),_v(" attribute.")],1),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_c('div',[_m(25),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(26),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(27),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1)],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("MCQ questions can have multiple correct options!")]),_v(" "),_m(28),_v(" "),_c('div',[_m(29),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(30),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(31),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true"}},[_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1)],1)],1)]),_v(" "),_m(32),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(33),_v(" "),_c('tbody',[_m(34),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(35),_v(" "),_m(36),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_m(37),_v(" "),_m(38),_v(" "),_m(39),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by 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',[_m(40),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(41),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(42),_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(" "),_m(43),_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',[_m(44),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(45),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(46),_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(" "),_m(47),_v(" "),_m(48),_m(49),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(50),_v(" "),_c('tbody',[_m(51),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(52),_v(" "),_m(53),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_m(54),_v(" "),_m(55),_v(" "),_m(56),_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(" "),_m(57),_v(" "),_c('div',[_m(58),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(59),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(60),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute.")]),_v(" "),_c('p',[_v("If you don't want to validate the answer at all, you may also omit the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute entirely. Doing so also always marks the question as correct inside "),_c('a',{attrs:{"href":"#quizzes"}},[_v("quizzes")]),_v(".")])]),_v(" "),_m(61),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(62),_v(" "),_c('tbody',[_m(63),_v(" "),_m(64),_v(" "),_c('tr',[_c('td',[_v("answer"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(65),_v(" "),_m(66),_v(" "),_c('td',[_v("The answer or explanation to display when the user clicks the check button.")])])])])]),_m(67),_v(" "),_m(68),_v(" "),_m(69),_v(" "),_c('div',[_m(70),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(71),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(72),_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(" "),_m(73),_v(" "),_m(74),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('div',{staticClass:"code-block"},[_m(75),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(76),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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"},[_m(77),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(78),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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"},[_m(79),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(80),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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"},[_m(81),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(82),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('br'),_v(" "),_m(83),_v(" "),_c('br')],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":"#others"}},[_v("Others‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#questions-and-quizzes"}},[_v("Questions and Quizzes‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(84)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,16 +11,16 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_c('em',[_v("User Guide → Other Components")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"other-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"other-components"}}),_v("Other Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#other-components","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"others"}},[_v("Others"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#others","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("This page lists some other components that may be useful in creating education websites. For now, there are only question and quiz components.")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"questions-and-quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"introduction"}},[_c('span',{staticClass:"anchor",attrs:{"id":"introduction"}}),_v("Introduction"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#introduction","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"introduction"}},[_v("Introduction"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#introduction","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Question components ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") can be one of the following types: "),_c('strong',[_v("MCQ")]),_v(", "),_c('strong',[_v("Checkbox")]),_v(", "),_c('strong',[_v("Fill-in-the-Blanks")]),_v(", or "),_c('strong',[_v("Text")]),_v(".")])} @@ -35,7 +35,10 @@ with(this){return _c('p',[_v("You can also insert markdown into the "),_c('stron with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Header and Hint syntax")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Header and Hint syntax","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("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is correct?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Header and Hint syntax")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"Header and Hint syntax","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("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is correct?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -65,7 +68,7 @@ with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-la with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} },function anonymous( ) { -with(this){return _c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"mcq-and-checkbox-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"mcq-and-checkbox-questions"}}),_v("MCQ and Checkbox Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#mcq-and-checkbox-questions","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("MCQ and checkbox questions are indicated with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"mcq\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"checkbox\"")]),_v(" attribute.")])} @@ -80,7 +83,7 @@ with(this){return _c('p',[_c('strong',[_v("MCQ Questions")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -92,7 +95,7 @@ with(this){return _c('p',[_c('strong',[_v("Checkbox Questions")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Use your calculator! :fas-calculator:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### Which of the following is true?\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 + 1 = 11\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Division by zero is **undefined**!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 / 0 = infinity\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" 11 / 11 = 1\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Division by zero is **undefined**!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 / 0 = infinity\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" 11 / 11 = 1\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -113,7 +116,7 @@ with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-la with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} },function anonymous( ) { -with(this){return _c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"fill-in-the-blanks-questions"}},[_c('span',{staticClass:"anchor",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()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _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.")])} @@ -125,7 +128,7 @@ with(this){return _c('p',[_v("Unlike MCQ and checkbox questions, answer checking with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -137,7 +140,7 @@ with(this){return _c('p',[_v("By default, if the question has yet to be answered with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_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("")]),_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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_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("")]),_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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -164,7 +167,7 @@ with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-la with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} },function anonymous( ) { -with(this){return _c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"text-questions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-questions"}}),_v("Text Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-questions","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Text questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(" attribute.")])} @@ -179,7 +182,7 @@ with(this){return _c('p',[_v("You can provide your answer in the "),_c('code',{p with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -203,7 +206,7 @@ with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-la with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"quizzes"}}),_v("Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quizzes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"quizzes"}},[_v("Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quizzes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("You can also build a series of questions out of multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components.")])} @@ -215,7 +218,7 @@ with(this){return _c('p',[_v("Simply place the "),_c('code',{pre:true,attrs:{"cl with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -227,12 +230,33 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Quiz Options and Slots") with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Quiz intro markup above the question count.")])]),_v(" "),_c('tr',[_c('td',[_v("intro")]),_v(" "),_c('td',[_v("Slot")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Click start to begin")])]),_v(" "),_c('td',[_v("Quiz intro markup. Overrides the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intro")]),_v(" attribute if both are present.")])])])])])} },function anonymous( ) { -with(this){return _c('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("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("MCQ and Checkbox questions")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"MCQ and Checkbox questions","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Fill-in-the-Blanks questions")])])} +},function anonymous( +) { +with(this){return _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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/navigation.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Navigation Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/advanced.html"}},[_c('span',[_c('span',[_v("Advanced Component Usage")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/components/popups.html b/userGuide/components/popups.html index 9536f0f..ffaee1d 100644 --- a/userGuide/components/popups.html +++ b/userGuide/components/popups.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Pop-Up Components - + + MarkBind - User Guide: Pop-Up Components @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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>
 </tooltip>
 <tooltip content="Lorem ipsum dolor sit amet" placement="left">
@@ -60,16 +67,64 @@
 
 **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.
-

              Hover to see a tooltip.

              Popovers

              CODE:

              <popover content="Lorem ipsum dolor sit amet" placement="top">
+

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

              Hover to see a tooltip.

              Popovers

              CODE:

              <popover content="Lorem ipsum dolor sit amet" placement="top">
   <button class="btn btn-secondary">Popover on top</button>
 </popover>
 <popover content="Lorem ipsum dolor sit amet" placement="left">
@@ -132,14 +187,46 @@
 <div>
   <popover header="false" content="Nice!">What do you say</popover>
 </div>
-

              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">
@@ -148,7 +235,23 @@
 
 </div>
 </popover>
-

              Hover over the keyword to see the popover.

              Modals

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

              CODE:

              More about <trigger for="modal:loremipsum">trigger</trigger>.
+

              Hover over the keyword to see the popover.

              Modals

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

              CODE:

              More about <trigger for="modal:loremipsum">trigger</trigger>.
 <modal header="**Modal header** :rocket:" id="modal:loremipsum">
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
   magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
@@ -172,15 +275,62 @@
   consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
   Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </modal>
-

              OUTPUT:

              More about trigger.


              +

              OUTPUT:

              More about trigger.


              This is the same trigger as last one. -

              This is a trigger for a centered modal.

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

              More about triggers

              Options

              Name type Default Description
              header[S] String '' Header of the Modal component. Supports inline markdown text.
              footer
              modal-footer
              (deprecated)              		 Slot empty Specifying this will override the ok-text attribute, and the OK button will not render.
              ok-text String '' Text for the OK button.
              effect String zoom Supports: zoom, fade.
              id String Used by Trigger to activate the Modal by id.
              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


              + diff --git a/userGuide/components/popups.page-vue-render.js b/userGuide/components/popups.page-vue-render.js index eccedf4..e27281f 100644 --- a/userGuide/components/popups.page-vue-render.js +++ b/userGuide/components/popups.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_c('div',[_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('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(" "),_m(8),_v(" "),_c('div',[_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('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(" "),_m(12),_v(" "),_m(13),_m(14),_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('hr'),_v(" "),_c('div',[_m(15),_v(" "),_c('div',[_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header"}}),_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"content-using-slot"}}),_v("Content using slot"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-slot","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text"}}),_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("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(" "),_m(23),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(24),_v(" "),_c('tbody',[_m(25),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(26),_v(" "),_m(27),_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(" "),_m(28),_v(" "),_m(29),_v(" "),_c('td',[_v("Popover content, supports MarkDown text.")])]),_v(" "),_m(30),_v(" "),_m(31)])])]),_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(" "),_m(32),_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('hr'),_v(" "),_c('div',[_m(33),_v(" "),_m(34),_v(" "),_c('div',[_m(35),_v(" "),_m(36),_v(" "),_m(37),_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(" "),_m(38),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(39),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(40),_v(" "),_m(41),_v(" "),_c('td',[_v("Header of the Modal component. Supports inline markdown text.")])]),_v(" "),_c('tr',[_m(42),_v(" "),_c('td',[_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_v("Slot")])],1),_v(" "),_c('td',[_v("empty")]),_v(" "),_m(43)]),_v(" "),_m(44),_v(" "),_m(45),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_m(50)])])]),_m(51),_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('hr'),_v(" "),_c('br'),_v(" "),_m(52),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#pop-up-components"}},[_v("Pop-Up Components‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tooltips"}},[_v("Tooltips‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#popovers"}},[_v("Popovers‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#modals"}},[_v("Modals‎")])])])],1)])],1),_v(" "),_m(53)])} +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(" "),_m(1),_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(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_c('div',[_m(5),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(6),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(7),_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(" "),_m(8),_v(" "),_c('div',[_m(9),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(10),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(11),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('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(" "),_m(12),_v(" "),_m(13),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(14),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('div',[_m(15),_v(" "),_c('div',[_m(16),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(17),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(18),_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"}},[_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","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(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(21),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(22),_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(" "),_m(23),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(24),_v(" "),_c('tbody',[_m(25),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(26),_v(" "),_m(27),_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(" "),_m(28),_v(" "),_m(29),_v(" "),_c('td',[_v("Popover content, supports MarkDown text.")])]),_v(" "),_m(30),_v(" "),_m(31)])])]),_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',[_m(32),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('div',[_m(33),_v(" "),_m(34),_v(" "),_c('div',[_m(35),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(36),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(37),_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(" "),_m(38),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(39),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(40),_v(" "),_m(41),_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(" "),_m(42)]),_v(" "),_m(43),_v(" "),_m(44),_v(" "),_m(45),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_m(48),_v(" "),_m(49)])])]),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(50),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('br'),_v(" "),_m(51),_v(" "),_c('br')],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":"#pop-ups"}},[_v("Pop-Ups‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tooltips"}},[_v("Tooltips‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#popovers"}},[_v("Popovers‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#modals"}},[_v("Modals‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(52)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,19 +11,19 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_c('em',[_v("User Guide → Pop-Up Components")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"pop-up-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pop-up-components"}}),_v("Pop-Up Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pop-up-components","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"pop-ups"}},[_v("Pop-Ups"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pop-ups","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("The components in this page can be used to easily create "),_c('strong',[_v("various forms of pop-ups")]),_v(" that are activated on some user action (e.g., hovering over some text). This may be useful for showing additional information related to some specific area or span of content.")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"tooltips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"tooltips"}},[_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Trigger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Click"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"focus\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Focus\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Free Text**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_v("coupling"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Trigger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Click"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"focus\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Focus\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Free Text**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_v("coupling"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -35,7 +35,7 @@ with(this){return _c('p',[_c('strong',[_v("Using trigger for Tooltip:")]),_c('br with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This tooltip triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])])])} +with(this){return _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("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This tooltip triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -47,16 +47,16 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Options")])])])} with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trigger")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hover 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(".")])])])])])} },function anonymous( ) { -with(this){return _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("")]),_v(" to see a tooltip.\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"An explanation, **supports simple Markdown**\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" to see a tooltip.\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"popovers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"popovers"}},[_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Markdown"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using slot"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using src"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Wrap Text"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Markdown"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using slot"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using src"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Wrap Text"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -68,7 +68,7 @@ with(this){return _c('p',[_c('strong',[_v("Using trigger for Popover:")]),_c('br with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This popover is triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])])])} +with(this){return _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("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This popover is triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -101,10 +101,10 @@ with(this){return _c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre: with(this){return _c('tr',[_c('td',[_v("placement")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")])]),_v(" "),_c('td',[_v("How to position the Popover."),_c('br'),_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("top")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("left")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("right")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bottom")]),_v(".")])])} },function anonymous( ) { -with(this){return _c('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("")]),_v(" to see the popover.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("description :+1:\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Hover over the "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(">")]),_v("keyword"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" to see the popover.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("description :+1:\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"modals"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"modals"}},[_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Modals are to be used together with the "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" component for activation.")])])} @@ -113,7 +113,7 @@ with(this){return _c('p',[_c('strong',[_v("Modals are to be used together with t with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _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("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -131,9 +131,6 @@ with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-la with(this){return _c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])])} },function anonymous( ) { -with(this){return _c('td',[_v("footer "),_c('hr',{staticStyle:{"margin-top":"0.2rem","margin-bottom":"0"}}),_v(" "),_c('small',[_v("modal-footer "),_c('br'),_v(" (deprecated)")])])} -},function anonymous( -) { with(this){return _c('td',[_v("Specifying this will override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ok-text")]),_v(" attribute, and the OK button will not render.")])} },function anonymous( ) { @@ -158,12 +155,12 @@ with(this){return _c('tr',[_c('td',[_v("center")]),_v(" "),_c('td',[_c('code',{p with(this){return _c('tr',[_c('td',[_v("backdrop")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")])]),_v(" "),_c('td',[_v("Enables closing the Modal by clicking on the backdrop.")])])} },function anonymous( ) { -with(this){return _c('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("")]),_v(" to open a modal.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Modal header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Modal content\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Click "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" to open a modal.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Modal header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Modal content\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Image & Diagram Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/navigation.html"}},[_c('span',[_c('span',[_v("Navigation Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/components/presentation.html b/userGuide/components/presentation.html index 1e18886..8f194bb 100644 --- a/userGuide/components/presentation.html +++ b/userGuide/components/presentation.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Presentational Components - + + MarkBind - User Guide: Presentational Components @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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.

              Badges

              CODE:

              Normal:
 <span class="badge bg-primary">Primary</span>
 <span class="badge bg-secondary">Secondary</span>
 <span class="badge bg-success">Success</span>
@@ -43,9 +50,25 @@
 <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>
 
@@ -58,16 +81,48 @@
 
 ### 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>
-

              Primary Success

              Feature Y stable

              Boxes

              Boxes come with different built-in types.

              CODE:

              <box>
+

              Primary Success

              Feature Y stable

              Boxes

              Boxes come with different built-in types.

              CODE:

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

              OUTPUT:

              +

              OUTPUT:

              default -
              +
              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>
     default
@@ -149,23 +220,39 @@
 <box type="info" theme="dark">
     dark
 </box>
-

              OUTPUT:

              +

              OUTPUT:

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

              MarkBind also supports a light color scheme for boxes

              CODE:

              <box light>
     default light
@@ -194,25 +281,41 @@
 <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>
@@ -239,23 +342,39 @@
 <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
@@ -266,20 +385,52 @@
 
 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">
@@ -291,48 +442,144 @@
 <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!">
+

              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!">
   Lorem ipsum ...
 </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.
@@ -343,7 +590,23 @@
   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. @@ -353,7 +616,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>
@@ -383,7 +646,23 @@
 <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>
@@ -395,19 +674,99 @@
 <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:

              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:

              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">
   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">
@@ -422,12 +781,44 @@
     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">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
   </tab>
@@ -449,15 +840,31 @@
     </tab>
   </tab-group>
 </tabs>
-

              OUTPUT:

                First tab
                +

                OUTPUT:

                  First tab
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis. -
                  Disabled second tab ❌
                  Tab not printed
                  +
                  Disabled second tab ❌
                  Tab not printed
                  This tab will not be printed. -
                  Third tab group 🌌
                  Stars ⭐️
                  +
                  Third tab group 🌌
                  Stars ⭐️
                  Some stuff about stars ... -
                  Disabled Moon 🌑
                  Disabled fourth tab group
                  Hidden tab
                  +
                  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>
@@ -473,17 +880,48 @@
     </tab>
   </tab-group>
 </tabs>
-
                    First tab
                    +
                      First tab
                      Content of the first tab -
                      Second tab
                      +
                      Second tab
                      Contents of the second tab -
                      Third tab group 📺
                      Stars ⭐️
                      +
                      Third tab group 📺
                      Stars ⭐️
                      Some stuff about stars ... -
                      Moon
                      +
                      Moon
                      Some stuff about the moon ... -

                      Relevant Tips & Tricks

                      Indent components

                      Using Components

                      Image & Diagram Components


                      +

                      Relevant Tips & Tricks

                      Indent components

                      Using Components

                      Image & Diagram Components


                      + diff --git a/userGuide/components/presentation.page-vue-render.js b/userGuide/components/presentation.page-vue-render.js index 502e9b2..c0b0310 100644 --- a/userGuide/components/presentation.page-vue-render.js +++ b/userGuide/components/presentation.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',{staticClass:"card-title"},[_c('i',[_c('strong',[_c('span',{staticStyle:{"color":"#FF0000"}},[_v("R")]),_v(" "),_c('span',{staticStyle:{"color":"#FF7F00"}},[_v("A")]),_v(" "),_c('span',{staticStyle:{"color":"#FFFF00"}},[_v("I")]),_v(" "),_c('span',{staticStyle:{"color":"#00FF00"}},[_v("N")]),_v(" "),_c('span',{staticStyle:{"color":"#0000FF"}},[_v("B")]),_v(" "),_c('span',{staticStyle:{"color":"#4B0082"}},[_v("O")]),_v(" "),_c('span',{staticStyle:{"color":"#9400D3"}},[_v("W")])])])])]},proxy:true}])},[_v("\n As shown in this panel, using the header slot\n allows you to customize the Panel's header using HTML.\n")])],1)],1)])])])],1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_c('div',[_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('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',[_v("You can use Badges in combination with headings, buttons, links, etc.")]),_v(" "),_c('div',[_m(8),_v(" "),_m(9),_v(" "),_m(10),_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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(14),_v(" "),_m(15),_v(" "),_c('div',[_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header"}}),_v("Header 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")]),_v(" "),_c('box',{attrs:{"type":"warning","dismissible":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("You can use "),_c('strong',[_v("markdown")]),_v(" here! 🍕")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n ")])],1)],1)],1)]),_v(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_m(23),_v(" "),_c('div',[_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"light":""}},[_v("\n default light\n")]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_v("\n info light\n")]),_v(" "),_c('box',{attrs:{"type":"warning","light":""}},[_v("\n warning light\n")]),_v(" "),_c('box',{attrs:{"type":"success","light":""}},[_v("\n success light\n")]),_v(" "),_c('box',{attrs:{"type":"important","light":""}},[_v("\n important light\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","light":""}},[_v("\n wrong light\n")]),_v(" "),_c('box',{attrs:{"type":"tip","light":""}},[_v("\n tip light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""}},[_v("\n definition light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n definition light with header markdown\n")])],1)],1)]),_v(" "),_m(27),_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',[_m(28),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"seamless":""}},[_v("\n default seamless\n")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_v("\n info seamless\n")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\n warning seamless\n")]),_v(" "),_c('box',{attrs:{"type":"success","seamless":""}},[_v("\n success seamless\n")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_v("\n important seamless\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","seamless":""}},[_v("\n wrong seamless\n")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n tip seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":"","dismissible":""}},[_v("\n dismissible definition seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown-2"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown-2","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n success seamless with header markdown\n")])],1)],1)]),_v(" "),_m(31),_v(" "),_c('div',[_m(32),_v(" "),_m(33),_v(" "),_m(34),_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(" "),_m(35),_v(" "),_c('div',[_m(36),_v(" "),_m(37),_v(" "),_m(38),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('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(" "),_m(39),_v(" "),_c('div',[_m(40),_v(" "),_m(41),_v(" "),_m(42),_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(" "),_m(43),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(44),_v(" "),_c('tbody',[_m(45),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_c('tr',[_c('td',[_v("icon"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(50),_v(" "),_m(51),_v(" "),_c('td',[_v("Inline MarkDown text of the icon displayed on the left.")])]),_v(" "),_m(52),_v(" "),_m(53),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(54),_v(" "),_m(55),_v(" "),_c('td',[_v("Markdown text of the box header.")])]),_v(" "),_m(56),_v(" "),_m(57),_v(" "),_m(58),_v(" "),_m(59),_v(" "),_m(60),_v(" "),_m(61),_v(" "),_m(62)])])]),_m(63),_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('hr'),_v(" "),_c('div',[_m(64),_v(" "),_m(65),_v(" "),_c('div',[_m(66),_v(" "),_m(67),_v(" "),_m(68),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_m(69),_v(" "),_c('div',[_m(70),_v(" "),_m(71),_v(" "),_m(72),_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(" "),_m(73),_v(" "),_c('div',[_m(74),_v(" "),_m(75),_v(" "),_m(76),_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(" "),_m(77),_v(" "),_c('div',[_m(78),_v(" "),_m(79),_v(" "),_m(80),_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(" "),_m(81),_v(" "),_c('div',[_m(82),_v(" "),_m(83),_v(" "),_m(84),_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(" "),_m(85),_v(" "),_c('div',[_m(86),_v(" "),_m(87),_v(" "),_m(88),_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(" "),_m(89),_v(" "),_c('div',[_m(90),_v(" "),_m(91),_v(" "),_m(92),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('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(" "),_m(93),_v(" "),_c('div',[_m(94),_v(" "),_m(95),_v(" "),_m(96),_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(" "),_m(97),_v(" "),_c('div',[_m(98),_v(" "),_m(99),_v(" "),_m(100),_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(" "),_m(101),_v(" "),_c('div',[_m(102),_v(" "),_m(103),_v(" "),_m(104),_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(" "),_m(105),_v(" "),_c('div',[_m(106),_v(" "),_m(107),_v(" "),_m(108),_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(" "),_m(109),_v(" "),_c('div',[_m(110),_v(" "),_m(111),_v(" "),_m(112),_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(" "),_m(113),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(114),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(115),_v(" "),_m(116),_v(" "),_c('td',[_v("The clickable text on the Panel's header. Supports MarkDown text.")])]),_v(" "),_m(117),_v(" "),_m(118),_v(" "),_m(119),_v(" "),_m(120),_v(" "),_m(121),_v(" "),_m(122),_v(" "),_m(123),_v(" "),_m(124),_v(" "),_m(125),_v(" "),_m(126),_v(" "),_m(127),_v(" "),_m(128),_v(" "),_m(129)])])]),_m(130),_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('hr'),_v(" "),_c('div',[_m(131),_v(" "),_c('div',[_m(132),_v(" "),_m(133),_v(" "),_m(134),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_m(135),_v(" "),_m(136),_v(" "),_m(137),_m(138),_v(" "),_m(139),_m(140),_v(" "),_m(141),_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(" "),_m(142),_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('hr'),_v(" "),_c('br'),_v(" "),_m(143),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Indent components")])]},proxy:true}])},[_v(" "),_c('div',[_c('h5',{attrs:{"id":"indent-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"indent-components"}}),_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Indent components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#indent-components","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("In some cases, you may want to indent components such as panels and boxes to match the surrounding content.\nThis is easily achieved by adding some margin and padding utility classes from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/5.1/utilities/spacing/"}},[_v("Bootstrap")]),_v("\nto the component. The following examples show how to do this.")]),_v(" "),_c('p',[_c('strong',[_v("Indent Box component")])]),_v(" "),_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("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-4\"")]),_v(">")]),_v("Some text at level 2"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_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("Some text at level 1")]),_v(" "),_c('box',{staticClass:"ms-4"},[_v("Some text at level 2")]),_v(" "),_c('box',[_v("Some text at level 1")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Indent Panel component")])]),_v(" "),_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 panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-3\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" The \"ms-3\" is arbitarily chosen i.e \"ms-0\" to \"ms-5\" are all possible values.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_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 panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{staticClass:"ms-3",scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 2")])]},proxy:true}])},[_v("\n The \"ms-3\" is arbitarily chosen i.e \"ms-0\" to \"ms-5\" are all possible values.\n")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Indent Included component")])]),_v(" "),_c('p',[_v("The following box component will be included via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(".")]),_v(" "),_c('div',{attrs:{"id":"forIndentDemo"}},[_c('box',[_v("Some text from include")])],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("box")]),_v(">")]),_v("Some text at level 1 (before included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tipsAndTricks.md#forIndentDemo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-5\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1 (after included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_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("Some text at level 1 (before included content)")]),_v(" "),_c('div',{staticClass:"ms-5"},[_c('box',[_v("Some text from include")])],1),_v(" "),_c('box',[_v("Some text at level 1 (after included content)")])],1)],1)])])]),_v(" "),_m(144),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{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":"#presentational-components"}},[_v("Presentational Components‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#badges"}},[_v("Badges‎")]),_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":"#panels"}},[_v("Panels‎")]),_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":"#relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks‎")])])],1)])],1),_v(" "),_m(145)])} +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(" "),_m(1),_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(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_c('div',[_m(5),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(6),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(7),_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',[_v("You can use Badges in combination with headings, buttons, links, etc.")]),_v(" "),_c('div',[_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(9),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(10),_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(" "),_m(11),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(12),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(13)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(14),_v(" "),_m(15),_v(" "),_c('div',[_m(16),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(17),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(18),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_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(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(21),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_m(23),_v(" "),_c('div',[_m(24),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(25),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(26),_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(" "),_m(27),_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',[_m(28),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(29),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(30),_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(" "),_m(31),_v(" "),_c('div',[_m(32),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(33),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(34),_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(" "),_m(35),_v(" "),_c('div',[_m(36),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(37),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(38),_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(" "),_m(39),_v(" "),_c('div',[_m(40),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(41),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(42),_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(" "),_m(43),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(44),_v(" "),_c('tbody',[_m(45),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_c('tr',[_c('td',[_v("icon"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(50),_v(" "),_m(51),_v(" "),_c('td',[_v("Inline MarkDown text of the icon displayed on the left.")])]),_v(" "),_m(52),_v(" "),_m(53),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(54),_v(" "),_m(55),_v(" "),_c('td',[_v("Markdown text of the box header.")])]),_v(" "),_m(56),_v(" "),_m(57),_v(" "),_m(58),_v(" "),_m(59),_v(" "),_m(60),_v(" "),_m(61),_v(" "),_m(62)])])]),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(63),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('div',[_m(64),_v(" "),_m(65),_v(" "),_c('div',[_m(66),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(67),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(68),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_m(69),_v(" "),_c('div',[_m(70),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(71),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(72),_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(" "),_m(73),_v(" "),_c('div',[_m(74),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(75),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(76),_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(" "),_m(77),_v(" "),_c('div',[_m(78),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(79),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(80),_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(" "),_m(81),_v(" "),_c('div',[_m(82),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(83),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(84),_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(" "),_m(85),_v(" "),_c('div',[_m(86),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(87),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(88),_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(" "),_m(89),_v(" "),_c('div',[_m(90),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(91),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(92),_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(" "),_m(93),_v(" "),_c('div',[_m(94),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(95),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(96),_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(" "),_m(97),_v(" "),_c('div',[_m(98),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(99),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(100),_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(" "),_m(101),_v(" "),_c('div',[_m(102),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(103),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(104),_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(" "),_m(105),_v(" "),_c('div',[_m(106),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(107),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(108),_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(" "),_m(109),_v(" "),_c('div',[_m(110),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(111),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(112),_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(" "),_m(113),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_m(114),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_m(115),_v(" "),_m(116),_v(" "),_c('td',[_v("The clickable text on the Panel's header. Supports MarkDown text.")])]),_v(" "),_m(117),_v(" "),_m(118),_v(" "),_m(119),_v(" "),_m(120),_v(" "),_m(121),_v(" "),_m(122),_v(" "),_m(123),_v(" "),_m(124),_v(" "),_m(125),_v(" "),_m(126),_v(" "),_m(127),_v(" "),_m(128),_v(" "),_m(129)])])]),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(130),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('div',[_m(131),_v(" "),_c('div',[_m(132),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(133),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(134),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_m(135),_v(" "),_m(136),_v(" "),_m(137),_m(138),_v(" "),_m(139),_m(140),_v(" "),_m(141),_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',[_m(142),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('br'),_v(" "),_m(143),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Indent components")])]},proxy:true}])},[_v(" "),_c('div',[_c('h5',{attrs:{"id":"indent-components"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Indent components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#indent-components","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("In some cases, you may want to indent components such as panels and boxes to match the surrounding content.\nThis is easily achieved by adding some margin and padding utility classes from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/5.1/utilities/spacing/"}},[_v("Bootstrap")]),_v("\nto the component. The following examples show how to do this.")]),_v(" "),_c('p',[_c('strong',[_v("Indent Box component")])]),_v(" "),_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("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-4\"")]),_v(">")]),_v("Some text at level 2"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("Some text at level 1")]),_v(" "),_c('box',{staticClass:"ms-4"},[_v("Some text at level 2")]),_v(" "),_c('box',[_v("Some text at level 1")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Indent Panel component")])]),_v(" "),_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 panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-3\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" The \"ms-3\" is arbitarily chosen i.e \"ms-0\" to \"ms-5\" are all possible values.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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 panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{staticClass:"ms-3",scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 2")])]},proxy:true}])},[_v("\n The \"ms-3\" is arbitarily chosen i.e \"ms-0\" to \"ms-5\" are all possible values.\n")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Indent Included component")])]),_v(" "),_c('p',[_v("The following box component will be included via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(".")]),_v(" "),_c('div',{attrs:{"id":"forIndentDemo"}},[_c('box',[_v("Some text from include")])],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("box")]),_v(">")]),_v("Some text at level 1 (before included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tipsAndTricks.md#forIndentDemo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-5\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1 (after included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("Some text at level 1 (before included content)")]),_v(" "),_c('div',{staticClass:"ms-5"},[_c('box',[_v("Some text from include")])],1),_v(" "),_c('box',[_v("Some text at level 1 (after included content)")])],1)],1)])])]),_v(" "),_m(144),_v(" "),_c('br')],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":"#presentation"}},[_v("Presentation‎")]),_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":"#badges"}},[_v("Badges‎")]),_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":"#panels"}},[_v("Panels‎")]),_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":"#relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks‎")])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(145)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,19 +11,19 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_c('em',[_v("User Guide → Presentational Components")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"presentational-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"presentational-components"}}),_v("Presentational Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#presentational-components","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"presentation"}},[_v("Presentation"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#presentation","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("The components in this page are the core "),_c('strong',[_v("presentational")]),_v(" components you may want to use. Panels and tabs can be used to "),_c('strong',[_v("organise content sections")]),_v(", while badges and boxes can "),_c('strong',[_v("highlight small, specific pieces of information")]),_v(".")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"badges"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges"}}),_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"badges"}},[_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -32,7 +32,7 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -41,13 +41,13 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You 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.")])])])} },function anonymous( ) { -with(this){return _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")])])])])} +with(this){return _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")])])} },function anonymous( ) { -with(this){return _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"}},[_c('span',{staticClass:"anchor",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()"}})])])} +with(this){return _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()"}})])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"boxes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes"}}),_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"boxes"}},[_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Boxes come with different built-in types.")])])} @@ -56,7 +56,7 @@ with(this){return _c('p',[_c('strong',[_v("Boxes come with different built-in ty with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" important\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#### Header :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use **markdown** here! :pizza:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" important\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#### Header :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use **markdown** here! :pizza:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -68,7 +68,7 @@ with(this){return _c('p',[_c('strong',[_v("The built in types can be colored.")] with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" primary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" secondary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" danger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" dark\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" primary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" secondary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" danger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" dark\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -80,7 +80,7 @@ with(this){return _c('p',[_c('strong',[_v("MarkBind also supports a light color with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -92,7 +92,7 @@ with(this){return _c('p',[_c('strong',[_v("MarkBind also supports a seamless sty with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -104,7 +104,7 @@ with(this){return _c('p',[_c('strong',[_v("You can further customize the Box's a with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -116,7 +116,7 @@ with(this){return _c('p',[_c('strong',[_v("You can remove the background, icon a with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -128,7 +128,7 @@ with(this){return _c('p',[_c('strong',[_v("You can also use icons, resize them a with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -194,10 +194,10 @@ with(this){return _c('tr',[_c('td',[_v("no-background")]),_v(" "),_c('td',[_c('c with(this){return _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.")])])} },function anonymous( ) { -with(this){return _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")])])])])} +with(this){return _c('code',{pre:true,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")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"panels"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels"}}),_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"panels"}},[_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.")])])} @@ -206,7 +206,7 @@ with(this){return _c('p',[_c('strong',[_v("Panel is a flexible container that su with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is your header for a Panel, click me to expand!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -218,7 +218,7 @@ with(this){return _c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"c with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"How to cultivate a tomato plant at home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tomatoes\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -230,7 +230,7 @@ with(this){return _c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"c with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Have your readers click less to see the Panel's contents\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -242,7 +242,7 @@ with(this){return _c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This header will only show when the Panel is collapsed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expand-headerless")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -254,7 +254,7 @@ with(this){return _c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Give your readers a peek of the content without expanding Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("peek")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_v(" Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n")]),_c('span',[_v(" facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n")]),_c('span',[_v(" eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n")]),_c('span',[_v(" dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n")]),_c('span',[_v(" pellentesque. \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -266,7 +266,7 @@ with(this){return _c('p',[_c('strong',[_v("Panel provides many types that change with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**light type panel (DEFAULT)**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**dark type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**primary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**secondary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**info type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**danger type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**warning type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**success type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**seamless type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**minimal type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**dark type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**primary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**secondary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**info type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**danger type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**warning type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**success type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**seamless type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**minimal type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -278,7 +278,7 @@ with(this){return _c('p',[_c('strong',[_v("Show/Hide buttons using "),_c('code', with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a close button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have either buttons\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a close button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have either buttons\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -290,7 +290,7 @@ with(this){return _c('p',[_c('strong',[_v("Use markdown in the header (only inli with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Bold text** :rocket: ![](https://markbind.org/images/logo-lightbackground.png =x20)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -302,7 +302,7 @@ with(this){return _c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"cla with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Content loaded in from 'src'\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra/loadContent.html#fragment\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -314,7 +314,7 @@ with(this){return _c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"cla with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Try clicking on my pop-up button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("popup-url")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/syntax/extra/loadContent.html\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This panel has a popup.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -326,7 +326,7 @@ with(this){return _c('p',[_c('strong',[_v("If "),_c('code',{pre:true,attrs:{"cla with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right click and inspect my HTML before expanding me!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra/loadContent.html#fragment\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("preload")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("You should be able to find this text before expanding the Panel."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -338,7 +338,7 @@ with(this){return _c('p',[_c('strong',[_v("You can nest Panels or other componen with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 3 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" minimal-type panel\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some Text\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 3 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" minimal-type panel\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some Text\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -395,16 +395,16 @@ with(this){return _c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre: with(this){return _c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("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(".")])])} },function anonymous( ) { -with(this){return _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("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary type panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" >")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"tabs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs"}}),_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"tabs"}},[_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -431,15 +431,15 @@ with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lan with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("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.")])])])])])} },function anonymous( ) { -with(this){return _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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Second tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Contents of the second tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :tv:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Moon\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about the moon ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Content of the first tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Second tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Contents of the second tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :tv:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Moon\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about the moon ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"relevant-tips-and-amp-tricks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"relevant-tips-and-amp-tricks"}}),_v("Relevant Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#relevant-tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#relevant-tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingComponents.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Using Components")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_c('span',[_c('span',[_v("Image & Diagram Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/deployingTheSite.html b/userGuide/deployingTheSite.html index 5a40a2f..99c0572 100644 --- a/userGuide/deployingTheSite.html +++ b/userGuide/deployingTheSite.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Deploying the Site - + + MarkBind - User Guide: Deploying the Site @@ -14,8 +12,7 @@ - - + @@ -23,98 +20,216 @@ 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
+

                      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
+

                        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
+

                        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


                        + diff --git a/userGuide/deployingTheSite.page-vue-render.js b/userGuide/deployingTheSite.page-vue-render.js index a11861d..ea67d8e 100644 --- a/userGuide/deployingTheSite.page-vue-render.js +++ b/userGuide/deployingTheSite.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_c('div',{attrs:{"id":"warning-about-baseUrl"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you are deploying the site to GitHub pages, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" setting in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" should be set to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/\"")]),_v(" for the links in the deployed site to work correctly.")]),_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(" If you are using GitHub Pages to host your deployed website at repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorg/myproduct")]),_v(" (i.e., the website is published at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://myorg.github.io/myproduct")]),_v("), then your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/myproduct\"")]),_v(".")])])],1),_v(" "),_m(14),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"siteJsonFile.html#deploy"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Configuring the Site → "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h4',{attrs:{"id":"deploy"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploy"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The settings for "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("auto-deployment to GitHub pages")]),_v(".")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Site Update.\"")]),_v("]"),_c('br'),_v("\nThe commit message used for the deployment commit.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")])]),_v(" [Optional. Default: the current working project's repo]"),_c('br'),_v("\nThe repo you want to deploy to."),_c('br'),_v("\nFormat: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com//.git\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"git@github.com:/.git\"")]),_v(" if you use SSH)"),_c('br'),_v(" "),_c('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("\"https://github.com/myorg/myrepo.git\"")])])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("branch")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"gh-pages\"")]),_v("]"),_c('br'),_v("\nThe branch that will be deployed to in the remote repo.")])])])])]),_v(" "),_c('br'),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")]),_v(" does not generate the static site from your source; it simply deploys the files that are already in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(" directory. You need to run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build")]),_v(" first if you want to generate the site before deploying.")])]),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"generating-a-github-personal-access-token"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"generating-a-github-personal-access-token"}},[_c('span',{staticClass:"anchor",attrs:{"id":"generating-a-github-personal-access-token"}}),_v("Generating a GitHub Personal Access Token"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#generating-a-github-personal-access-token","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("With the exception of GitHub Actions, a GitHub Personal Access Token with "),_c('strong',[_v("repo")]),_v(" permissions is required for deploying your MarkBind site to GitHub Pages via CI tools.")]),_v(" "),_c('p',[_v("You may refer to GitHub's documentation on "),_c('a',{attrs:{"href":"https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/#creating-a-token"}},[_v("how to generate a GitHub Personal Access Token")]),_v(". Ensure that you have enabled "),_c('strong',[_v("repo")]),_v(" permissions as shown from the screenshot below.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/githubTokenRepoPermissions.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/githubTokenRepoPermissions.png","alt":"GitHub Token Repo Permissions"}})])])])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("Take note of the generated token - you will not be able to see it again once you navigate away from the page.")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-github-actions"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-github-actions"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-via-github-actions"}}),_v("Deploying via GitHub Actions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-github-actions","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("To instruct "),_c('a',{attrs:{"href":"https://docs.github.com/en/actions"}},[_v("GitHub Actions")]),_v(" to build and deploy the site when you push to the repository, add a GitHub Actions workflow file in your project repo at the location "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/.github/workflows/deploy.yml")]),_v(" A sample workflow file is provided below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Site")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("push:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branches:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("test")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("env:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("GITHUB_TOKEN:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("secrets.GITHUB_TOKEN")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/checkout@v3")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/setup-node@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("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'14'")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("build")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The sample "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy.yml")]),_v(" workflow above uses the "),_c('a',{attrs:{"href":"https://docs.github.com/en/actions/reference/authentication-in-a-workflow"}},[_v("default GitHub Token secret")]),_v(" that is generated automatically for each GitHub Actions workflow. You may also use a "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("GitHub Personal Access Token")]),_v(" in place of the default GitHub Token.")])]),_v(" "),_c('p',[_v("Once you have created the file, commit and push the file to your repo. GitHub Actions should start to build and deploy your MarkBind site. You can verify this by visiting "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("www.github.com///actions")]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"tip","id":"markbind-action-tip"}},[_c('p',[_v("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:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Site")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("push:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branches:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v(" \n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build_and_deploy:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("&")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("site")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind/markbind-action@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("token:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("secrets.GITHUB_TOKEN")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")])])]),_c('p',[_v("Read the "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind-action#readme"}},[_v("action documentation")]),_v(" to understand the various configuration options.")])]),_v(" "),_c('p',[_v("For more information on customizing your workflow file to fit your specific needs, you may refer to the "),_c('a',{attrs:{"href":"https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions"}},[_v("GitHub Action Docs")]),_v(".")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-travis-ci"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-travis-ci"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-via-travis-ci"}}),_v("Deploying via Travis CI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-travis-ci","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Adding your repository to Travis CI")])]),_v(" "),_c('panel',{attrs:{"type":"info","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Travis CI Migration")])]},proxy:true}])},[_v(" "),_c('p',[_v("Since May 2018, Travis CI has been "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/migrate/open-source-on-travis-ci-com/"}},[_v("undergoing migration to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.com")])]),_v(", which changes the way you setup repositories on Travis CI.")]),_v(" "),_c('ul',[_c('li',[_v("If you are new to Travis CI, you should "),_c('strong',[_v("add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.com")])]),_v(".")]),_v(" "),_c('li',[_v("Alternatively, if you are already using Travis CI on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.org")]),_v(", you can continue to "),_c('strong',[_v("add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.org")])]),_v(".")])])]),_v(" "),_c('p'),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.com")])]},proxy:true}])},[_v(" "),_c('ol',[_c('li',[_c('a',{attrs:{"href":"https://travis-ci.com/signin"}},[_v("Sign in to Travis")]),_v(" using your GitHub account.")]),_v(" "),_c('li',[_v("Accept the authorisation for Travis CI when you are redirected to GitHub.")]),_v(" "),_c('li',[_v("Go to the "),_c('a',{attrs:{"href":"https://travis-ci.com/account/repositories"}},[_v("Repositories page")]),_v(", and click on the green "),_c('em',[_v("Activate")]),_v(" button."),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If you are already using Travis CI, click on the white "),_c('em',[_v("Manage Repositories on GitHub")]),_v(" button instead.")])]),_v(" "),_c('li',[_v("Select the repository with the MarkBind site, and add the Travis CI GitHub App to the repository by clicking the green "),_c('em',[_v("Approve and Install")]),_v(" button.")])])]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.org")])]},proxy:true}])},[_v(" "),_c('ol',[_c('li',[_c('a',{attrs:{"href":"https://travis-ci.com/signin"}},[_v("Sign in to Travis")]),_v(" using your GitHub account.")]),_v(" "),_c('li',[_v("Accept the authorisation for Travis CI when you are redirected to GitHub.")]),_v(" "),_c('li',[_v("Go to the "),_c('a',{attrs:{"href":"https://travis-ci.org/account/repositories"}},[_v("Repositories page")]),_v(".")]),_v(" "),_c('li',[_v("Find the repository with the MarkBind site."),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If the organization/repository is not shown in the list, click on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Review and add")]),_v(" link at the bottom of the list of organization and follow the steps to give Travis access to the organization containing your repo. After that, come back to the "),_c('a',{attrs:{"href":"https://travis-ci.org/account/repositories"}},[_v("Repositories page")]),_v(" and use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Sync Account")]),_v(" button to sync your Travis account with GitHub.")])]),_v(" "),_c('li',[_v("Activate the repo using the slider switch in front of it.")])]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/travisActivateRepo.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/travisActivateRepo.png","alt":"Activate Repo"}})])])])],1)])],1),_v(" "),_c('p',[_c('strong',[_v("Configuring your repository in Travis CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/environment-variables/#defining-variables-in-repository-settings"}},[_v("Add an environment variable in Travis CI")]),_v(" named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(", with the value set to your "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("generated GitHub Personal Access Token")]),_v(". "),_c('mark',[_v("Ensure that "),_c('em',[_v("Display value in the build log")]),_v(" is set to "),_c('em',[_v("Off")]),_v(".")])]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/travisGithubToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/travisGithubToken.png","alt":"Add GITHUB_TOKEN"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" file to instruct Travis CI to build and deploy the site when you push to the repository. An example "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" file that can accomplish this is given below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("language:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("node_js")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node_js:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("10")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("script:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("build")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("deploy:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("provider:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("script")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("script:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("skip_cleanup:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branch:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")])])])])]),_v(" "),_c('p',[_v("More information about "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" can be found in the "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/"}},[_v("Travis CI documentation")]),_v(".")]),_v(" "),_c('ol',[_c('li',[_v("Commit "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" to your MarkBind repository and push the changes. Travis CI should begin to build your site.")]),_v(" "),_c('li',[_v("Select the MarkBind repository on "),_c('a',{attrs:{"href":"https://travis-ci.com/auth"}},[_v("Travis CI")]),_v(" and "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/job-lifecycle/#breaking-the-build"}},[_v("check the build status")]),_v(" to see if it is successful.")]),_v(" "),_c('li',[_v("Once the build succeeds, your MarkBind site should be online at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(" e.g., "),_c('a',{attrs:{"href":"http://se-edu.github.io/se-book"}},[_v("http://se-edu.github.io/se-book")]),_v(". Travis CI will automatically build and deploy changes to your site as you push new changes to the repository after a few seconds."),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You might have to go to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Settings")]),_v(" of your repo and configure it to publish GitHub Pages from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("gh-pages")]),_v(" branch as MarkBind deploys to that branch by default.")])])]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_c('p',[_c('strong',[_v("Configuring Travis CI to only deploy from a specific repository")])]),_v(" "),_c('p',[_v("When Travis CI is set up as explained above, Travis CI will attempt to deploy the site from any repository it is in, including forks.\nIf you want Travis CI to only deploy from a specific repository (eg. only from your main site repository), you can add to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")]),_v(" phase a "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/deployment#conditional-releases-with-on"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")]),_v(" condition in the form "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("owner_name/repo_name")])]),_v(".")]),_v(" "),_c('p',[_v("For example, if you only want Travis CI to deploy the site when it is run from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("se-edu/se-book")]),_v(" repository, the following "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")]),_v(" condition should be added to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(".")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branch:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("repo:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("se-edu/se-book")]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")]),_v(" value can be changed to your specific repository as desired.")])])],1),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-appveyor-ci"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-appveyor-ci"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-via-appveyor-ci"}}),_v("Deploying via AppVeyor CI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-appveyor-ci","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Adding your repository to AppVeyor CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_c('a',{attrs:{"href":"https://ci.appveyor.com/login"}},[_v("Sign in to AppVeyor CI")]),_v(" using your GitHub Account.")])]),_v(" "),_c('li',[_c('p',[_v("Authorize AppVeyor App as GitHub App in the "),_c('a',{attrs:{"href":"https://ci.appveyor.com/authorizations"}},[_v("account settings")]),_v(" by clicking on the "),_c('em',[_v("Install AppVeyor App")]),_v(" button.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/appveyorInstallGithubApp.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/appveyorInstallGithubApp.png","alt":"Install AppVeyor GitHub App"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("In the "),_c('a',{attrs:{"href":"https://ci.appveyor.com/projects"}},[_v("projects directory")]),_v(", click on the "),_c('em',[_v("New Project")]),_v(" button.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/appveyorAddNewProject.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/appveyorAddNewProject.png","alt":"Add a new Project on AppVeyor"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Finally, select the repository containing your MarkBind site.")])])]),_v(" "),_c('p',[_c('strong',[_v("Configuring your repository in AppVeyor CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Ensure that you have generated a "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("GitHub Personal Access token with "),_c('strong',[_v("repo")]),_v(" permissions")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Navigate to the project settings page of your repository in AppVeyor CI.")])]),_v(" "),_c('li',[_c('p',[_v("On the left menu, click on "),_c('strong',[_v("Environment")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Under the heading "),_c('strong',[_v("Environment variables")]),_v(", add a custom environment variable named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(", with the value set to the personal access token that was generated in the first step. "),_c('mark',[_v("Ensure that you toggle variable encryption by clicking on the padlock.")])]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/appveyorGithubToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/appveyorGithubToken.png","alt":"Add GitHub Token on AppVeyor"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Remember to click "),_c('strong',[_v("Save")]),_v(" at the bottom of the page.")])]),_v(" "),_c('li',[_c('p',[_v("Add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v("file at the root of your MarkBind site's repository to instruct AppVeyor CI to build and deploy the site to GitHub Pages when you push to your repository. More information on customizing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v(" can be found in "),_c('a',{attrs:{"href":"https://www.appveyor.com/docs/appveyor-yml/"}},[_v("AppVeyor documentation")]),_v(". An example "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v(" file is given below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("environment:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nodejs_version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'10'")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branches:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("only:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install-Product")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("node")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("$env:nodejs_version")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("build")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("test:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("off")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("off")]),_v("\n")])])])])]),_v(" "),_c('p',[_v("Commit and push "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v(" to your GitHub repository. Thereafter, AppVeyor CI should begin to run the build script. You are able to view the current build status by clicking on your repository in the "),_c('a',{attrs:{"href":"https://ci.appveyor.com/projects"}},[_v("AppVeyor projects page")]),_v(". Once the build succeeds, you should be able to view your MarkBind site, after a few seconds, at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(" e.g., "),_c('a',{attrs:{"href":"http://se-edu.github.io/se-book"}},[_v("http://se-edu.github.io/se-book")]),_v(".")])]),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-circle-ci"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-circle-ci"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-via-circle-ci"}}),_v("Deploying via Circle CI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-circle-ci","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Adding your repository to Circle CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Ensure that you have generated a "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("GitHub Personal Access Token with "),_c('strong',[_v("repo")]),_v(" permissions")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Sign in to "),_c('a',{attrs:{"href":"https://circleci.com/"}},[_v("Circle CI")]),_v(" using your GitHub account.")])]),_v(" "),_c('li',[_c('p',[_v("In the projects dashboard, click on the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Set Up Project")]),_v(" button beside the repo containing your MarkBind site.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/circleCiSetUpProject.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/circleCiSetUpProject.png","alt":"Set Up Project in Circle CI"}})])])])],1)])]),_v(" "),_c('p',[_c('strong',[_v("Configuring your repository in Circle CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Once you have set up your project, click on the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Project Settings")]),_v(" button.")])]),_v(" "),_c('li',[_c('p',[_v("On the left, click on the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Environment Variables")]),_v(" tab and add a custom Environment Variable, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(", which contains the value of your GitHub Personal Access Token.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/circleCiGithubToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/circleCiGithubToken.png","alt":"Add GitHub Token in Circle CI"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Commit and push a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file to the repo 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 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file is located in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/.circleci/")]),_v(" directory. A sample "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file is shown below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("Build-And-Deploy:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("docker:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("image:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'cimg/base:stable'")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("checkout")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node/install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"14\"")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("npm-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"7\"")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install-yarn:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("node")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--version")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("build")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("orbs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("circleci/node@4.1.0")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflows:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("Deploy-MarkBind-Site:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build-And-Deploy")]),_v("\n")])])])])]),_v(" "),_c('p',[_v("After you have pushed the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file to your remote repo, you should see Circle CI starting to run the Deploy job in your projects dashboard. Once it is successful, you should be able to view your MarkBind site at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(".")]),_v(" "),_c('p',[_v("For more information on customizing your build script, you may refer to "),_c('a',{attrs:{"href":"https://circleci.com/docs/2.0/configuration-reference/#section=configuration"}},[_v("Circle CI Config Reference Document")]),_v(".")])]),_v(" "),_c('hr'),_v(" "),_m(17),_v(" "),_c('p',[_c('strong',[_v("You can setup "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("a platform for deploying static webpages (among other things)")]},proxy:true}])},[_v("Netlify")])],1),_v("\nto automatically build and deploy your site on their platform every time your GitHub repo is updated.")])]),_v(" "),_c('p',[_v("Here are the steps to set up Netlify:")]),_v(" "),_c('ol',[_m(18),_v(" "),_m(19),_v(" "),_c('li',[_c('p',[_v("Select your git provider")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview1.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview1.png","alt":"Create a new site"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Select your MarkBind site repository")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview2.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview2.png","alt":"Select repository"}})])])])],1)]),_v(" "),_c('li',[_m(20),_v(" "),_m(21),_v(" "),_c('br'),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview3.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview3.png","alt":"Update build settings"}})])])])],1)])]),_v(" "),_c('p',[_v("Now your site will be deployed on Netlify at the given address specified after deployment. It will be updated automatically when the default branch of your repo is updated.")]),_v(" "),_m(22),_v(" "),_c('p',[_c('strong',[_v("If you are hosting your MarkBind project on GitHub, you can setup "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Pull Request previews")]},proxy:true}])},[_v("PR previews")]),_v(" in order to automatically build and deploy the modified MarkBind site based on the changes in the PR.")],1)]),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview4.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview4.png","alt":"Preview deploy"}})])])])],1),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_c('ol',[_m(29),_v(" "),_c('li',[_m(30),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeCreateAccount.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeCreateAccount.png","alt":"Create Surge account"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Proceed to create a Surge account. After you have set up your account, you should see the following screen:")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeCreateAccount2.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeCreateAccount2.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_m(31),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The rest of the "),_c('strong',[_v("Surge setup")]),_v(" is unnecessary for the purposes of setting up PR previews. You may still proceed with the rest of the setup such as setting the "),_c('em',[_v("project directory")]),_v(" and the "),_c('em',[_v("domain name")]),_v(", if you wish to.")])])],1),_v(" "),_c('li',[_m(32),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeToken.png","alt":"Get Surge token"}})])])])],1)]),_v(" "),_c('li',[_m(33),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeAddToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeAddToken.png","alt":"Add Surge token"}})])])])],1),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("After aquiring the surge token, you may want to utilize the provided "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind-action/blob/master/.github/workflows/README.md"}},[_v("MarkBind reusable workflows")]),_v(" to conveniently set up your PR preview via Surge.sh.")]),_v(" "),_c('p',[_v("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.")])])],1),_v(" "),_m(34)]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("receivePR.yml")]),_v(" File")])]},proxy:true}])},[_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Receive")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# read-only")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# no access to secrets")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pull_request:")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v(" \n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/checkout@v3")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Node")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/setup-node@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("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("14")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("website")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" npm install -g markbind-cli")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" markbind build")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Save")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("number")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("and")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("HEAD")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("commit")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("if:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("success()")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("&&")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("github.event_name")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("==")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'pull_request'")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" mkdir -p ./pr")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" echo ${{ github.event.number }} > ./pr/NUMBER")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" echo ${{ github.event.pull_request.head.sha }} > ./pr/SHA")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Upload")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("artifacts")]),_v(" \n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("if:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("success()")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("&&")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("github.event_name")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("==")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'pull_request'")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/upload-artifact@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-deployment")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("path:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" ./_site")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" ./pr")]),_v("\n")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("previewPR.yml")]),_v(" File")])]},proxy:true}])},[_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_c('strong',[_v("Setting up the PR URL")])]),_v(" "),_c('p',[_v("In "),_c('strong',[_v("line 34")]),_v(" of the workflow code below, you are required to update the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("PR_URL")]),_v(" according to your needs. We recommend just changing the section "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to something that can easily identify your MarkBind project repository.")]),_v(" "),_c('p',[_v("For example, if the name of your repository is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("MyRepo")]),_v(", and it is managed under an organization "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("MyOrganization")]),_v(", you could replace "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorganization-myrepo")]),_v(" and your PR Preview will be deployed at the following URL: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://pr--myorganization-myrepo.surge.sh")]),_v(".")]),_v(" "),_c('p',[_v("Advanced users may completely replace the default "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("PR_URL")]),_v(". "),_c('mark',[_c('strong',[_v("It is recommended to test your workflow code on a test repo before using it for your MarkBind project repo.")])])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Preview")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# Runs after PR is received and build by markbind-cli")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# Has access to repo secrets")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflow_run:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflows:")]),_v(" ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Receive MarkBind PR\"")]),_v("]\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("types:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("completed")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploying")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("to")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("surge")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/checkout@v3")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Download")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("built")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("site")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("artifacts")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("dawidd6/action-download-artifact@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflow:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("receivePR.yml")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run_id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("github.event.workflow_run.id")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-deployment")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("path:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(".")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Extract")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("number")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("pr-number")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("echo")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'::set-output name=ACTIONS_PR_NUMBER::'")]),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("$(cat")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("./pr/NUMBER)")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Node")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/setup-node@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("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("14")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("preview")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("url")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("pr-url")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" PR_URL=\"https://pr-${{ steps.pr-number.outputs.ACTIONS_PR_NUMBER }}-.surge.sh/\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" echo '::set-output name=ACTIONS_PREVIEW_URL::'$PR_URL")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("surge")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("and")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("to")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("surge")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" npm i -g surge")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" surge --project ./_site --domain ${{ steps.pr-url.outputs.ACTIONS_PREVIEW_URL }}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("env:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("SURGE_TOKEN:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("secrets.SURGE_TOKEN")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Find")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("existing")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("preview")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("comment")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("peter-evans/find-comment@v1")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("fc")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("issue-number:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.pr-number.outputs.ACTIONS_PR_NUMBER")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("body-includes:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Your")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("can")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("be")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("previewed")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Comment")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("preview")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("in")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("if:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.fc.outputs.comment-id")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("==")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("0")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("peter-evans/create-or-update-comment@v1")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("issue-number:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.pr-number.outputs.ACTIONS_PR_NUMBER")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("body:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" Thank you for submitting the Pull Request! :thumbsup: ")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Your")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("can")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("be")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("previewed")]),_v(" ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]"),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("(${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.pr-url.outputs.ACTIONS_PREVIEW_URL")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}})")]),_v("\n")]),_c('span',[_v("\n")])])])],1),_v(" "),_m(35),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeGithubActionsBot.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeGithubActionsBot.png","alt":"Surge PR bot"}})])])])],1),_v(" "),_m(36),_v(" "),_m(37),_v(" "),_c('panel',{attrs:{"type":"seamless","expand-headerless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Configuring Online Deployment platforms to use specific MarkBind version")])]},proxy:true}])},[_v(" "),_c('div',[_c('h5',{attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}},[_c('span',{staticClass:"anchor",attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}}),_c('span',{staticClass:"fas fa-info",attrs:{"aria-hidden":"true"}}),_v(" Configuring Online Deployment platforms to use specific MarkBind version"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#configuring-online-deployment-platforms-to-use-specific-markbind-version","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Configuring CI platforms to use specific MarkBind version")])]),_v(" "),_c('p',[_v("When the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#using-ci-platforms"}},[_v("default CI configuration for deployment")]),_v(" is used, the latest version of MarkBind will be used in the CI workflows. This may be a later version of MarkBind than the one you use locally.")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("If you want to specify a version of MarkBind (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v1.6.3")]),_v("), you have to modify the step where "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind-cli")]),_v(" is being installed to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm i -g markbind-cli@v1.6.3")]),_v(". For example, for Travis-CI, you can modify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("install")]),_v(" step in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" as follows:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@1.6.3")]),_v("\n")])])])]),_v(" "),_c('li',[_c('p',[_v("If you want to use the latest minor version automatically until the next major version (as major versions usually contain breaking changes), you can add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("^")]),_v(" in front of the version number. In the example below, Travis will use the latest version of MarkBind but will stop before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2.*")])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@^1.6.3")]),_v("\n")])])])])]),_v(" "),_c('p',[_c('strong',[_v("Setting up Netlify to use a specific version of MarkBind")])]),_v(" "),_c('p',[_v("Here are the steps to set up Netlify to use a specific version of MarkBind.")]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Navigate to the root directory of your site.")])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm init")]),_v(" which will create "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.lock.json")])])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm install markbind-cli@1.6.3 --save")]),_v(" to install MarkBind as a dependency (using v1.6.3 as an example)")])]),_v(" "),_c('li',[_c('p',[_v("Create / Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file in the root directory and add:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("node_modules\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")]),_v(" in site.json to include")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("node_modules/*\n")]),_c('span',[_v(".gitignore\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Now, follow the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-netlify"}},[_v("previous instructions for setting up Netlify")]),_v(" but with the following difference:"),_c('br'),_v("\nIn step 5, Set the "),_c('mark',[_v("Build Command")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build --baseUrl")])])])])])]),_v(" "),_m(38),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-the-site"}},[_v("Deploying the Site‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#generic-steps-for-deploying-a-markbind-site"}},[_v("Generic steps for deploying a MarkBind site‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-to-github-pages"}},[_v("Deploying to GitHub Pages‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-the-markbind-deploy-command"}},[_v("Using the markbind deploy command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-ci-platforms"}},[_v("Using CI Platforms‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#generating-a-github-personal-access-token"}},[_v("Generating a GitHub Personal Access Token‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-github-actions"}},[_v("Deploying via GitHub Actions‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-travis-ci"}},[_v("Deploying via Travis CI‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-appveyor-ci"}},[_v("Deploying via AppVeyor CI‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-circle-ci"}},[_v("Deploying via Circle CI‎")])])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-to-netlify"}},[_v("Deploying to Netlify‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#previewing-pull-requests-for-markbind-sites"}},[_v("Previewing Pull Requests for MarkBind sites‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#previewing-prs-using-netlify"}},[_v("Previewing PRs using Netlify‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#previewing-prs-using-surge"}},[_v("Previewing PRs using Surge‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks‎")])])])],1)])],1),_v(" "),_m(39)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_c('div',{attrs:{"id":"warning-about-baseUrl"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you are deploying the site to GitHub pages, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" setting in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" should be set to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/\"")]),_v(" for the links in the deployed site to work correctly.")]),_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(" If you are using GitHub Pages to host your deployed website at repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorg/myproduct")]),_v(" (i.e., the website is published at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://myorg.github.io/myproduct")]),_v("), then your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/myproduct\"")]),_v(".")])])],1),_v(" "),_m(14),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"siteJsonFile.html#deploy"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Configuring the Site → "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h4',{attrs:{"id":"deploy"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The settings for "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("auto-deployment to GitHub pages")]),_v(".")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Site Update.\"")]),_v("]"),_c('br'),_v("\nThe commit message used for the deployment commit.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")])]),_v(" [Optional. Default: the current working project's repo]"),_c('br'),_v("\nThe repo you want to deploy to."),_c('br'),_v("\nFormat: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com//.git\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"git@github.com:/.git\"")]),_v(" if you use SSH)"),_c('br'),_v(" "),_c('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("\"https://github.com/myorg/myrepo.git\"")])])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("branch")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"gh-pages\"")]),_v("]"),_c('br'),_v("\nThe branch that will be deployed to in the remote repo.")])])])])]),_v(" "),_c('br'),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")]),_v(" generates the static site from your source by default; hence, it is not necessary to run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build")]),_v(" first to generate the site before deploying. To skip the site generation, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--no-build")]),_v(" option for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")]),_v(".")]),_v(" "),_c('p',[_v("More information can be found in the "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")]),_v(" section.")])]),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"generating-a-github-personal-access-token"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"generating-a-github-personal-access-token"}},[_v("Generating a GitHub Personal Access Token"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#generating-a-github-personal-access-token","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("With the exception of GitHub Actions, a GitHub Personal Access Token with "),_c('strong',[_v("repo")]),_v(" permissions is required for deploying your MarkBind site to GitHub Pages via CI tools.")]),_v(" "),_c('p',[_v("You may refer to GitHub's documentation on "),_c('a',{attrs:{"href":"https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/#creating-a-token"}},[_v("how to generate a GitHub Personal Access Token")]),_v(". Ensure that you have enabled "),_c('strong',[_v("repo")]),_v(" permissions as shown from the screenshot below.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/githubTokenRepoPermissions.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/githubTokenRepoPermissions.png","alt":"GitHub Token Repo Permissions"}})])])])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("Take note of the generated token - you will not be able to see it again once you navigate away from the page.")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-github-actions"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-github-actions"}},[_v("Deploying via GitHub Actions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-github-actions","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("To instruct "),_c('a',{attrs:{"href":"https://docs.github.com/en/actions"}},[_v("GitHub Actions")]),_v(" to build and deploy the site when you push to the repository, add a GitHub Actions workflow file in your project repo at the location "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/.github/workflows/deploy.yml")]),_v(" A sample workflow file is provided below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Site")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("push:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branches:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("test")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("env:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("GITHUB_TOKEN:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("secrets.GITHUB_TOKEN")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/checkout@v3")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/setup-node@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("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'16'")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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":"info"}},[_c('p',[_v("The sample "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy.yml")]),_v(" workflow above uses the "),_c('a',{attrs:{"href":"https://docs.github.com/en/actions/reference/authentication-in-a-workflow"}},[_v("default GitHub Token secret")]),_v(" that is generated automatically for each GitHub Actions workflow. You may also use a "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("GitHub Personal Access Token")]),_v(" in place of the default GitHub Token.")])]),_v(" "),_c('p',[_v("Once you have created the file, commit and push the file to your repo. GitHub Actions should start to build and deploy your MarkBind site. You can verify this by visiting "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("www.github.com///actions")]),_v(".")]),_v(" "),_c('box',{attrs:{"type":"tip","id":"markbind-action-tip"}},[_c('p',[_v("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:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Site")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("push:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branches:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v(" \n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build_and_deploy:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("&")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("site")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind/markbind-action@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("token:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("secrets.GITHUB_TOKEN")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("Read the "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind-action#readme"}},[_v("action documentation")]),_v(" to understand the various configuration options.")])]),_v(" "),_c('p',[_v("For more information on customizing your workflow file to fit your specific needs, you may refer to the "),_c('a',{attrs:{"href":"https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions"}},[_v("GitHub Action Docs")]),_v(".")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-travis-ci"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-travis-ci"}},[_v("Deploying via Travis CI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-travis-ci","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Adding your repository to Travis CI")])]),_v(" "),_c('panel',{attrs:{"type":"info","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Travis CI Migration")])]},proxy:true}])},[_v(" "),_c('p',[_v("Since May 2018, Travis CI has been "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/migrate/open-source-on-travis-ci-com/"}},[_v("undergoing migration to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.com")])]),_v(", which changes the way you setup repositories on Travis CI.")]),_v(" "),_c('ul',[_c('li',[_v("If you are new to Travis CI, you should "),_c('strong',[_v("add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.com")])]),_v(".")]),_v(" "),_c('li',[_v("Alternatively, if you are already using Travis CI on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.org")]),_v(", you can continue to "),_c('strong',[_v("add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.org")])]),_v(".")])])]),_v(" "),_c('p'),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.com")])]},proxy:true}])},[_v(" "),_c('ol',[_c('li',[_c('a',{attrs:{"href":"https://travis-ci.com/signin"}},[_v("Sign in to Travis")]),_v(" using your GitHub account.")]),_v(" "),_c('li',[_v("Accept the authorisation for Travis CI when you are redirected to GitHub.")]),_v(" "),_c('li',[_v("Go to the "),_c('a',{attrs:{"href":"https://travis-ci.com/account/repositories"}},[_v("Repositories page")]),_v(", and click on the green "),_c('em',[_v("Activate")]),_v(" button."),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If you are already using Travis CI, click on the white "),_c('em',[_v("Manage Repositories on GitHub")]),_v(" button instead.")])]),_v(" "),_c('li',[_v("Select the repository with the MarkBind site, and add the Travis CI GitHub App to the repository by clicking the green "),_c('em',[_v("Approve and Install")]),_v(" button.")])])]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Add your repository on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("travis-ci.org")])]},proxy:true}])},[_v(" "),_c('ol',[_c('li',[_c('a',{attrs:{"href":"https://travis-ci.com/signin"}},[_v("Sign in to Travis")]),_v(" using your GitHub account.")]),_v(" "),_c('li',[_v("Accept the authorisation for Travis CI when you are redirected to GitHub.")]),_v(" "),_c('li',[_v("Go to the "),_c('a',{attrs:{"href":"https://travis-ci.org/account/repositories"}},[_v("Repositories page")]),_v(".")]),_v(" "),_c('li',[_v("Find the repository with the MarkBind site."),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If the organization/repository is not shown in the list, click on "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Review and add")]),_v(" link at the bottom of the list of organization and follow the steps to give Travis access to the organization containing your repo. After that, come back to the "),_c('a',{attrs:{"href":"https://travis-ci.org/account/repositories"}},[_v("Repositories page")]),_v(" and use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Sync Account")]),_v(" button to sync your Travis account with GitHub.")])]),_v(" "),_c('li',[_v("Activate the repo using the slider switch in front of it.")])]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/travisActivateRepo.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/travisActivateRepo.png","alt":"Activate Repo"}})])])])],1)])],1),_v(" "),_c('p',[_c('strong',[_v("Configuring your repository in Travis CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/environment-variables/#defining-variables-in-repository-settings"}},[_v("Add an environment variable in Travis CI")]),_v(" named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(", with the value set to your "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("generated GitHub Personal Access Token")]),_v(". "),_c('mark',[_v("Ensure that "),_c('em',[_v("Display value in the build log")]),_v(" is set to "),_c('em',[_v("Off")]),_v(".")])]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/travisGithubToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/travisGithubToken.png","alt":"Add GITHUB_TOKEN"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" file to instruct Travis CI to build and deploy the site when you push to the repository. An example "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" file that can accomplish this is given below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("language:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("node_js")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node_js:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("16")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("script:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("build")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("deploy:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("provider:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("script")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("script:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("skip_cleanup:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branch:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.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("More information about "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" can be found in the "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/"}},[_v("Travis CI documentation")]),_v(".")]),_v(" "),_c('ol',[_c('li',[_v("Commit "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" to your MarkBind repository and push the changes. Travis CI should begin to build your site.")]),_v(" "),_c('li',[_v("Select the MarkBind repository on "),_c('a',{attrs:{"href":"https://travis-ci.com/auth"}},[_v("Travis CI")]),_v(" and "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/job-lifecycle/#breaking-the-build"}},[_v("check the build status")]),_v(" to see if it is successful.")]),_v(" "),_c('li',[_v("Once the build succeeds, your MarkBind site should be online at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(" e.g., "),_c('a',{attrs:{"href":"http://se-edu.github.io/se-book"}},[_v("http://se-edu.github.io/se-book")]),_v(". Travis CI will automatically build and deploy changes to your site as you push new changes to the repository after a few seconds."),_c('br'),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You might have to go to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Settings")]),_v(" of your repo and configure it to publish GitHub Pages from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("gh-pages")]),_v(" branch as MarkBind deploys to that branch by default.")])])]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_c('p',[_c('strong',[_v("Configuring Travis CI to only deploy from a specific repository")])]),_v(" "),_c('p',[_v("When Travis CI is set up as explained above, Travis CI will attempt to deploy the site from any repository it is in, including forks.\nIf you want Travis CI to only deploy from a specific repository (eg. only from your main site repository), you can add to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")]),_v(" phase a "),_c('a',{attrs:{"href":"https://docs.travis-ci.com/user/deployment#conditional-releases-with-on"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")]),_v(" condition in the form "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("owner_name/repo_name")])]),_v(".")]),_v(" "),_c('p',[_v("For example, if you only want Travis CI to deploy the site when it is run from the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("se-edu/se-book")]),_v(" repository, the following "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")]),_v(" condition should be added to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(".")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branch:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("repo:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("se-edu/se-book")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("repo")]),_v(" value can be changed to your specific repository as desired.")])])],1),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-appveyor-ci"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-appveyor-ci"}},[_v("Deploying via AppVeyor CI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-appveyor-ci","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Adding your repository to AppVeyor CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_c('a',{attrs:{"href":"https://ci.appveyor.com/login"}},[_v("Sign in to AppVeyor CI")]),_v(" using your GitHub Account.")])]),_v(" "),_c('li',[_c('p',[_v("Authorize AppVeyor App as GitHub App in the "),_c('a',{attrs:{"href":"https://ci.appveyor.com/authorizations"}},[_v("account settings")]),_v(" by clicking on the "),_c('em',[_v("Install AppVeyor App")]),_v(" button.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/appveyorInstallGithubApp.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/appveyorInstallGithubApp.png","alt":"Install AppVeyor GitHub App"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("In the "),_c('a',{attrs:{"href":"https://ci.appveyor.com/projects"}},[_v("projects directory")]),_v(", click on the "),_c('em',[_v("New Project")]),_v(" button.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/appveyorAddNewProject.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/appveyorAddNewProject.png","alt":"Add a new Project on AppVeyor"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Finally, select the repository containing your MarkBind site.")])])]),_v(" "),_c('p',[_c('strong',[_v("Configuring your repository in AppVeyor CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Ensure that you have generated a "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("GitHub Personal Access token with "),_c('strong',[_v("repo")]),_v(" permissions")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Navigate to the project settings page of your repository in AppVeyor CI.")])]),_v(" "),_c('li',[_c('p',[_v("On the left menu, click on "),_c('strong',[_v("Environment")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Under the heading "),_c('strong',[_v("Environment variables")]),_v(", add a custom environment variable named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(", with the value set to the personal access token that was generated in the first step. "),_c('mark',[_v("Ensure that you toggle variable encryption by clicking on the padlock.")])]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/appveyorGithubToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/appveyorGithubToken.png","alt":"Add GitHub Token on AppVeyor"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Remember to click "),_c('strong',[_v("Save")]),_v(" at the bottom of the page.")])]),_v(" "),_c('li',[_c('p',[_v("Add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v("file at the root of your MarkBind site's repository to instruct AppVeyor CI to build and deploy the site to GitHub Pages when you push to your repository. More information on customizing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v(" can be found in "),_c('a',{attrs:{"href":"https://www.appveyor.com/docs/appveyor-yml/"}},[_v("AppVeyor documentation")]),_v(". An example "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v(" file is given below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("environment:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nodejs_version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'16'")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("branches:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("only:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("master")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install-Product")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("node")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("$env:nodejs_version")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("test:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("off")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("off")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.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("Commit and push "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("appveyor.yml")]),_v(" to your GitHub repository. Thereafter, AppVeyor CI should begin to run the build script. You are able to view the current build status by clicking on your repository in the "),_c('a',{attrs:{"href":"https://ci.appveyor.com/projects"}},[_v("AppVeyor projects page")]),_v(". Once the build succeeds, you should be able to view your MarkBind site, after a few seconds, at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(" e.g., "),_c('a',{attrs:{"href":"http://se-edu.github.io/se-book"}},[_v("http://se-edu.github.io/se-book")]),_v(".")])]),_v(" "),_c('panel',{attrs:{"type":"seamless","expanded":"","panelId":"deploying-via-circle-ci"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"deploying-via-circle-ci"}},[_v("Deploying via Circle CI"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-via-circle-ci","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_c('strong',[_v("Adding your repository to Circle CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Ensure that you have generated a "),_c('a',{attrs:{"href":"#generating-a-github-personal-access-token"}},[_v("GitHub Personal Access Token with "),_c('strong',[_v("repo")]),_v(" permissions")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Sign in to "),_c('a',{attrs:{"href":"https://circleci.com/"}},[_v("Circle CI")]),_v(" using your GitHub account.")])]),_v(" "),_c('li',[_c('p',[_v("In the projects dashboard, click on the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Set Up Project")]),_v(" button beside the repo containing your MarkBind site.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/circleCiSetUpProject.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/circleCiSetUpProject.png","alt":"Set Up Project in Circle CI"}})])])])],1)])]),_v(" "),_c('p',[_c('strong',[_v("Configuring your repository in Circle CI")])]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Once you have set up your project, click on the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Project Settings")]),_v(" button.")])]),_v(" "),_c('li',[_c('p',[_v("On the left, click on the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Environment Variables")]),_v(" tab and add a custom Environment Variable, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("GITHUB_TOKEN")]),_v(", which contains the value of your GitHub Personal Access Token.")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/circleCiGithubToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/circleCiGithubToken.png","alt":"Add GitHub Token in Circle CI"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Commit and push a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file to the repo 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 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file is located in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("/.circleci/")]),_v(" directory. A sample "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file is shown below:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("Build-And-Deploy:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("docker:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("image:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'cimg/base:stable'")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("checkout")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node/install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"16\"")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("npm-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"8\"")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install-yarn:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("node")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--version")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("--ci")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("orbs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("node:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("circleci/node@4.1.0")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflows:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("Deploy-MarkBind-Site:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build-And-Deploy")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.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("After you have pushed the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("config.yml")]),_v(" file to your remote repo, you should see Circle CI starting to run the Deploy job in your projects dashboard. Once it is successful, you should be able to view your MarkBind site at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("http://.github.io/")]),_v(".")]),_v(" "),_c('p',[_v("For more information on customizing your build script, you may refer to "),_c('a',{attrs:{"href":"https://circleci.com/docs/2.0/configuration-reference/#section=configuration"}},[_v("Circle CI Config Reference Document")]),_v(".")])]),_v(" "),_c('hr'),_v(" "),_m(17),_v(" "),_c('p',[_c('strong',[_v("You can setup "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("a platform for deploying static webpages (among other things)")]},proxy:true}])},[_v("Netlify")])],1),_v("\nto automatically build and deploy your site on their platform every time your GitHub repo is updated.")])]),_v(" "),_c('p',[_v("Here are the steps to set up Netlify:")]),_v(" "),_c('ol',[_m(18),_v(" "),_m(19),_v(" "),_c('li',[_c('p',[_v("Select your git provider")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview1.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview1.png","alt":"Create a new site"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Select your MarkBind site repository")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview2.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview2.png","alt":"Select repository"}})])])])],1)]),_v(" "),_c('li',[_m(20),_v(" "),_m(21),_v(" "),_c('br'),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview3.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview3.png","alt":"Update build settings"}})])])])],1)])]),_v(" "),_c('p',[_v("Now your site will be deployed on Netlify at the given address specified after deployment. It will be updated automatically when the default branch of your repo is updated.")]),_v(" "),_m(22),_v(" "),_c('p',[_c('strong',[_v("If you are hosting your MarkBind project on GitHub, you can setup "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("Pull Request previews")]},proxy:true}])},[_v("PR previews")]),_v(" in order to automatically build and deploy the modified MarkBind site based on the changes in the PR.")],1)]),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/netlifyPreview4.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/netlifyPreview4.png","alt":"Preview deploy"}})])])])],1),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_c('ol',[_m(29),_v(" "),_c('li',[_m(30),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeCreateAccount.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeCreateAccount.png","alt":"Create Surge account"}})])])])],1)]),_v(" "),_c('li',[_c('p',[_v("Proceed to create a Surge account. After you have set up your account, you should see the following screen:")]),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeCreateAccount2.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeCreateAccount2.png","alt":""}})])])])],1)]),_v(" "),_c('li',[_m(31),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The rest of the "),_c('strong',[_v("Surge setup")]),_v(" is unnecessary for the purposes of setting up PR previews. You may still proceed with the rest of the setup such as setting the "),_c('em',[_v("project directory")]),_v(" and the "),_c('em',[_v("domain name")]),_v(", if you wish to.")])])],1),_v(" "),_c('li',[_m(32),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeToken.png","alt":"Get Surge token"}})])])])],1)]),_v(" "),_c('li',[_m(33),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeAddToken.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeAddToken.png","alt":"Add Surge token"}})])])])],1),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("After aquiring the surge token, you may want to utilize the provided "),_c('a',{attrs:{"href":"https://github.com/MarkBind/markbind-action/blob/master/.github/workflows/README.md"}},[_v("MarkBind reusable workflows")]),_v(" to conveniently set up your PR preview via Surge.sh.")]),_v(" "),_c('p',[_v("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.")])])],1),_v(" "),_m(34)]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("receivePR.yml")]),_v(" File")])]},proxy:true}])},[_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Receive")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# read-only")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# no access to secrets")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pull_request:")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v(" \n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/checkout@v3")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Node")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/setup-node@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("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("16")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("website")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" npm install -g markbind-cli")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" markbind build")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Save")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("number")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("and")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("HEAD")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("commit")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("if:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("success()")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("&&")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("github.event_name")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("==")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'pull_request'")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" mkdir -p ./pr")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" echo ${{ github.event.number }} > ./pr/NUMBER")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" echo ${{ github.event.pull_request.head.sha }} > ./pr/SHA")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Upload")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("artifacts")]),_v(" \n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("if:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("success()")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("&&")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("github.event_name")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("==")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'pull_request'")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/upload-artifact@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-deployment")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("path:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" ./_site")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" ./pr")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("previewPR.yml")]),_v(" File")])]},proxy:true}])},[_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_c('strong',[_v("Setting up the PR URL")])]),_v(" "),_c('p',[_v("In "),_c('strong',[_v("line 34")]),_v(" of the workflow code below, you are required to update the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("PR_URL")]),_v(" according to your needs. We recommend just changing the section "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to something that can easily identify your MarkBind project repository.")]),_v(" "),_c('p',[_v("For example, if the name of your repository is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("MyRepo")]),_v(", and it is managed under an organization "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("MyOrganization")]),_v(", you could replace "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorganization-myrepo")]),_v(" and your PR Preview will be deployed at the following URL: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://pr--myorganization-myrepo.surge.sh")]),_v(".")]),_v(" "),_c('p',[_v("Advanced users may completely replace the default "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("PR_URL")]),_v(". "),_c('mark',[_c('strong',[_v("It is recommended to test your workflow code on a test repo before using it for your MarkBind project repo.")])])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Preview")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# Runs after PR is received and build by markbind-cli")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("# Has access to repo secrets")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("on:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflow_run:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflows:")]),_v(" ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Receive MarkBind PR\"")]),_v("]\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("types:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("completed")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jobs:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("build:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("runs-on:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("ubuntu-latest")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Deploying")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("to")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("surge")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("steps:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/checkout@v3")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Download")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("built")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("MarkBind")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("site")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("artifacts")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("dawidd6/action-download-artifact@v2")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("workflow:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("receivePR.yml")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run_id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("github.event.workflow_run.id")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-deployment")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("path:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(".")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Extract")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("number")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("pr-number")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("echo")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ACTIONS_PR_NUMBER=$(cat ./pr/NUMBER)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(">>")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("$GITHUB_OUTPUT")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Node")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("actions/setup-node@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("node-version:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("16")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Build")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("preview")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("url")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("pr-url")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" PR_URL=\"https://pr-${{ steps.pr-number.outputs.ACTIONS_PR_NUMBER }}-.surge.sh/\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" echo \"ACTIONS_PREVIEW_URL=${PR_URL}\" >> $GITHUB_OUTPUT")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Install")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("surge")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("and")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("deploy")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("to")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("surge")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("run:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" npm i -g surge")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" surge --project ./_site --domain ${{ steps.pr-url.outputs.ACTIONS_PREVIEW_URL }}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("env:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("SURGE_TOKEN:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("secrets.SURGE_TOKEN")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Find")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("existing")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("preview")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("comment")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("peter-evans/find-comment@v1")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("fc")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("issue-number:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.pr-number.outputs.ACTIONS_PR_NUMBER")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("body-includes:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Your")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("can")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("be")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("previewed")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Comment")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("preview")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("in")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("if:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.fc.outputs.comment-id")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("==")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("0")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uses:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("peter-evans/create-or-update-comment@v1")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("with:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("issue-number:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.pr-number.outputs.ACTIONS_PR_NUMBER")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("body:")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("|")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v(" Thank you for submitting the Pull Request! :thumbsup: ")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}}),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("Your")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("PR")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("can")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("be")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("previewed")]),_v(" ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]"),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("(${{")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("steps.pr-url.outputs.ACTIONS_PREVIEW_URL")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("}})")]),_v("\n")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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(" "),_m(35),_v(" "),_c('span',[_c('box',{attrs:{"background-color":"white","border-color":"#cccccc"}},[_c('span',[_c('a',{attrs:{"href":"/images/surgeGithubActionsBot.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"/images/surgeGithubActionsBot.png","alt":"Surge PR bot"}})])])])],1),_v(" "),_m(36),_v(" "),_m(37),_v(" "),_c('panel',{attrs:{"type":"seamless","expand-headerless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Configuring Online Deployment platforms to use specific MarkBind version")])]},proxy:true}])},[_v(" "),_c('div',[_c('h5',{attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}},[_c('span',{staticClass:"fas fa-info",attrs:{"aria-hidden":"true"}}),_v(" Configuring Online Deployment platforms to use specific MarkBind version"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#configuring-online-deployment-platforms-to-use-specific-markbind-version","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Configuring CI platforms to use specific MarkBind version")])]),_v(" "),_c('p',[_v("When the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#using-ci-platforms"}},[_v("default CI configuration for deployment")]),_v(" is used, the latest version of MarkBind will be used in the CI workflows. This may be a later version of MarkBind than the one you use locally.")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("If you want to specify a version of MarkBind (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v1.6.3")]),_v("), you have to modify the step where "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind-cli")]),_v(" is being installed to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm i -g markbind-cli@v1.6.3")]),_v(". For example, for Travis-CI, you can modify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("install")]),_v(" step in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" as follows:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@1.6.3")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('p',[_v("If you want to use the latest minor version automatically until the next major version (as major versions usually contain breaking changes), you can add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("^")]),_v(" in front of the version number. In the example below, Travis will use the latest version of MarkBind but will stop before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2.*")])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@^1.6.3")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 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("Setting up Netlify to use a specific version of MarkBind")])]),_v(" "),_c('p',[_v("Here are the steps to set up Netlify to use a specific version of MarkBind.")]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Navigate to the root directory of your site.")])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm init")]),_v(" which will create "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.lock.json")])])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm install markbind-cli@1.6.3 --save")]),_v(" to install MarkBind as a dependency (using v1.6.3 as an example)")])]),_v(" "),_c('li',[_c('p',[_v("Create / Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file in the root directory and add:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("node_modules\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('p',[_v("Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")]),_v(" in site.json to include")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("node_modules/*\n")]),_c('span',[_v(".gitignore\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('p',[_v("Now, follow the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-netlify"}},[_v("previous instructions for setting up Netlify")]),_v(" but with the following difference:"),_c('br'),_v("\nIn step 5, Set the "),_c('mark',[_v("Build Command")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build --baseUrl")])])])])])]),_v(" "),_m(38),_v(" "),_c('br')],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":"#deploying-the-site"}},[_v("Deploying the Site‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#generic-steps-for-deploying-a-markbind-site"}},[_v("Generic steps for deploying a MarkBind site‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-to-github-pages"}},[_v("Deploying to GitHub Pages‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-the-markbind-deploy-command"}},[_v("Using the markbind deploy command‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-ci-platforms"}},[_v("Using CI Platforms‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#generating-a-github-personal-access-token"}},[_v("Generating a GitHub Personal Access Token‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-github-actions"}},[_v("Deploying via GitHub Actions‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-travis-ci"}},[_v("Deploying via Travis CI‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-appveyor-ci"}},[_v("Deploying via AppVeyor CI‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-via-circle-ci"}},[_v("Deploying via Circle CI‎")])])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-to-netlify"}},[_v("Deploying to Netlify‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#previewing-pull-requests-for-markbind-sites"}},[_v("Previewing Pull Requests for MarkBind sites‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#previewing-prs-using-netlify"}},[_v("Previewing PRs using Netlify‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#previewing-prs-using-surge"}},[_v("Previewing PRs using Surge‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(39)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,13 +11,13 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_c('em',[_v("User Guide → Deploying the Site")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"deploying-the-site"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-the-site"}}),_v("Deploying the Site"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-the-site","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"deploying-the-site"}},[_v("Deploying the Site"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-the-site","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("A site generated by MarkBind can be deployed by simply uploading the generated files to any Web server.")]),_v(" In addition, MarkBind provides several convenient deployment options.")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"generic-steps-for-deploying-a-markbind-site"}},[_c('span',{staticClass:"anchor",attrs:{"id":"generic-steps-for-deploying-a-markbind-site"}}),_v("Generic steps for deploying a MarkBind site"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#generic-steps-for-deploying-a-markbind-site","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"generic-steps-for-deploying-a-markbind-site"}},[_v("Generic steps for deploying a MarkBind site"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#generic-steps-for-deploying-a-markbind-site","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('ol',[_c('li',[_v("Set the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" property of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file")]),_v(" to match the deploy location.")]),_v(" "),_c('li',[_v("(Optional) Use the "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(" command")]),_v(" to stage the site locally and confirm the contents are as expected.")]),_v(" "),_c('li',[_v("Use the "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#build-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build")]),_v(" command")]),_v(" to generate the site from source files. That command puts the generated site files in a directory named "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(" (you can change the output directory using parameters supplied to the command).")]),_v(" "),_c('li',[_v("Upload the site files to the Web server. The sections below explain how to automate this step if you are deploying to some online platforms.")])])} @@ -29,13 +29,13 @@ with(this){return _c('p',[_c('strong',[_v("Steps for deploying multiple MarkBind with(this){return _c('ol',[_c('li',[_v("Create multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files. Ensure that the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" property of each "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file")]),_v(" matches its deploy location.")]),_v(" "),_c('li',[_v("(Optional) Use the "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve -s ")]),_v(" command")]),_v(" to stage each site locally and confirm the contents are as expected.")]),_v(" "),_c('li',[_v("For each site:\n"),_c('ol',[_c('li',[_v("Use the "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#build-command"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build -s ")]),_v(" command")]),_v(" to generate the site from source files.")]),_v(" "),_c('li',[_v("Upload the site files to the Web server. The sections below explain how to automate this step if you are deploying to some online platforms.")])])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"deploying-to-github-pages"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-to-github-pages"}}),_v("Deploying to GitHub Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-to-github-pages","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"deploying-to-github-pages"}},[_v("Deploying to GitHub Pages"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-to-github-pages","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("MarkBind can easily deploy a site to "),_c('a',{attrs:{"href":"https://help.github.com/categories/github-pages-basics/"}},[_v("GitHub pages")])]),_v(" if the project root directory is also a GitHub repo.")])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"using-the-markbind-deploy-command"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-the-markbind-deploy-command"}}),_v("Using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")]),_v(" command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-the-markbind-deploy-command","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"using-the-markbind-deploy-command"}},[_v("Using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")]),_v(" command"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-the-markbind-deploy-command","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Running the "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind deploy")])]),_v(" command will deploy the most recent build of your site to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("gh-pages")]),_v(" branch of the repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("origin")]),_v(" and will be available.")])} @@ -50,13 +50,13 @@ with(this){return _c('p',[_v("Your site will be online at "),_c('code',{pre:true with(this){return _c('p',[_v("You can override the default deployment settings "),_c('span',{staticClass:"dimmed"},[_v("(e.g., repo/branch to deploy)")]),_v(" in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v("'s "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")]),_v(" section:")])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"using-ci-platforms"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-ci-platforms"}}),_v("Using CI Platforms"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-ci-platforms","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"using-ci-platforms"}},[_v("Using CI Platforms"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-ci-platforms","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("You can setup CI Platforms to automatically build and deploy your site on GitHub Pages every time your GitHub repo is updated.")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"deploying-to-netlify"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-to-netlify"}}),_v("Deploying to Netlify"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-to-netlify","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"deploying-to-netlify"}},[_v("Deploying to Netlify"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-to-netlify","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('li',[_c('p',[_v("Go to "),_c('a',{attrs:{"href":"https://app.netlify.com/"}},[_v("https://app.netlify.com/")]),_v(" and sign up")])])} @@ -68,13 +68,13 @@ with(this){return _c('li',[_c('p',[_v("Next go to "),_c('a',{attrs:{"href":"http with(this){return _c('p',[_v("Update the build settings as follows and hit "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Deploy site")]),_v(":")])} },function anonymous( ) { -with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Build Command")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm i markbind-cli -g && markbind build --baseUrl")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Publish directory")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Show advanced")]),_v(": Add a new variable with the key as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("NODE_VERSION")]),_v(" and the value as "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("14")]),_v(" or higher")])])])} +with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Build Command")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm i markbind-cli -g && markbind build --baseUrl")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Publish directory")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Show advanced")]),_v(": Add a new variable with the key as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("NODE_VERSION")]),_v(" and the value as "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("16")]),_v(" or higher")])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"previewing-pull-requests-for-markbind-sites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"previewing-pull-requests-for-markbind-sites"}}),_v("Previewing Pull Requests for MarkBind sites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#previewing-pull-requests-for-markbind-sites","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"previewing-pull-requests-for-markbind-sites"}},[_v("Previewing Pull Requests for MarkBind sites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#previewing-pull-requests-for-markbind-sites","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"previewing-prs-using-netlify"}},[_c('span',{staticClass:"anchor",attrs:{"id":"previewing-prs-using-netlify"}}),_v("Previewing PRs using Netlify"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#previewing-prs-using-netlify","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"previewing-prs-using-netlify"}},[_v("Previewing PRs using Netlify"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#previewing-prs-using-netlify","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("By following the "),_c('a',{attrs:{"href":"#deploying-to-netlify"}},[_v("steps to deploy to Netlify")]),_v(" in the previous section, you would automatically be able to preview PRs.")])} @@ -86,7 +86,7 @@ with(this){return _c('p',[_v("You can "),_c('em',[_v("preview")]),_v(" the updat with(this){return _c('p',[_v("For more information on previewing PRs with Netlify, you may refer to "),_c('a',{attrs:{"href":"https://www.netlify.com/tags/deploy-previews/"}},[_v("Netlify's docs")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"previewing-prs-using-surge"}},[_c('span',{staticClass:"anchor",attrs:{"id":"previewing-prs-using-surge"}}),_v("Previewing PRs using Surge"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#previewing-prs-using-surge","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"previewing-prs-using-surge"}},[_v("Previewing PRs using Surge"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#previewing-prs-using-surge","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("You may also preview PRs using "),_c('a',{attrs:{"href":"https://surge.sh/"}},[_v("Surge")]),_v(", which is an NPM package that does static web publishing. Here are the steps to do so:")])} @@ -116,12 +116,12 @@ with(this){return _c('p',[_v("Finally, you may open a PR to the repo of your Mar with(this){return _c('p',[_v("For more information on Surge, you may refer to "),_c('a',{attrs:{"href":"https://surge.sh/help/"}},[_v("Surge's docs")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"relevant-tips-and-amp-tricks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"relevant-tips-and-amp-tricks"}}),_v("Relevant Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#relevant-tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#relevant-tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/themes.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Themes")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_c('span',[_c('span',[_v("MarkBind in the Project Workflow")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/diagrams/activity.png b/userGuide/diagrams/activity.png index c7d9e7b..46e7c97 100644 Binary files a/userGuide/diagrams/activity.png and b/userGuide/diagrams/activity.png differ diff --git a/userGuide/diagrams/archimate.png b/userGuide/diagrams/archimate.png index af274a1..2969980 100644 Binary files a/userGuide/diagrams/archimate.png and b/userGuide/diagrams/archimate.png differ diff --git a/userGuide/diagrams/class.png b/userGuide/diagrams/class.png index 5825518..01d071e 100644 Binary files a/userGuide/diagrams/class.png and b/userGuide/diagrams/class.png differ diff --git a/userGuide/diagrams/component.png b/userGuide/diagrams/component.png index 73e3037..baabac4 100644 Binary files a/userGuide/diagrams/component.png and b/userGuide/diagrams/component.png differ diff --git a/userGuide/diagrams/ditaa.png b/userGuide/diagrams/ditaa.png index a283133..b01ae87 100644 Binary files a/userGuide/diagrams/ditaa.png and b/userGuide/diagrams/ditaa.png differ diff --git a/userGuide/diagrams/entityrelation.png b/userGuide/diagrams/entityrelation.png index e7c617e..52d3e8d 100644 Binary files a/userGuide/diagrams/entityrelation.png and b/userGuide/diagrams/entityrelation.png differ diff --git a/userGuide/diagrams/gantt.png b/userGuide/diagrams/gantt.png index 9e12146..3614bba 100644 Binary files a/userGuide/diagrams/gantt.png and b/userGuide/diagrams/gantt.png differ diff --git a/userGuide/diagrams/object.png b/userGuide/diagrams/object.png index 821475f..6ac23d0 100644 Binary files a/userGuide/diagrams/object.png and b/userGuide/diagrams/object.png differ diff --git a/userGuide/diagrams/sequence.png b/userGuide/diagrams/sequence.png index 15ab913..e0256b6 100644 Binary files a/userGuide/diagrams/sequence.png and b/userGuide/diagrams/sequence.png differ diff --git a/userGuide/diagrams/state.png b/userGuide/diagrams/state.png index f87db75..721659c 100644 Binary files a/userGuide/diagrams/state.png and b/userGuide/diagrams/state.png differ diff --git a/userGuide/diagrams/state.puml b/userGuide/diagrams/state.puml index a15719f..67d74b9 100644 --- a/userGuide/diagrams/state.puml +++ b/userGuide/diagrams/state.puml @@ -16,5 +16,5 @@ state State3 { State3 --> State3 : Failed State3 --> [*] : Succeeded / Save Result State3 --> [*] : Aborted - + @enduml diff --git a/userGuide/diagrams/usecase.png b/userGuide/diagrams/usecase.png index 9483e6b..73d8b62 100644 Binary files a/userGuide/diagrams/usecase.png and b/userGuide/diagrams/usecase.png differ diff --git a/userGuide/diagrams/usecase.puml b/userGuide/diagrams/usecase.puml index 882da33..28c5654 100644 --- a/userGuide/diagrams/usecase.puml +++ b/userGuide/diagrams/usecase.puml @@ -3,7 +3,7 @@ left to right direction skinparam packageStyle rectangle actor customer actor clerk -rectangle checkout { +rectangle shop { customer -- (checkout) (checkout) .> (payment) : include (help) .> (checkout) : extends diff --git a/userGuide/formattingContents.html b/userGuide/formattingContents.html index c13c650..349af41 100644 --- a/userGuide/formattingContents.html +++ b/userGuide/formattingContents.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Formatting Contents - + + MarkBind - User Guide: Formatting Contents @@ -14,8 +12,7 @@ - - + @@ -23,42 +20,228 @@ 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>
+

                        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:

                        Strike through

                        Syntax added by MarkBind:

                        CODE:

                        ****Super Bold****, !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--,
+This will not be in a new line.

                        Text Styles

                        Markdown text styles:

                        CODE:

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

                        OUTPUT:

                        Bold, Italic, Bold and Italic, Inline Code

                        Additional syntax from GFMD:

                        CODE:

                        ~~Strike through~~
+

                        OUTPUT:

                        Strike through

                        Syntax added by MarkBind:

                        CODE:

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

                        OUTPUT:

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

                        Center-align

                        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:

                        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`
 ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~
-

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

                        Blockquotes

                        CODE:

                        Normal text
+

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

                        Blockquotes

                        CODE:

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

                        OUTPUT:

                        Normal text

                        Blockquote, first paragraph

                        Second paragraph

                        Nested quoteblock

                        Alternatively, you can use <blockquote> tags:

                        CODE:

                        Normal text
+

                        OUTPUT:

                        Normal text

                        Blockquote, first paragraph

                        Second paragraph

                        Nested quoteblock

                        Alternatively, you can use <blockquote> tags:

                        CODE:

                        Normal text
 <blockquote>
 Blockquote, first paragraph
 
@@ -67,31 +250,95 @@
 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
-

                        Blockquote, first paragraph

                        Second paragraph

                        Nested blockquote

                        Lists

                        Unordered lists:

                        CODE:

                        * Item 1
+

                        Blockquote, first paragraph

                        Second paragraph

                        Nested blockquote

                        Lists

                        Unordered lists:

                        CODE:

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

                        OUTPUT:

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

                        OUTPUT:

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

                        Ordered lists:

                        CODE:

                        1. Item 1
+
                        • Sub item 1.2.1
                         
                      • Item 2
                        •  
                      • Item 3

                        • Ordered lists:

                        CODE:

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

                        OUTPUT:

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

                        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
@@ -99,11 +346,43 @@
    - [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
@@ -111,17 +390,65 @@
 - [ ] Item 3
 - [x] Item 4
 - ( ) Item 5
-
                        1. Item 1 +
                        1. Item 1
                          1. Sub item 1.1
                          2. Sub item 1.2
                        • Item 2 -
                          • item 2.1
                        • Item 3
                        • Item 4

                        Code

                        Themes

                        MarkBind can present formatted code blocks, be it fenced or inline, with either light or dark themes. The default is dark (click for an example).

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

                        Fenced Code

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

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

                        Features:

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

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

                        CODE:

                        ```xml
+
                        • item 2.1
                         
                        •  Item 3
                          •  
                        •  Item 4
                          •

                        Code

                        Themes

                        MarkBind can present formatted code blocks, be it fenced or inline, with either light or dark themes. The default is dark (click for an example).

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

                        Fenced Code

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

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

                        Features:

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

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

                        CODE:

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

                        OUTPUT:

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

                        Line numbers are . To enable line numbers for the entire site by default, +

                        OUTPUT:

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

                        Line numbers are . To enable line numbers for the entire site by default, add "codeLineNumbers": true to the site.json file:

                        {
   // ...
   "style": {
@@ -131,31 +458,143 @@
   }
   // code below omitted for brevity
 }
-

                        For each code block, you may also use the line-numbers or no-line-numbers classes to override the site-wide setting as such:

                        CODE:

                        ```xml {.line-numbers}
+

                        For each code block, you may also use the line-numbers or no-line-numbers classes to override the site-wide setting as such:

                        CODE:

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

                        OUTPUT:

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

                        CODE:

                        ```xml {.no-line-numbers}
+

                        OUTPUT:

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

                        CODE:

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

                        OUTPUT:

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

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

                        CODE:

                        ```js {start-from=6}
+

                        OUTPUT:

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

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

                        CODE:

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

                        OUTPUT:

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

                        You can add the highlight-lines attribute to add highlighting to your code block. Refer to the example code block +

                        OUTPUT:

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

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

                        CODE:

                        ```java {.line-numbers highlight-lines="1[:],3['Inventory'],4['It\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26"}
 import java.util.List;
 
@@ -186,85 +625,341 @@
 }
 
 ```
-

                        OUTPUT:

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

                        The value of highlight-lines is composed of highlight rules, separated by commas. +

                        OUTPUT:

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

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

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

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

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

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

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

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

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

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

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

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

                        CODE:

                        ```xml {heading="Heading title"}
+for range highlighting consists of two single line highlight rules as listed above joined by a dash (-).
                         
                        Type Format Example
                         
                        Ranged full text highlight
                        Highlights from the first non-whitespace character to the last non-whitespace character                        		 lineStart-lineEnd 2-4
                         
                        Ranged full line highlight
                        Like ranged full text highlight, but highlights the entirety of the lines                        		 lineStart[:]-lineEnd or lineStart-lineEnd[:] 1[:]-5,10-12[:]
                         
                        Ranged character-bounded highlight
                        Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character                        		 lineStart[start:]-lineEnd or lineStart-lineEnd[:end] 3[2:]-7, 4-9[:17]
                         
                        Ranged word-bounded highlight
                        Like ranged character-bounded highlight, but starts/ends at an arbitrary word                        		 lineStart[start::]-lineEnd or lineStart-lineEnd[::end] 16[1::]-20,22-24[::3]
                        Heading
                         
                        To add a heading, add the attribute heading with the heading text as the value, as shown below.
                         
                        CODE:
                         
                        ```xml {heading="Heading title"}
 <foo>
   <bar type="name">goo</bar>
 </foo>
 ```
-
                         
                        OUTPUT:
                         
                         
                         
                          
                        Heading title
                        <foo>
-  <bar type="name">goo</bar>
-</foo>
-
                         
                         
                        Headings support inline Markdown, except for Inline Code and Dim text styles.
                         
                        CODE:
                         
                        ```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
+
                         
                        OUTPUT:
                         
                         
                         
                          
                        Heading title
                        <foo>
+  <bar type="name">goo</bar>
+</foo>
+
                         
                         
                        Headings support inline Markdown, except for Inline Code and Dim text styles.
                         
                        CODE:
                         
                        ```{heading="**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:<br>We support page breaks"}
 <foo></foo>
 ```
-
                         
                        OUTPUT:
                         
                         
                         
                          
                        Bold, Italic, Bold and Italic, Strike through, Super Bold, Underline, Highlight, 👍 ❗️ ❌ 🚧
                        We support page breaks
                        <foo></foo>
-
                         
                         
                        Using multiple features
                         
                        You can also use multiple features together, as shown below.
                         
                        CODE:
                         
                        ```xml {highlight-lines="2" heading="Heading title"}
+
                         
                        OUTPUT:
                         
                         
                         
                          
                        Bold, Italic, Bold and Italic, Strike through, Super Bold, Underline, Highlight, 👍 ❗️ ❌ 🚧
                        We support page breaks
                        <foo></foo>
+
                         
                         
                        Using multiple features
                         
                        You can also use multiple features together, as shown below.
                         
                        CODE:
                         
                        ```xml {highlight-lines="2" heading="Heading title"}
 <foo>
   <bar type="name">goo</bar>
 </foo>
 ```
-
                         
                        OUTPUT:
                         
                         
                         
                          
                        Heading title
                        <foo>
-  <bar type="name">goo</bar>
-</foo>
-
                         
                         
                        Copy button
                         
                        A copy button can be added to code blocks using the codeBlockCopyButtons plugin:
                         
                         
                         
                        User Guide: Using Plugins → Plugin: codeBlockCopyButtons
                         
                          
                         
                         
                         
                         
                         
                        Wrap text button
                         
                        A wrap text button can be added to code blocks using the codeBlockWrapButtons plugin:
                         
                         
                         
                        User Guide: Using Plugins → Plugin: codeBlockWrapButtons
                         
                          
                         
                         
                         
                         
                         
                        Inline Code
                         
                        Syntax coloring
                         
                        MarkBind can apply syntax-coloring on inline code too.
                         
                        CODE:
                         
                        Consider the XML code `<bar type="name">goo</bar>`{.xml},<br>
+
                         
                        OUTPUT:
                         
                         
                         
                          
                        Heading title
                        <foo>
+  <bar type="name">goo</bar>
+</foo>
+
                         
                         
                        Copy button
                         
                        A copy button can be added to code blocks using the codeBlockCopyButtons plugin:
                         
                         
                        User Guide: Using Plugins → Plugin: codeBlockCopyButtons
                         
                          
                         
                         
                         
                         
                         
                        Wrap text button
                         
                        A wrap text button can be added to code blocks using the codeBlockWrapButtons plugin:
                         
                         
                        User Guide: Using Plugins → Plugin: codeBlockWrapButtons
                         
                          
                         
                         
                         
                         
                         
                        Inline Code
                         
                        Syntax coloring
                         
                        MarkBind can apply syntax-coloring on inline code too.
                         
                        CODE:
                         
                        Consider the XML code `<bar type="name">goo</bar>`{.xml},<br>
 or the java code `public static void main(String[] args)`{.java}.
-
                         
                        OUTPUT:
                         
                         
                         
                          
                        Consider the XML code <bar type="name">goo</bar>,
                        
-or the java code public static void main(String[] args).
                         
                         
                        Displaying content within curly braces: {{ content }}
                         
                        If your code contains special Nunjucks tags like {{ or }}, use a raw-endraw block:
                         
                        {% raw %} {{ content }} {% endraw %}
-
                        ```xml
+
                         
                        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 %}
+
                        ```xml
 <foo>
   <bar type="name">goo</bar>
 </foo>
 ```
-
                        `<bar type="name">goo</bar>`{.xml}
-
                        <foo>
+
                        `<bar type="name">goo</bar>`{.xml}
+
                        <foo>
   <bar type="name">goo</bar>
 </foo>
-

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

                        Horizontal Rules

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

                        CODE:

                        *****
+

                        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}
 
@@ -273,19 +968,99 @@
 --- {.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].
+

                        Basic style:

                        CODE:

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

                        OUTPUT:

                        MarkBind home is at here.

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

                        CODE:

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

                        OUTPUT:

                        MarkBind home is at here.

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

                        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
 
@@ -306,7 +1081,23 @@
 `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).
 
 MarkBind home is at [here][1].
 
 [1]: https://markbind.org
-

                        MarkBind home is at here.

                        Footnotes

                        CODE:

                        **Normal footnotes:**
+

                        MarkBind home is at here.

                        Footnotes

                        CODE:

                        **Normal footnotes:**
 Here is a footnote reference,[^1] and another.[^longnote]
 
 [^1]: Here is the footnote. Footnotes will appear at the bottom of the page.
@@ -339,11 +1178,27 @@
 Here is an inline note.^[Inline notes are easier to write, since
 you don't have to pick an identifier and move down to type the
 note.]
-

                        OUTPUT:

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

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

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

                        **Normal footnotes:**
+

                        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.
@@ -351,19 +1206,115 @@
 [^longnote]: Here's one with multiple blocks.
     Subsequent paragraphs are indented to show that they
 belong to the previous footnote.
-
                        +
                        1 + 1 = 2 ^[Math] -

                        Images

                        CODE:

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

                        OUTPUT:

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

                        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:

                        +

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

                        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:

                        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}
@@ -375,58 +1326,227 @@
 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
-

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

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

                        Tables

                        CODE:

                        Animal | Trainable?| Price | Remarks
+

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

                        • 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

                        Tables

                        CODE:

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

                        OUTPUT:

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

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

                        Animal | Trainable?| Price | Remarks
+

                        OUTPUT:

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

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

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

                        Emoji

                        CODE:

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

                        OUTPUT:

                        👍 ❗️ ❌ 🚧

                        the list of supported emoji.

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

                        👍 ❗️ ❌ 🚧

                        Icons

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

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

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

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

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

                        Using Font Awesome Icons

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

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

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

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

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

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

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

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

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

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

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

                        Embeds

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

                        Embedding YouTube Videos

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

                        CODE:

                        @[youtube](v40b3ExbM0c)
+
                        Animal Trainable? Price Remarks
                        Ants no 5
                        Bees no 20
                        Cats yes 100

                        Emoji

                        CODE:

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

                        OUTPUT:

                        👍 ❗️ ❌ 🚧

                        the list of supported emoji.

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

                        👍 ❗️ ❌ 🚧

                        Icons

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

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

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

                        • emoji: Don't judge the 📖 by 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:

                        @[youtube](v40b3ExbM0c)
+

                        OUTPUT:

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

                        Embedding PowerPoint Slides (using the embed URL from PowerPoint online)

                        Here is an example of embedding a PowerPoint slide deck:

                        CODE:

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

                        OUTPUT:

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

                        Embedded YouTube video:

                        Embedded slide deck:

                        Dates

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

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

                        20 days after 1st Jan 2020:

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

                        The baseDate follows the format: YYYY-MM-DD

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

                        Using variables

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

                        {{ base1 | date }} Wed 1 Jan

                        Custom formatting

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

                        Adding days

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

                        Page variables

                        Dates can be supplied using page variables for convenience.

                        Inside variables.md or referencing page:

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

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

                        Advanced Formatting

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

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

                        Brief reference

                        Full formatting reference available here 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:
+

                        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:
 
 \[ 3x + y = 11 \] (1)
 
@@ -439,13 +1559,45 @@
 $$\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 %}
-

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

                        
+

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

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

                        
 Solve the following simultaneous equations:
 
 \[ 3x + y = 11 \] (1)
@@ -454,12 +1606,43 @@
 
 Euler's equation \( e^{i\pi}+1=0 \) is a beautiful equation.
 
-

                        Solve the following simultaneous equations:

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

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

                        Relevant Tips & Tricks

                        Escaping Characters

                        MarkBind Syntax Overview

                        Using Components


                        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 +

                        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.

                        + diff --git a/userGuide/formattingContents.page-vue-render.js b/userGuide/formattingContents.page-vue-render.js index 0066ce7..a917c26 100644 --- a/userGuide/formattingContents.page-vue-render.js +++ b/userGuide/formattingContents.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(13),_v(" "),_c('p',[_v("Use one or more empty lines to separate paragraphs.")]),_v(" "),_c('div',[_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_m(17)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(18),_v(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the second sentence."),_c('br'),_v("\nThis should be on a new line.\nThis will not be in a new line.")])])],1)])]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(23),_v(" "),_c('p',[_v("Markdown text styles:")]),_v(" "),_c('div',{attrs:{"id":"main-example-markdown"}},[_c('div',[_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")])])])],1)])]),_v(" "),_c('p',[_v("Additional syntax from GFMD:")]),_v(" "),_c('div',[_m(27),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('s',[_v("Strike through")])])])],1)]),_v(" "),_c('p',[_v("Syntax added by MarkBind:")]),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_m(30),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(",\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',[_m(33),_v(" "),_m(34),_v(" "),_m(35),_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(" "),_m(36),_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(" "),_m(37),_v(" "),_m(38),_v(" "),_m(39)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(40),_v(" "),_c('div',[_m(41),_v(" "),_m(42),_v(" "),_m(43),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested quoteblock")])])])])],1)]),_v(" "),_m(44),_v(" "),_c('div',[_m(45),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_v("\nBlockquote, first paragraph\n"),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_v("\nNested blockquote\n")])])])],1)]),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_m(50)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(51),_v(" "),_m(52),_v(" "),_c('div',[_m(53),_v(" "),_m(54),_v(" "),_m(55),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2"),_c('br'),_v("\nSecond line\n"),_c('ul',[_c('li',[_v("Sub item 1.2.1")])])])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_m(56),_v(" "),_c('div',[_m(57),_v(" "),_m(58),_v(" "),_m(59),_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")])])])]),_v(" "),_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(" "),_m(60),_v(" "),_m(61),_v(" "),_c('div',{attrs:{"id":"main-example-gfmd"}},[_c('div',[_m(62),_v(" "),_m(63),_v(" "),_m(64),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 1\n"),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Sub item 1.1")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Sub item 1.2")])])]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 2")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")])])])],1)])]),_v(" "),_m(65),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_m(66),_v(" "),_m(67),_v(" "),_m(68),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"radio-list",attrs:{"radio-group":"e5b87"}},[_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 1")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 2")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"checked":"","name":"e5b87","type":"radio"}}),_v(" Item 3")])])])])],1)])]),_v(" "),_m(69),_v(" "),_m(70)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(71),_v(" "),_m(72),_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(" "),_m(73),_v(" "),_m(74),_v(" "),_m(75),_v(" "),_m(76),_v(" "),_c('p',[_v("Features:")]),_v(" "),_m(77),_v(" "),_m(78),_v(" "),_c('p',[_v("To enable syntax coloring, specify a language next to the backticks before the fenced code block.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(79),_v(" "),_m(80),_v(" "),_m(81),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_m(82),_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 "),_m(83),_v(" file:")],1),_v(" "),_m(84),_m(85),_v(" "),_c('div',[_m(86),_v(" "),_m(87),_v(" "),_m(88),_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")])])])])],1)]),_v(" "),_c('div',[_m(89),_v(" "),_m(90),_v(" "),_m(91),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)]),_v(" "),_m(92),_v(" "),_c('div',[_m(93),_v(" "),_m(94),_v(" "),_m(95),_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")])])])])],1)]),_v(" "),_m(96),_v(" "),_m(97),_v(" "),_c('div',[_m(98),_v(" "),_m(99),_v(" "),_m(100),_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")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")]),_c('span',[_v("\n")])])])])],1)]),_v(" "),_m(101),_v(" "),_c('p',[_v("You can specify the highlight rules in many different ways, each is detailed as follows:")]),_v(" "),_m(102),_m(103),_v(" "),_m(104),_m(105),_v(" "),_m(106),_v(" "),_c('div',[_m(107),_v(" "),_m(108),_v(" "),_m(109),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_m(110),_v(" "),_c('div',[_m(111),_v(" "),_m(112),_v(" "),_m(113),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", 👍 ❗️ ❌ 🚧"),_c('br'),_v("We support page breaks")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
                        We support page breaks","class":"hljs"}},[_c('span',[_v("\n")])])])])])])],1)]),_v(" "),_m(114),_v(" "),_c('p',[_v("You can also use multiple features together, as shown below.")]),_v(" "),_c('div',[_m(115),_v(" "),_m(116),_v(" "),_m(117),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_m(118),_v(" "),_m(119),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockcopybuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1)]),_v(" "),_c('br'),_v(" "),_m(120),_v(" "),_m(121),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockwrapbuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1)]),_v(" "),_c('br'),_v(" "),_m(122),_v(" "),_m(123),_v(" "),_c('p',[_v("MarkBind can apply syntax-coloring on inline code too.")]),_v(" "),_c('div',[_m(124),_v(" "),_m(125),_v(" "),_m(126),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Consider the XML code "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(","),_c('br'),_v("\nor the java code "),_c('code',{pre:true,attrs:{"class":"hljs inline java"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("static")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("main")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(String[] args)")])])]),_v(".")])])],1)]),_v(" "),_m(127),_v(" "),_m(128),_v(" "),_m(129),_m(130),_v(" "),_m(131)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(132),_v(" "),_m(133),_v(" "),_c('div',[_m(134),_v(" "),_m(135),_v(" "),_m(136),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr'),_v(" "),_c('hr'),_v(" "),_c('hr')])],1)]),_v(" "),_m(137),_v(" "),_c('p',[_v("Add additional classes to modify the style, thickness, and color of a horizontal line.")]),_v(" "),_c('p',[_v("Available style classes:")]),_v(" "),_m(138),_v(" "),_c('div',[_m(139),_v(" "),_m(140),_v(" "),_m(141),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dotted"}),_v(" "),_c('hr',{staticClass:"dashed"}),_v(" "),_c('hr',{staticClass:"double"})])],1)]),_v(" "),_c('p',[_v("Available size classes:")]),_v(" "),_m(142),_v(" "),_c('div',[_m(143),_v(" "),_m(144),_v(" "),_m(145),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"thick"}),_v(" "),_c('hr',{staticClass:"thick-1"}),_v(" "),_c('hr',{staticClass:"thick-2"}),_v(" "),_c('hr',{staticClass:"thick-3"})])],1)]),_v(" "),_c('p',[_v("Available color classes (use any of the available Bootstrap border color classes):")]),_v(" "),_m(146),_v(" "),_c('div',[_m(147),_v(" "),_m(148),_v(" "),_m(149),_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',[_m(150),_v(" "),_m(151),_v(" "),_m(152),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dashed thick-3"}),_v(" "),_c('hr',{staticClass:"double border-secondary"}),_v(" "),_c('hr',{staticClass:"dotted thick-1 border-primary"})])],1)]),_v(" "),_m(153),_v(" "),_m(154)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(155),_v(" "),_c('p',[_v("Basic style:")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(156),_v(" "),_m(157),_v(" "),_m(158),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])]),_v(" "),_m(159),_v(" "),_c('div',[_m(160),_v(" "),_m(161),_v(" "),_m(162),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)]),_v(" "),_m(163),_v(" "),_m(164),_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',[_m(165),_v(" "),_m(166),_v(" "),_m(167),_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(" "),_m(168),_v(" "),_c('div',{attrs:{"id":"intraSiteLinks"}},[_c('p',[_v("Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.")]),_v(" "),_m(169),_v(" "),_c('div',{staticClass:"indented"},[_m(170),_v(" "),_m(171),_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(" "),_m(172),_v(" "),_c('div',{staticClass:"indented"},[_m(173),_v(" "),_m(174),_v(" "),_m(175),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("To ensure that links in the "),_c('code',{pre:true},[_v("_markbind/")]),_v(" folder work correctly across the entire site, they should be written as absolute paths, prepended with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(".")])])],1),_v(" "),_m(176),_v(" "),_c('div',{staticClass:"indented"},[_m(177),_v(" "),_m(178),_v(" "),_m(179),_v(" "),_m(180),_m(181),_v(" "),_m(182),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Relative links to resources (e.g. images, hrefs) should be valid "),_c('strong',[_v("relative to the file where the link is defined")]),_v(".")]),_v(" "),_c('p',[_v("In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" is in the same directory as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("subsite.md")]),_v(". Thus, the correct path is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" and not "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/image.png")]),_v(".")])])],1),_v(" "),_m(183),_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")])])])])])],1)],1)]),_v(" "),_m(184),_v(" "),_m(185)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(186),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_m(187),_v(" "),_m(188),_v(" "),_m(189),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-45-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-45-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-45-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-45-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-45-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-45-3"}},[_v("[3]")])])])],1)])],1)])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Normal footnotes won't work when used inside the attributes of MarkBind components!\n"),_c('br'),_v("\nFor example, it won't work in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" attribute of "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#panels"}},[_v("panels")]),_v(".")])]),_v(" "),_m(190),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_v("\n1 + 1 = 2 ^[Math]\n")])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(191),_v(" "),_c('div',[_m(192),_v(" "),_m(193),_v(" "),_m(194),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n URLs can be specified as relative references. More info in: "),_c('i',[_c('a',{attrs:{"href":"#intraSiteLinks"}},[_v("Intra-Site Links")])])]),_v(" "),_m(195),_v(" "),_m(196),_v(" "),_m(197),_v(" "),_m(198),_v(" "),_c('div',[_m(199),_v(" "),_m(200),_v(" "),_m(201),_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(" "),_m(202),_v(" "),_m(203),_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',[_m(204),_v(" "),_m(205),_v(" "),_m(206),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("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',[_m(207),_v(" "),_m(208),_v(" "),_m(209),_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('hr'),_v(" "),_c('div',[_m(210),_v(" "),_m(211),_v(" "),_m(212),_v(" "),_c('div',[_m(213),_v(" "),_m(214),_v(" "),_m(215),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',{staticClass:"text-success",attrs:{"id":"attribute-example"}},[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\nby leaving a space before '{'")]),_v(" "),_c('h4',{staticClass:"text-info",attrs:{"id":"heading-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-2"}}),_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_m(216),_v(" "),_m(217),_v(" "),_c('div',[_m(218),_v(" "),_m(219),_v(" "),_m(220),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"alert-info"},[_c('li',{staticClass:"text-success",attrs:{"id":"list-item-id"}},[_v("Apply to the list item itself like so\n"),_c('ul',{staticClass:"bg-light"},[_c('li',{staticClass:"text-danger"},[_v("Curly groups after newlines apply to the closest nested list")])])]),_v(" "),_c('li',[_v("Curly groups two lines after the last line apply to the top most list")])])])],1)]),_v(" "),_m(221),_v(" "),_m(222),_v(" "),_m(223),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nFormatting features listed above this section support this syntax for attributes, classes and identifiers.\nThose below this section do not.\n")]),_v(" "),_m(224),_v(" "),_m(225)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(226),_v(" "),_c('div',[_m(227),_v(" "),_m(228),_v(" "),_m(229),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])])],1)]),_v(" "),_m(230),_v(" "),_m(231),_v(" "),_m(232),_v(" "),_m(233)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(234),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(235),_v(" "),_m(236),_v(" "),_m(237),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_m(238),_v(" "),_m(239),_v(" "),_m(240)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(241),_v(" "),_m(242),_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:"fas fa-book",attrs:{"aria-hidden":"true"}}),_v(" by its cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("The syntax for icons has changed, and the earlier "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ prefix_name }}")]),_v(" syntax has been deprecated. "),_c('br'),_v("\nPlease use the new "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":prefix-name:")]),_v(" syntax instead.")])]),_v(" "),_m(243),_v(" "),_m(244),_v(" "),_m(245),_v(" "),_m(246),_v(" "),_m(247),_v(" "),_m(248),_v(" "),_m(249),_v(" "),_c('ol',[_m(250),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Merge a **pull request** :octicon-git-pull-request:")]),_v(" → Merge a "),_c('strong',[_v("pull request")]),_v(" "),_c('svg',{staticClass:"octicon octicon-git-pull-request",attrs:{"version":"1.1","width":"16","height":"16","viewBox":"0 0 16 16","aria-hidden":"true"}},[_c('path',{attrs:{"fill-rule":"evenodd","d":"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"}})])]),_v(" "),_m(251),_v(" "),_m(252)]),_v(" "),_m(253),_v(" "),_m(254)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(255),_v(" "),_m(256),_v(" "),_m(257),_v(" "),_c('p',[_v("Here are three ways of embedding YouTube videos and one example of how it will look in the page.")]),_v(" "),_c('div',[_m(258),_v(" "),_m(259),_v(" "),_m(260),_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(" "),_m(261),_v(" "),_m(262),_v(" "),_c('p',[_v("Here is an example of embedding a PowerPoint slide deck:")]),_v(" "),_c('div',[_m(263),_v(" "),_m(264),_v(" "),_m(265),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('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(" "),_m(266),_v(" "),_m(267)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(268),_v(" "),_m(269),_v(" "),_m(270),_v(" "),_m(271),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The baseDate follows the format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("YYYY-MM-DD")])]),_v(" "),_c('p',[_v("The default output format is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])]),_v(" "),_m(272),_v(" "),_m(273),_v(" "),_m(274),_v(" "),_m(275),_v(" "),_m(276),_v(" "),_m(277),_v(" "),_m(278),_v(" "),_m(279),_v(" "),_m(280),_v(" "),_m(281),_v(" "),_m(282),_m(283),_v(" "),_m(284),_v(" "),_c('p',[_v("The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.")]),_v(" "),_m(285),_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(" "),_m(286),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_m(287),_v(" "),_c('div',{staticClass:"indented"},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2019-08-12\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MM\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1, 10) }}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('br')])])],1),_v(" "),_m(288),_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('hr'),_v(" "),_c('div',[_m(289),_v(" "),_m(290),_v(" "),_c('p',[_v("Two types of delimiters are supported and can be used interchangeably:")]),_v(" "),_m(291),_v(" "),_c('div',[_m(292),_v(" "),_m(293),_v(" "),_m(294),_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(" "),_m(295),_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")])])])]),_v(" "),_m(296),_v(" "),_m(297),_v(" "),_m(298)],1),_v(" "),_c('hr'),_v(" "),_m(299),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Escaping Characters")])]},proxy:true}])},[_v(" "),_c('div',[_c('h5',{attrs:{"id":"escaping-characters"}},[_c('span',{staticClass:"anchor",attrs:{"id":"escaping-characters"}}),_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Escaping Characters"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#escaping-characters","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("For Markdown syntax: To display a literal character that are normally used for Markdown formatting, add a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(") in front of the character.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\\"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("* item 1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")]),_v(" item 1\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("* item 1")]),_v(" "),_c('ul',[_c('li',[_v("item 1")])])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#escaping-characters"}},[_v("https://www.markdownguide.org/basic-syntax#escaping-characters")])])])])]),_v(" "),_m(300),_v(" "),_c('br'),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('popover',{attrs:{"id":"pop:footnotefn-45-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-45-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-45-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(301),_v(" "),_m(302),_v(" "),_m(303)],1)]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#formatting-contents"}},[_v("Formatting Contents‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#headings"}},[_v("Headings‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#paragraphs"}},[_v("Paragraphs‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#line-breaks"}},[_v("Line Breaks‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#text-styles"}},[_v("Text Styles‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#blockquotes"}},[_v("Blockquotes‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#lists"}},[_v("Lists‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#code"}},[_v("Code‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#horizontal-rules"}},[_v("Horizontal Rules‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#links"}},[_v("Links‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#footnotes"}},[_v("Footnotes‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#images"}},[_v("Images‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#classes-attributes-and-amp-identifiers"}},[_v("Classes, Attributes & Identifiers‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tables"}},[_v("Tables‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#emoji"}},[_v("Emoji‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#icons"}},[_v("Icons‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#embeds"}},[_v("Embeds‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#dates"}},[_v("Dates‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#math-formulae"}},[_v("Math Formulae‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks‎")])])],1)])],1),_v(" "),_m(304)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(6),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(7),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3"}},[_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(" "),_m(9),_v(" "),_m(10),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(11),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(12)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(13),_v(" "),_c('p',[_v("Use one or more empty lines to separate paragraphs.")]),_v(" "),_c('div',[_m(14),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(15),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(16),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(17),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('div',[_m(18),_v(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(21),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the second sentence."),_c('br'),_v("\nThis should be on a new line.\nThis will not be in a new line.")])])],1)])]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(23),_v(" "),_c('p',[_v("Markdown text styles:")]),_v(" "),_c('div',{attrs:{"id":"main-example-markdown"}},[_c('div',[_m(24),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(25),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")])])])],1)])]),_v(" "),_c('p',[_v("Additional syntax from GFMD:")]),_v(" "),_c('div',[_m(27),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(28),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(29),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('s',[_v("Strike through")])])])],1)]),_v(" "),_c('p',[_v("Syntax added by MarkBind:")]),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_m(30),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(31),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(32),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(",\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',[_m(33),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(34),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(35),_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(" "),_m(36),_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(" "),_m(37),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(38),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(39)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(40),_v(" "),_c('div',[_m(41),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(42),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(43),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested quoteblock")])])])])],1)]),_v(" "),_m(44),_v(" "),_c('div',[_m(45),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(46),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(47),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_v("\nBlockquote, first paragraph\n"),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_v("\nNested blockquote\n")])])])],1)]),_v(" "),_m(48),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(49),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(50)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(51),_v(" "),_m(52),_v(" "),_c('div',[_m(53),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(54),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(55),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2"),_c('br'),_v("\nSecond line\n"),_c('ul',[_c('li',[_v("Sub item 1.2.1")])])])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_m(56),_v(" "),_c('div',[_m(57),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(58),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(59),_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(" "),_m(60),_v(" "),_m(61),_v(" "),_c('div',{attrs:{"id":"main-example-gfmd"}},[_c('div',[_m(62),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(63),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(64),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 1\n"),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Sub item 1.1")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Sub item 1.2")])])]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 2")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")])])])],1)])]),_v(" "),_m(65),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_m(66),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(67),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(68),_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',[_m(69),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(70)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(71),_v(" "),_m(72),_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(" "),_m(73),_v(" "),_m(74),_v(" "),_m(75),_v(" "),_m(76),_v(" "),_c('p',[_v("Features:")]),_v(" "),_m(77),_v(" "),_m(78),_v(" "),_c('p',[_v("To enable syntax coloring, specify a language next to the backticks before the fenced code block.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(79),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(80),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(81),_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(" "),_m(82),_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 "),_m(83),_v(" file:")],1),_v(" "),_c('pre',[_m(84),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(85),_v(" "),_c('div',[_m(86),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(87),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(88),_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',[_m(89),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(90),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(91),_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(" "),_m(92),_v(" "),_c('div',[_m(93),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(94),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(95),_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(" "),_m(96),_v(" "),_m(97),_v(" "),_c('div',[_m(98),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(99),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(100),_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")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")]),_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(" "),_m(101),_v(" "),_c('p',[_v("You can specify the highlight rules in many different ways, each is detailed as follows:")]),_v(" "),_m(102),_m(103),_v(" "),_m(104),_m(105),_v(" "),_m(106),_v(" "),_c('div',[_m(107),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(108),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(109),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"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(" "),_m(110),_v(" "),_c('div',[_m(111),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(112),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(113),_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(" "),_m(114),_v(" "),_c('p',[_v("You can also use multiple features together, as shown below.")]),_v(" "),_c('div',[_m(115),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(116),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(117),_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(" "),_m(118),_v(" "),_m(119),_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(" "),_m(120),_v(" "),_m(121),_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(" "),_m(122),_v(" "),_m(123),_v(" "),_c('p',[_v("MarkBind can apply syntax-coloring on inline code too.")]),_v(" "),_c('div',[_m(124),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(125),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(126),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Consider the XML code "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(","),_c('br'),_v("\nor the java code "),_c('code',{pre:true,attrs:{"class":"hljs inline java"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("static")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("main")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(String[] args)")])])]),_v(".")])])],1)]),_v(" "),_m(127),_v(" "),_m(128),_v(" "),_c('pre',[_m(129),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(130),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(131),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(132),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(133)])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(134),_v(" "),_m(135),_v(" "),_c('div',[_m(136),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(137),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(138),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr'),_v(" "),_c('hr'),_v(" "),_c('hr')])],1)]),_v(" "),_m(139),_v(" "),_c('p',[_v("Add additional classes to modify the style, thickness, and color of a horizontal line.")]),_v(" "),_c('p',[_v("Available style classes:")]),_v(" "),_m(140),_v(" "),_c('div',[_m(141),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(142),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(143),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dotted"}),_v(" "),_c('hr',{staticClass:"dashed"}),_v(" "),_c('hr',{staticClass:"double"})])],1)]),_v(" "),_c('p',[_v("Available size classes:")]),_v(" "),_m(144),_v(" "),_c('div',[_m(145),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(146),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(147),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"thick"}),_v(" "),_c('hr',{staticClass:"thick-1"}),_v(" "),_c('hr',{staticClass:"thick-2"}),_v(" "),_c('hr',{staticClass:"thick-3"})])],1)]),_v(" "),_c('p',[_v("Available color classes (use any of the available Bootstrap border color classes):")]),_v(" "),_m(148),_v(" "),_c('div',[_m(149),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(150),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(151),_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',[_m(152),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(153),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(154),_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',[_m(155),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(156)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(157),_v(" "),_c('p',[_v("Basic style:")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(158),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(159),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(160),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])]),_v(" "),_m(161),_v(" "),_c('div',[_m(162),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(163),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(164),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)]),_v(" "),_m(165),_v(" "),_m(166),_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',[_m(167),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(168),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(169),_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(" "),_m(170),_v(" "),_c('div',{attrs:{"id":"intraSiteLinks"}},[_c('p',[_v("Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.")]),_v(" "),_m(171),_v(" "),_c('div',{staticClass:"indented"},[_m(172),_v(" "),_m(173),_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(" "),_m(174),_v(" "),_c('div',{staticClass:"indented"},[_m(175),_v(" "),_m(176),_v(" "),_m(177),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("To ensure that links in the "),_c('code',{pre:true},[_v("_markbind/")]),_v(" folder work correctly across the entire site, they should be written as absolute paths, prepended with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ baseUrl }}")]),_v(".")])])],1),_v(" "),_m(178),_v(" "),_c('div',{staticClass:"indented"},[_m(179),_v(" "),_m(180),_v(" "),_m(181),_v(" "),_c('pre',[_m(182),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(183),_v(" "),_c('pre',[_m(184),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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(" "),_m(185),_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',[_m(186),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(187)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(188),_v(" "),_c('div',{attrs:{"id":"main-example-markbind"}},[_c('div',[_m(189),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(190),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(191),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-45-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-45-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-45-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-45-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-45-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-45-3"}},[_v("[3]")])])])],1)])],1)])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Normal footnotes won't work when used inside the attributes of MarkBind components!\n"),_c('br'),_v("\nFor example, it won't work in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" attribute of "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#panels"}},[_v("panels")]),_v(".")])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(192),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('hr'),_v(" "),_c('div',[_m(193),_v(" "),_c('div',[_m(194),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(195),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(196),_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',[_m(197),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(198),_v(" "),_m(199),_v(" "),_m(200),_v(" "),_c('div',[_m(201),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(202),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(203),_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(" "),_m(204),_v(" "),_m(205),_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',[_m(206),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(207),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(208),_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',[_m(209),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(210),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(211),_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('hr'),_v(" "),_c('div',[_m(212),_v(" "),_m(213),_v(" "),_m(214),_v(" "),_c('div',[_m(215),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(216),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(217),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',{staticClass:"text-success",attrs:{"id":"attribute-example"}},[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\nby leaving a space before '{'")]),_v(" "),_c('h4',{staticClass:"text-info",attrs:{"id":"heading-2"}},[_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_m(218),_v(" "),_m(219),_v(" "),_c('div',[_m(220),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(221),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(222),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"alert-info"},[_c('li',{staticClass:"text-success",attrs:{"id":"list-item-id"}},[_v("Apply to the list item itself like so\n"),_c('ul',{staticClass:"bg-light"},[_c('li',{staticClass:"text-danger"},[_v("Curly groups after newlines apply to the closest nested list")])])]),_v(" "),_c('li',[_v("Curly groups two lines after the last line apply to the top most list")])])])],1)]),_v(" "),_m(223),_v(" "),_m(224),_v(" "),_m(225),_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',[_m(226),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(227)]),_v(" "),_m(228)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(229),_v(" "),_c('div',[_m(230),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(231),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(232),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])])],1)]),_v(" "),_m(233),_v(" "),_m(234),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(235),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(236)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(237),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_m(238),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(239),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(240),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_m(241),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(242),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(243)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(244),_v(" "),_m(245),_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(" "),_m(246),_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(" "),_m(247),_v(" "),_m(248),_v(" "),_m(249),_v(" "),_m(250),_v(" "),_m(251),_v(" "),_m(252),_v(" "),_c('ol',[_m(253),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Merge a **pull request** :octicon-git-pull-request:")]),_v(" → Merge a "),_c('strong',[_v("pull request")]),_v(" "),_c('svg',{staticClass:"octicon octicon-git-pull-request",attrs:{"version":"1.1","width":"16","height":"16","viewBox":"0 0 16 16","aria-hidden":"true"}},[_c('path',{attrs:{"fill-rule":"evenodd","d":"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"}})])]),_v(" "),_m(254),_v(" "),_m(255)]),_v(" "),_m(256),_v(" "),_m(257)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(258),_v(" "),_m(259),_v(" "),_m(260),_v(" "),_c('p',[_v("Here are three ways of embedding YouTube videos and one example of how it will look in the page.")]),_v(" "),_c('div',[_m(261),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(262),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(263),_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(" "),_m(264),_v(" "),_m(265),_v(" "),_c('p',[_v("Here is an example of embedding a PowerPoint slide deck:")]),_v(" "),_c('div',[_m(266),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(267),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(268),_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',[_m(269),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(270)]),_v(" "),_c('hr'),_v(" "),_c('div',[_m(271),_v(" "),_m(272),_v(" "),_m(273),_v(" "),_m(274),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The baseDate follows the format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("YYYY-MM-DD")])]),_v(" "),_c('p',[_v("The default output format is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])]),_v(" "),_m(275),_v(" "),_m(276),_v(" "),_m(277),_v(" "),_m(278),_v(" "),_m(279),_v(" "),_m(280),_v(" "),_m(281),_v(" "),_m(282),_v(" "),_m(283),_v(" "),_m(284),_v(" "),_c('pre',[_m(285),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(286),_v(" "),_m(287),_v(" "),_c('p',[_v("The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.")]),_v(" "),_m(288),_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(" "),_m(289),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_m(290),_v(" "),_c('div',{staticClass:"indented"},[_c('box',[_c('span',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2019-08-12\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MM\" %}")]),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1, 10) }}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('br')])])],1),_v(" "),_m(291),_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('hr'),_v(" "),_c('div',[_m(292),_v(" "),_m(293),_v(" "),_c('p',[_v("Two types of delimiters are supported and can be used interchangeably:")]),_v(" "),_m(294),_v(" "),_c('div',[_m(295),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(296),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(297),_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(" "),_m(298),_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(" "),_m(299),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(300),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(301)],1),_v(" "),_c('hr'),_v(" "),_m(302),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Escaping Characters")])]},proxy:true}])},[_v(" "),_c('div',[_c('h5',{attrs:{"id":"escaping-characters"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Escaping Characters"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#escaping-characters","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("For Markdown syntax: To display a literal character that are normally used for Markdown formatting, add a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(") in front of the character.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\\"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("* item 1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")]),_v(" item 1\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("* item 1")]),_v(" "),_c('ul',[_c('li',[_v("item 1")])])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#escaping-characters"}},[_v("https://www.markdownguide.org/basic-syntax#escaping-characters")])])])])]),_v(" "),_m(303),_v(" "),_c('br'),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('popover',{attrs:{"id":"pop:footnotefn-45-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-45-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-45-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(304),_v(" "),_m(305),_v(" "),_m(306)],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":"#formatting-contents"}},[_v("Formatting Contents‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#headings"}},[_v("Headings‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#paragraphs"}},[_v("Paragraphs‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#line-breaks"}},[_v("Line Breaks‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#text-styles"}},[_v("Text Styles‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#blockquotes"}},[_v("Blockquotes‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#lists"}},[_v("Lists‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#code"}},[_v("Code‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#horizontal-rules"}},[_v("Horizontal Rules‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#links"}},[_v("Links‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#footnotes"}},[_v("Footnotes‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#images"}},[_v("Images‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#classes-attributes-and-amp-identifiers"}},[_v("Classes, Attributes & Identifiers‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tables"}},[_v("Tables‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#emoji"}},[_v("Emoji‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#icons"}},[_v("Icons‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#embeds"}},[_v("Embeds‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#dates"}},[_v("Dates‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#math-formulae"}},[_v("Math Formulae‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks‎")])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(307)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,13 +11,13 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_c('em',[_v("User Guide → Formatting Contents")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"formatting-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"formatting-contents"}}),_v("Formatting Contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#formatting-contents","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"formatting-contents"}},[_v("Formatting Contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#formatting-contents","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind supports a wide collection of Markdown-like basic content formatting syntax")]),_v(" such as text styling, tables, lists, images, links, etc.")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"headings"}},[_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("You can prepend the heading text with 1-6 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#")]),_v(" characters to indicate headings of levels 1-6.")])} @@ -26,7 +26,7 @@ with(this){return _c('p',[_v("You can prepend the heading text with 1-6 "),_c('c with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -38,28 +38,28 @@ with(this){return _c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"ar with(this){return _c('p',[_c('small',[_v("Alternative syntax, more info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#headings"}},[_v("https://www.markdownguide.org/basic-syntax#headings")])])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{attrs:{"id":"heading-level-3-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-2"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-2"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-2","onclick":"event.stopPropagation()"}})])])} +with(this){return _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()"}})])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"paragraphs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"paragraphs"}}),_v("Paragraphs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"paragraphs"}},[_v("Paragraphs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"line-breaks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-breaks"}}),_v("Line Breaks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"line-breaks"}},[_v("Line Breaks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("The preferred way to indicate line breaks is to use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                        ")]),_v(" tag.")])} @@ -68,19 +68,19 @@ with(this){return _c('p',[_v("The preferred way to indicate line breaks is to us with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"text-styles"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"text-styles"}},[_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -89,7 +89,7 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("~~Strike through~~\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("~~Strike through~~\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -98,7 +98,7 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -107,7 +107,7 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#r#Coloured Text##")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#r#Coloured Text##")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -119,19 +119,19 @@ with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticC with(this){return _c('p',[_c('small',[_v("Alternative syntax: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#emphasis"}},[_v("https://www.markdownguide.org/basic-syntax#emphasis")])])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("~~Strike through~~, "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~")])])])]),_v("\n")])])} },function anonymous( ) { with(this){return _c('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")])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"blockquotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"blockquotes"}},[_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -143,7 +143,7 @@ with(this){return _c('p',[_v("Alternatively, you can use "),_c('code',{pre:true, with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -152,13 +152,13 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#blockquotes-1"}},[_v("https://www.markdownguide.org/basic-syntax#blockquotes-1")])])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested blockquote\n")])])} },function anonymous( ) { with(this){return _c('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")])])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"lists"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"lists"}},[_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_c('strong',[_v("Unordered lists:")])])])} @@ -167,7 +167,7 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Unordered lists:")])])]) with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -179,7 +179,7 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Ordered lists:")])])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])])])])} +with(this){return _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("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -194,7 +194,7 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Task lists")])]),_v(" (f with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -206,28 +206,28 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Radio-button lists:")])] with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" item 2.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 4\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 5\n")])])} },function anonymous( ) { with(this){return _c('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")])])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"code"}},[_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"themes"}},[_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Refer "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_v("here")]),_v(" for configuring MarkBind to use a specific theme for the code blocks.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"fenced-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"fenced-code"}}),_v("Fenced Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fenced-code","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"fenced-code"}},[_v("Fenced Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fenced-code","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's "),_c('em',[_v("fenced code blocks")]),_v(".")])} @@ -239,25 +239,25 @@ with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"h with(this){return _c('ul',[_c('li',[_v("Syntax coloring")]),_v(" "),_c('li',[_v("Line numbering")]),_v(" "),_c('li',[_v("Line highlighting")]),_v(" "),_c('li',[_v("Code block headers")])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"syntax-coloring"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"syntax-coloring"}},[_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"line-numbering"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-numbering"}}),_v("Line numbering"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-numbering","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"line-numbering"}},[_v("Line numbering"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-numbering","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-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")])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _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:")])} @@ -266,7 +266,7 @@ with(this){return _c('p',[_v("For each code block, you may also use the "),_c('c with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -275,7 +275,7 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -287,13 +287,13 @@ with(this){return _c('p',[_v("You can have your line numbers start with a value with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"line-highlighting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-highlighting"}}),_v("Line highlighting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-highlighting","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"line-highlighting"}},[_v("Line highlighting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-highlighting","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("You can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" attribute to add highlighting to your code block. Refer to the example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")])} @@ -302,7 +302,7 @@ with(this){return _c('p',[_v("You can add the "),_c('code',{pre:true,attrs:{"cla with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])])} +with(this){return _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'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -320,7 +320,7 @@ with(this){return _c('p',[_v("Not only a single line, MarkBind is also capable o with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Ranged full text highlight")]),_c('br'),_v("Highlights from the first non-whitespace character to the last non-whitespace character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2-4")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged full line highlight")]),_c('br'),_v("Like ranged full text highlight, but highlights the entirety of the lines")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1[:]-5")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("10-12[:]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged character-bounded highlight")]),_c('br'),_v("Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3[2:]-7")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4-9[:17]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged word-bounded highlight")]),_c('br'),_v("Like ranged character-bounded highlight, but starts/ends at an arbitrary word")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start::]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[::end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("16[1::]-20")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("22-24[::3]")])])])])])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"heading"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading"}}),_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"heading"}},[_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("To add a heading, add the attribute "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading")]),_v(" with the heading text as the value, as shown below.")])} @@ -329,7 +329,7 @@ with(this){return _c('p',[_v("To add a heading, add the attribute "),_c('code',{ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -341,67 +341,73 @@ with(this){return _c('p',[_v("Headings support inline Markdown, except for "),_c with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"using-multiple-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-multiple-features"}}),_v("Using multiple features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-multiple-features","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"copy-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"copy-button"}}),_v("Copy button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#copy-button","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"copy-button"}},[_v("Copy button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#copy-button","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("A "),_c('em',[_v("copy")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" plugin:")])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"wrap-text-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text-button"}}),_v("Wrap text button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text-button","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("A "),_c('em',[_v("wrap text")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" plugin:")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"inline-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inline-code"}}),_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"inline-code"}},[_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"syntax-coloring-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring-2"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring-2","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"syntax-coloring-2"}},[_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring-2","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"displaying-content-within-curly-braces-content"}},[_c('span',{staticClass:"anchor",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()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _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(":")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("{% raw %} {{ content }} {% endraw %}\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("{% raw %} {{ content }} {% endraw %}\n")])])} },function anonymous( ) { -with(this){return _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('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])])} +with(this){return _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")])])} },function anonymous( ) { -with(this){return _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('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!")])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})])} +with(this){return _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")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Syntax coloring for inline code: "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(" too!")])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"horizontal-rules"}},[_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Use three or more asterisks ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("***")]),_v("), dashes ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v("), or underscores ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("___")]),_v(") to indicate a horizontal line.")])} @@ -410,13 +416,13 @@ with(this){return _c('p',[_v("Use three or more asterisks ("),_c('code',{pre:tru with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"different-types-of-horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"different-types-of-horizontal-rules"}}),_v("Different Types Of Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#different-types-of-horizontal-rules","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('ul',[_c('li',[_v("dotted")]),_v(" "),_c('li',[_v("dashed")]),_v(" "),_c('li',[_v("double")])])} @@ -425,7 +431,7 @@ with(this){return _c('ul',[_c('li',[_v("dotted")]),_v(" "),_c('li',[_v("dashed") with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.dotted}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dashed}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double}\n")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -437,7 +443,7 @@ with(this){return _c('ul',[_c('li',[_v("thick")]),_v(" "),_c('li',[_v("thick-1") with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -449,7 +455,7 @@ with(this){return _c('ul',[_c('li',[_v("border-info")]),_v(" "),_c('li',[_v("bor with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -458,25 +464,25 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])} },function anonymous( ) { with(this){return _c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('hr')])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"links"}},[_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -488,7 +494,7 @@ with(this){return _c('p',[_c('em',[_v("Reference style")]),_v(" links (i.e., spe with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -497,19 +503,19 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#links"}},[_v("https://www.markdownguide.org/basic-syntax#links")])])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"autolinks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"autolinks"}}),_v("Autolinks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#autolinks","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"autolinks"}},[_v("Autolinks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#autolinks","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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("")])]),_v("markbind.org\n")])])])])} +with(this){return _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("")])]),_v("markbind.org\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"intra-site-links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intra-site-links"}}),_v("Intra-Site Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intra-site-links","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_c('strong',[_v("Auto-conversion of extension")])])])} @@ -545,52 +551,52 @@ with(this){return _c('div',{staticClass:"tree"},[_v("C:\\course"),_c('br'),_v("\ with(this){return _c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/subsite.md")]),_v(", we can refer to the image using:")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("![](image.png)\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("![](image.png)\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", we can also display the image using")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("![](textbook/image.png)\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("![](textbook/image.png)\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_c('strong',[_v("Link validation")])])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")]),_c('span',[_v("\n")]),_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"footnotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"footnotes"}},[_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("**Normal footnotes:**\n")]),_c('span',[_v("Here is a footnote reference,[^1] and another.[^longnote]\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^1]: Here is the footnote. Footnotes will appear at the bottom of the page.\n")]),_c('span',[_v("\n")]),_c('span',[_v("[^longnote]: Here's one with multiple blocks.\n")]),_c('span',[_v(" Subsequent paragraphs are indented to show that they\n")]),_c('span',[_v("belong to the previous footnote.\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"images"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"images"}},[_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("!["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("alt text here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png \"title here\"")]),_v(")\n")])])} },function anonymous( ) { with(this){return _c('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"}})])])])} @@ -605,7 +611,7 @@ with(this){return _c('p',[_v("MarkBind also supports the "),_c('code',{pre:true, with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This image has a width of 100px: ![](https://markbind.org/images/logo-lightbackground.png =100x)\n")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -620,7 +626,7 @@ with(this){return _c('p',[_c('strong',[_v("Auto-linkify")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -629,13 +635,13 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"classes-attributes-and-amp-identifiers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Most markdown syntax above this section supports adding classes, attributes and identifiers\nusing "),_c('a',{attrs:{"href":"https://pandoc.org/MANUAL.html"}},[_v("pandoc")]),_v(" syntax without the need for a wrapper HTML element.")])} @@ -647,7 +653,7 @@ with(this){return _c('p',[_v("The syntax is "),_c('code',{pre:true,attrs:{"class with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -662,7 +668,7 @@ with(this){return _c('p',[_c('strong',[_c('strong',[_v("Unordered and Ordered li with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -677,19 +683,22 @@ with(this){return _c('p',[_v("Refer to the above "),_c('a',{attrs:{"href":"/user with(this){return _c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])])} },function anonymous( ) { -with(this){return _c('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('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")])])])])} +with(this){return _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")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])])} +with(this){return _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")])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"tables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"tables"}},[_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -701,19 +710,19 @@ with(this){return _c('ul',[_c('li',[_v("Colons ("),_c('code',{pre:true,attrs:{"c with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#tables"}},[_v("https://www.markdownguide.org/extended-syntax#tables")])])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])} },function anonymous( ) { with(this){return _c('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')])])])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"emoji"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"emoji"}},[_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -722,37 +731,37 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])} },function anonymous( ) { with(this){return _c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"icons"}},[_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('small',[_c('span',{staticClass:"dimmed"},[_v("Acknowledgement: Font Awesome icons are provided by "),_c('a',{attrs:{"href":"https://fontawesome.com/"}},[_v("Font Awesome")]),_v(" under their "),_c('a',{attrs:{"href":"https://fontawesome.com/license"}},[_v("free license")]),_v(", Glyphicons are provided by "),_c('a',{attrs:{"href":"https://glyphicons.com/"}},[_v("Glyphicons")]),_v(" via "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/"}},[_v("Bootstrap 3")]),_v(", "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("Octicons")]),_v(" are copyright of GitHub, and Material icons are provided by "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("Google Fonts")]),_v(" via "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/material-icons"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("material-icons")]),_v(" by Ravindra Marella")]),_v(" under the "),_c('a',{attrs:{"href":"https://www.apache.org/licenses/LICENSE-2.0.html"}},[_v("Apache license 2.0")]),_v(".")])])])} },function anonymous( ) { -with(this){return _c('h6',{attrs:{"id":"using-font-awesome-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-font-awesome-icons"}}),_v("Using Font Awesome Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-font-awesome-icons","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { -with(this){return _c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from the "),_c('a',{attrs:{"href":"https://fontawesome.com/icons?d=gallery&m=free"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Solid")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-")]),_v(") e.g., "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Regular")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-")]),_v(") e.g., "),_c('span',{staticClass:"far fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-")]),_v("): e.g., "),_c('span',{staticClass:"fab fa-github-alt",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("github-alt")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-github-alt")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert MarkBind name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Create a **branch**")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-code-branch: now!")]),_v(" → Create a "),_c('strong',[_v("branch")]),_v(" "),_c('span',{staticClass:"fas fa-code-branch",attrs:{"aria-hidden":"true"}}),_v(" now!")])])])} +with(this){return _c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from the "),_c('a',{attrs:{"href":"https://fontawesome.com/icons?d=gallery&m=free"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Font Awesome has 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!")])])])} },function anonymous( ) { -with(this){return _c('h6',{attrs:{"id":"using-glyphicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-glyphicons"}}),_v("Using Glyphicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-glyphicons","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h6',{attrs:{"id":"using-glyphicons"}},[_v("Using Glyphicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-glyphicons","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/components/#glyphicons"}},[_v("list of provided glyphicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Move to the right!")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" → Move to the right! "),_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}})])])} },function anonymous( ) { -with(this){return _c('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("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-home:")])])])} +with(this){return _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:")])])])} },function anonymous( ) { -with(this){return _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:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])])} +with(this){return _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"}})])])])} },function anonymous( ) { -with(this){return _c('h6',{attrs:{"id":"using-octicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-octicons"}}),_v("Using Octicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-octicons","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h6',{attrs:{"id":"using-octicons"}},[_v("Using Octicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-octicons","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("list of available Octicons")]),_v(".")])} @@ -764,25 +773,25 @@ with(this){return _c('li',[_v("You may also append "),_c('code',{pre:true,attrs: with(this){return _c('li',[_v("If your background is dark, you may use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octiconlight-*:")]),_v(" to render the icon as white.")])} },function anonymous( ) { -with(this){return _c('h6',{attrs:{"id":"using-material-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-material-icons"}}),_v("Using Material Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-material-icons","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by writing the icon name in "),_c('em',[_v("lowercase letters only")]),_v(", replacing any spaces between the words in the name with "),_c('em',[_v("dashes")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v("), then adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Filled")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-")]),_v(") e.g. "),_c('span',{staticClass:"material-icons align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Outlined")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-")]),_v(") e.g., "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Rounded")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-round align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Sharp")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-sharp align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Two tone")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-two-tone align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-perm-media")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Download from Cloud :mio-cloud-download:")]),_v(" → Download from Cloud "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("cloud_download")])])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"embeds"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"embeds"}},[_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("There are easy ways to embed media content such as YouTube videos and PowerPoint slides")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h6',{attrs:{"id":"embedding-youtube-videos"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-youtube-videos"}}),_v("Embedding YouTube Videos"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-youtube-videos","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -791,25 +800,25 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_v("More media blocks, embedding services and additional options can be found in "),_c('a',{attrs:{"href":"https://github.com/rotorz/markdown-it-block-embed"}},[_v("Markdown-it documentation")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h6',{attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}}),_v("Embedding PowerPoint Slides (using the embed URL from PowerPoint online)"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])} },function anonymous( ) { with(this){return _c('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":""}})])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"dates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"dates"}},[_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("MarkBind supports date formatting and simple calculations")]),_v(" as a Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#filters"}},[_v("filter")]),_v(".")])} @@ -821,7 +830,7 @@ with(this){return _c('p',[_c('strong',[_v("Syntax:")]),_v(" "),_c('code',{pre:tr with(this){return _c('div',{attrs:{"id":"main-example"}},[_c('p',[_v("20 days after 1st Jan 2020:")]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2020-01-01\" | date(\"ddd, Do MMM, YYYY\", 20) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Tue, 21st Jan, 2020")])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"using-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-variables"}}),_v("Using variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-variables","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"using-variables"}},[_v("Using variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-variables","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2020-01-01\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MMM (DD/MM/YYYY)\" %}")])])} @@ -830,34 +839,34 @@ with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1 Jan"),_c('br')])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"custom-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"custom-formatting"}}),_v("Custom formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#custom-formatting","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"custom-formatting"}},[_v("Custom formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#custom-formatting","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" 01 01 2020"),_c('br')])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"adding-days"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-days"}}),_v("Adding days"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-days","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"adding-days"}},[_v("Adding days"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-days","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 0) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1st Jan (01/01/2020)"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Sat 11th Jan (11/01/2020)"),_c('br')])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"page-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-variables"}}),_v("Page variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-variables","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"nunjucks-variables"}},[_v("Nunjucks variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nunjucks-variables","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("page variables")]),_v(" for convenience.")])} +with(this){return _c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("Nunjucks variables")]),_v(" for convenience.")])} },function anonymous( ) { -with(this){return _c('p',[_v("Inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variables.md")]),_v(" or referencing page:")])} +with(this){return _c('p',[_v("Inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(" file of a page:")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ date_pagevar | date(format2) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Fri 6th Mar (06/03/2020) "),_c('br')])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"advanced-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-formatting"}}),_v("Advanced Formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-formatting","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"advanced-formatting"}},[_v("Advanced Formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-formatting","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Default format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])} @@ -872,7 +881,7 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"math-formulae"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"math-formulae"}},[_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("MarkBind supports typesetting TeX math equations. "),_c('a',{attrs:{"href":"https://katex.org"}},[_v("KaTeX")]),_v(" is used as a fast math renderer.")])} @@ -884,7 +893,7 @@ with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inl with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -896,13 +905,13 @@ with(this){return _c('p',[_v("Additional delimiters are possible by enabling the with(this){return _c('p',[_c('small',[_v("More info on allowed symbols: "),_c('a',{attrs:{"href":"https://katex.org/docs/support_table.html"}},[_v("https://katex.org/docs/support_table.html")])])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\n")]),_c('span',[_v("Solve the following simultaneous equations:\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[ 3x + y = 11 \\] (1)\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\[\\frac{2x}{3} + \\frac{2y}{3} = 8\\] (2)\n")]),_c('span',[_v("\n")]),_c('span',[_v("Euler's equation \\( e^{i\\pi}+1=0 \\) is a beautiful equation.\n")]),_c('span',[_v("\n")])])} },function anonymous( ) { with(this){return _c('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)])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"relevant-tips-and-amp-tricks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"relevant-tips-and-amp-tricks"}}),_v("Relevant Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#relevant-tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"relevant-tips-and-amp-tricks"}},[_v("Relevant Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#relevant-tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("MarkBind Syntax Overview")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingComponents.html"}},[_c('span',[_c('span',[_v("Using Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} @@ -917,6 +926,6 @@ with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-45-2"}},[ with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-45-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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/fullSyntaxReference.html b/userGuide/fullSyntaxReference.html index 6949948..766ca5a 100644 --- a/userGuide/fullSyntaxReference.html +++ b/userGuide/fullSyntaxReference.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Full Syntax Reference - + + MarkBind - User Guide: Full Syntax Reference @@ -14,8 +12,7 @@ - - + @@ -23,14 +20,39 @@ const baseUrl = '' -

                        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.

                        +note.

                        + diff --git a/userGuide/fullSyntaxReference.page-vue-render.js b/userGuide/fullSyntaxReference.page-vue-render.js index 6b0db50..0d36d7b 100644 --- a/userGuide/fullSyntaxReference.page-vue-render.js +++ b/userGuide/fullSyntaxReference.page-vue-render.js @@ -1,22 +1,22 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"annotations"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"annotations"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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("\"33%\"")]),_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 33% 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("\"66%\"")]),_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 66% 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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"This point is 25% from the left and 25% from the top"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"This point is 50% from the left and 25% from the top","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"This point is 75% from the left and 25% from the top","header":"This has a header"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"This point is 33% from the left and 50% from the top","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"This point is 66% from the left and 50% from the top","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"This point is 25% from the left and 75% from the top","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"This point is 50% from the left and 75% from the top","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"This point is 75% from the left and 75% from the top","fontSize":"30","label":"3"}})],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")])])])]),_v(" "),_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%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Popover on the left","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Popover on the right","placement":"right"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom","trigger":"hover focus"}})],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")])])])]),_v(" "),_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%","content":"There is only text when you click me","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Clicking on this does nothing","label":"2","legend":"bottom","header":"Headers are displayed as well"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"There is text at both locations","label":"3","legend":"both","header":"Headers are displayed at both positions"}})],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("\"https://markbind.org/userGuide/diagrams/object.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")])])])]),_v(" "),_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":"https://markbind.org/userGuide/diagrams/object.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"Class inheritance","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"Aggregation","color":"blue","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow","legend":"both"}})],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("\"https://markbind.org/userGuide/diagrams/sequence.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")])])])]),_v(" "),_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":"https://markbind.org/userGuide/diagrams/sequence.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"35%","y":"18.5%","content":"Operation is invoked","header":"Operation","opacity":"0.2","size":"30"}}),_v(" "),_c('a-point',{attrs:{"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"}}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","content":"Return control and possibly some return value","header":"Return Value","opacity":"0.2","size":"30","color":"blue"}})],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.")])]),_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.")])]),_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(".")])]),_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("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_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")])])])]),_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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],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('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers"}}),_c('strong',[_v("Classes, Attributes & Identifiers")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"classes-attributes-and-amp-identifiers-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers-2"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Most markdown syntax above this section supports adding classes, attributes and identifiers\nusing "),_c('a',{attrs:{"href":"https://pandoc.org/MANUAL.html"}},[_v("pandoc")]),_v(" syntax without the need for a wrapper HTML element.")]),_v(" "),_c('p',[_v("The syntax is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{.class-name attribute=\"value\" attribute=value #id}")]),_v(", which is placed at different locations depending\non the type of markdown.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\n")]),_c('span',[_v("by leaving a space before '{' {.text-success #attribute-example}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#### heading {.text-info}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Apply the same to inline markdown (eg. bold text) by\n")]),_c('span',[_v("omitting the "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**space**")]),_v("{.text-primary .bg-light header=\"attributes example\"}\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',{staticClass:"text-success",attrs:{"id":"attribute-example"}},[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\nby leaving a space before '{'")]),_v(" "),_c('h4',{staticClass:"text-info",attrs:{"id":"heading"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading"}}),_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_c('p',{staticClass:"mb-4"},[_v("Some other types of markdown have "),_c('strong',[_v("different placements")]),_v(" of the curly group "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{...}")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered and Ordered lists")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Apply to the list item itself like so {.text-success #list-item-id}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Curly groups after newlines apply to the closest nested list {.text-danger}\n")]),_c('span',[_v("{.bg-light}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Curly groups two lines after the last line apply to the top most list\n")]),_c('span',[_v("\n")]),_c('span',[_v("{.alert-info}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"alert-info"},[_c('li',{staticClass:"text-success",attrs:{"id":"list-item-id"}},[_v("Apply to the list item itself like so\n"),_c('ul',{staticClass:"bg-light"},[_c('li',{staticClass:"text-danger"},[_v("Curly groups after newlines apply to the closest nested list")])])]),_v(" "),_c('li',[_v("Curly groups two lines after the last line apply to the top most list")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Fenced code blocks")])])]),_v(" "),_c('p',[_v("Refer to the above "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#line-numbering"}},[_v("section")]),_v("!")]),_v(" "),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nFormatting features listed above this section support this syntax for attributes, classes and identifiers.\nThose below this section do not.\n")]),_v(" "),_c('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('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('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"badges"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"badges"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges"}}),_c('strong',[_v("Badges")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"badges-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges-2"}}),_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_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',[_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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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")])])])]),_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"}},[_c('span',{staticClass:"anchor",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('span',{staticClass:"anchor",attrs:{"id":"blockquotes"}}),_c('strong',[_v("Blockquotes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"blockquotes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes-2"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("Normal text\n")]),_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested quoteblock\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested quoteblock")])])])])],1)]),_v(" "),_c('p',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                        ")]),_v(" tags:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Normal text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Blockquote, first paragraph\n")]),_c('span',[_v("\n")]),_c('span',[_v("Second paragraph\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Nested blockquote\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_v("\nBlockquote, first paragraph\n"),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_v("\nNested blockquote\n")])])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#blockquotes-1"}},[_v("https://www.markdownguide.org/basic-syntax#blockquotes-1")])])]),_v(" "),_c('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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"boxes"}}),_c('strong',[_v("Boxes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"boxes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes-2"}}),_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Boxes come with different built-in types.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" important\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#### Header :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use **markdown** here! :pizza:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header"}}),_v("Header 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")]),_v(" "),_c('box',{attrs:{"type":"warning","dismissible":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("You can use "),_c('strong',[_v("markdown")]),_v(" here! 🍕")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("The built in types can be colored.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" primary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" secondary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" danger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" dark\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a light color scheme for boxes")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" default light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" info light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" success light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" important light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"light":""}},[_v("\n default light\n")]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_v("\n info light\n")]),_v(" "),_c('box',{attrs:{"type":"warning","light":""}},[_v("\n warning light\n")]),_v(" "),_c('box',{attrs:{"type":"success","light":""}},[_v("\n success light\n")]),_v(" "),_c('box',{attrs:{"type":"important","light":""}},[_v("\n important light\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","light":""}},[_v("\n wrong light\n")]),_v(" "),_c('box',{attrs:{"type":"tip","light":""}},[_v("\n tip light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""}},[_v("\n definition light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n definition light with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a seamless style of boxes")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("As "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(" are mutually exclusive styles, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" takes priority over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(".")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" default seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" info seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" important seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible definition seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"seamless":""}},[_v("\n default seamless\n")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_v("\n info seamless\n")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\n warning seamless\n")]),_v(" "),_c('box',{attrs:{"type":"success","seamless":""}},[_v("\n success seamless\n")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_v("\n important seamless\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","seamless":""}},[_v("\n wrong seamless\n")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n tip seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":"","dismissible":""}},[_v("\n dismissible definition seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown-2"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown-2","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n success seamless with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can further customize the Box's appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#ffca6a\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"grey\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-left-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#8b5a01\"")]),_v(">")]),_v("\n")]),_c('span',[_v("default type, styled as an orange box with a brown left border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("info, with a custom markdown rocket icon and `red` colored text.\n")]),_c('span',[_v("\n")]),_c('span',[_v("You can use any inline markdown in the `icon` property.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"background-color":"#ffca6a","border-color":"grey","border-left-color":"#8b5a01"}},[_v("\ndefault type, styled as an orange box with a brown left border\n")]),_v(" "),_c('box',{attrs:{"type":"info","color":"red"},scopedSlots:_u([{key:"icon",fn:function(){return [_v("🚀")]},proxy:true}])},[_v(" "),_c('p',[_v("info, with a custom markdown rocket icon and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(" colored text.")]),_v(" "),_c('p',[_v("You can use any inline markdown in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" property.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can remove the background, icon and borders of preset styles.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-icon")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-background")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success box without a tick icon and backgound\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-border")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition type box, light style without border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"no-icon":"","no-background":"","type":"success"}},[_v("\n success box without a tick icon and backgound\n")]),_v(" "),_c('box',{attrs:{"no-border":"","type":"definition","light":""}},[_v("\n definition type box, light style without border\n")])],1)],1)]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Note")])]},proxy:true}])},[_v(" "),_c('p',[_v("Custom styles "),_c('strong',[_v("(")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("background-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" "),_c('strong',[_v(")")]),_v(" as introduced in the previous section, takes precedence over the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-background")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-border")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-icon")]),_v(" attributes.")])]),_v(" "),_c('p',[_c('strong',[_v("You can also use icons, resize them and change their color accordingly.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"type":"success"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_v(" "),_c('box',{attrs:{"type":"warning","icon-size":"2x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_v(" "),_c('box',{attrs:{"type":"definition","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_v(" "),_c('box',{attrs:{"type":"info","icon-color":"red","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("background-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-left-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Overrides border-color for the left border.")])]),_v(" "),_c('tr',[_c('td',[_v("color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the text.")])]),_v(" "),_c('tr',[_c('td',[_v("dismissible")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Adds a button to close the box to the top right corner.")])]),_v(" "),_c('tr',[_c('td',[_v("icon"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Inline MarkDown text of the icon displayed on the left.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Resizes the icon. Supports integer-scaling of the icon dimensions e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4x")]),_v(", etc.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the icon.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Markdown text of the box header.")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("important")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("wrong")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("definition")]),_v(", or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("theme")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("secondary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(" or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("light")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a light color scheme for the box.")])]),_v(" "),_c('tr',[_c('td',[_v("seamless")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a seamless style for the box. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" is specified, this style will not be activated.")])]),_v(" "),_c('tr',[_c('td',[_v("no-border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes border, except if styled by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("no-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")])])])]),_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":"code"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code"}}),_c('strong',[_v("Code")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"code-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code-2"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h4',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can present formatted code blocks, be it fenced or inline, with either "),_c('strong',[_v("light")]),_v(" or "),_c('strong',[_v("dark")]),_v(" themes. The default is dark "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"fenced-code"}}),_v("Fenced Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fenced-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's "),_c('em',[_v("fenced code blocks")]),_v(".")]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#fenced-code-blocks"}},[_v("https://www.markdownguide.org/extended-syntax#fenced-code-blocks")])])]),_v(" "),_c('p',[_v("Features:")]),_v(" "),_c('ul',[_c('li',[_v("Syntax coloring")]),_v(" "),_c('li',[_v("Line numbering")]),_v(" "),_c('li',[_v("Line highlighting")]),_v(" "),_c('li',[_v("Code block headers")])]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To enable syntax coloring, specify a language next to the backticks before the fenced code block.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_c('h5',{attrs:{"id":"line-numbering"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-numbering"}}),_v("Line numbering"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-numbering","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Line numbers are "),_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('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")])])])]),_v(" "),_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")])])])])],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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)]),_v(" "),_c('p',[_v("You can have your line numbers start with a value other than "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(" with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(" attribute.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function add(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"style":"counter-reset: line 5;","class":"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")])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"line-highlighting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-highlighting"}}),_v("Line highlighting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-highlighting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" attribute to add highlighting to your code block. Refer to the example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")]),_c('span',[_v("\n")])])])])],1)]),_v(" "),_c('p',[_v("The value of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" is composed of "),_c('em',[_v("highlight rules")]),_v(", separated by commas.\nThese rules dictate where and how MarkBind should highlight your code block.")]),_v(" "),_c('p',[_v("You can specify the highlight rules in many different ways, each is detailed as follows:")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Full text highlight")]),_c('br'),_v("Highlights the entirety of the text portion of the line")]),_v(" "),_c('td',[_v("The line numbers as-is (subject to the starting line number set in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Substring highlight")]),_c('br'),_v("Highlights "),_c('em',[_v("all")]),_v(" occurrences of a substring in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[part]")]),_c('br'),_c('br'),_c('em',[_v("Limitations")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" must be wrapped in quotes. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" contains a quote, escape it with a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3['Inventory']")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4['It\\'s designed']")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Character-bounded highlight")]),_c('br'),_v("Highlights a specific range of characters in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start:end]")]),_v(", highlights from character position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Character positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first non-whitespace character, upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("19[1:5]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("30[10:]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("35[:20]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Word-bounded highlight")]),_c('br'),_v("Highlights a specific range of words in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start::end]")]),_v(", highlights from word position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Word positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first word (sequence of non-whitespace characters), upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5[2::4]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("9[1::]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("11[::5]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Full line highlight")]),_c('br'),_v("Highlights the entirety of the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("7[:]")])])])])])]),_c('p',[_v("Not only a single line, MarkBind is also capable of highlighting ranges of lines in various ways. In general, the syntax\nfor range highlighting consists of two single line highlight rules as listed above joined by a dash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Ranged full text highlight")]),_c('br'),_v("Highlights from the first non-whitespace character to the last non-whitespace character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2-4")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged full line highlight")]),_c('br'),_v("Like ranged full text highlight, but highlights the entirety of the lines")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1[:]-5")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("10-12[:]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged character-bounded highlight")]),_c('br'),_v("Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3[2:]-7")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4-9[:17]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged word-bounded highlight")]),_c('br'),_v("Like ranged character-bounded highlight, but starts/ends at an arbitrary word")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start::]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[::end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("16[1::]-20")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("22-24[::3]")])])])])])]),_c('h5',{attrs:{"id":"heading-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-2"}}),_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To add a heading, add the attribute "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading")]),_v(" with the heading text as the value, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('p',[_v("Headings support inline Markdown, except for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" and "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(" text styles.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```{heading=\"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
                        We support page breaks\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", 👍 ❗️ ❌ 🚧"),_c('br'),_v("We support page breaks")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
                        We support page breaks","class":"hljs"}},[_c('span',[_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"using-multiple-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-multiple-features"}}),_v("Using multiple features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-multiple-features","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also use multiple features together, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {highlight-lines=\"2\" heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"copy-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"copy-button"}}),_v("Copy button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#copy-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("copy")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockcopybuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h5',{attrs:{"id":"wrap-text-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text-button"}}),_v("Wrap text button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("wrap text")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockwrapbuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"inline-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inline-code"}}),_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring-2"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can apply syntax-coloring on inline code too.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("Consider the XML code `goo`{.xml},
                        \n")]),_c('span',[_v("or the java code `public static void main(String[] args)`{.java}.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Consider the XML code "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(","),_c('br'),_v("\nor the java code "),_c('code',{pre:true,attrs:{"class":"hljs inline java"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("static")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("main")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(String[] args)")])])]),_v(".")])])],1)]),_v(" "),_c('h5',{attrs:{"id":"displaying-content-within-curly-braces-content"}},[_c('span',{staticClass:"anchor",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:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("```xml\n")]),_c('span',[_v("\n")]),_c('span',[_v(" goo\n")]),_c('span',[_v("\n")]),_c('span',[_v("```\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])]),_v(" "),_c('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('p',[_v("Syntax coloring for inline code: "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(" too!")])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"dates"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"dates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates"}}),_c('strong',[_v("Dates")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dates-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates-2"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("MarkBind supports date formatting and simple calculations")]),_v(" as a Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#filters"}},[_v("filter")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_v("Syntax:")]),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ baseDate | date(format, daysToAdd) }}")])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('p',[_v("20 days after 1st Jan 2020:")]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2020-01-01\" | date(\"ddd, Do MMM, YYYY\", 20) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Tue, 21st Jan, 2020")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The baseDate follows the format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("YYYY-MM-DD")])]),_v(" "),_c('p',[_v("The default output format is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])]),_v(" "),_c('h3',{attrs:{"id":"using-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-variables"}}),_v("Using variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2020-01-01\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MMM (DD/MM/YYYY)\" %}")])]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1 Jan"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"custom-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"custom-formatting"}}),_v("Custom formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#custom-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" 01 01 2020"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"adding-days"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-days"}}),_v("Adding days"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-days","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 0) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1st Jan (01/01/2020)"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Sat 11th Jan (11/01/2020)"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"page-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-variables"}}),_v("Page variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("page variables")]),_v(" for convenience.")]),_v(" "),_c('p',[_v("Inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variables.md")]),_v(" or referencing page:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])])]),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ date_pagevar | date(format2) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Fri 6th Mar (06/03/2020) "),_c('br')]),_v(" "),_c('h3',{attrs:{"id":"advanced-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-formatting"}}),_v("Advanced Formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.")]),_v(" "),_c('p',[_v("Default format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Brief reference")])])]},proxy:true}])},[_v(" "),_c('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('span',{staticClass:"anchor",attrs:{"id":"diagrams"}}),_c('strong',[_v("Diagrams")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"diagrams-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams-2"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use the "),_c('a',{attrs:{"href":"http://plantuml.com/"}},[_v("PlantUML")]),_v(" syntax to add diagrams.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_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 later (required - to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v(" v2.38 or later (optional - you don't need this if you 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 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('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")])])])])]),_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('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")])])])]),_v(" "),_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('p',[_v("Alternatively, a PlantUML diagram can be specified in a separate "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file and inserted into a page using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")])])]),_c('p',[_v("in another file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("puml")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"diagrams/sequence.puml\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("300")]),_v(" />")]),_v("\n")])])])]),_v(" "),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])]),_c('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")])])])]),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"dropdowns"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"dropdowns"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns"}}),_c('strong',[_v("Dropdowns")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dropdowns-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns-2"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("While the main use case for dropdowns is under navbars, they can also be used as top-level components.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Action*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"before\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-info\"")]),_v(">")]),_v("Segmented"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right aligned list\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn-group d-flex mt-3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"group\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-danger w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-warning dropdown-toggle w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Action\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"caret\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-success w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Action")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('dropdown',{attrs:{"type":"primary","menu-align-right":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Right aligned list")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])])]),_v(" "),_c('div',{staticClass:"btn-group d-flex mt-3",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Dropdowns can also be nested within each other to create multi-level submenus.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Multi-Level Dropdown*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Submenu*\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Multi-Level Dropdown")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])]),_v(" "),_c('dropdown',{scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Submenu")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Dropdown can be opened.")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Dropdown button header text. (Supports inline MarkDown syntax)")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(".")])])])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You may refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"embeds"}}),_c('strong',[_v("Embeds")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"embeds-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds-2"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("There are easy ways to embed media content such as YouTube videos and PowerPoint slides")]),_v(".")]),_v(" "),_c('h6',{attrs:{"id":"embedding-youtube-videos"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-youtube-videos"}}),_v("Embedding YouTube Videos"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-youtube-videos","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here are three ways of embedding YouTube videos and one example of how it will look in the page.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-youtube",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}}),_v("Embedding PowerPoint Slides (using the embed URL from PowerPoint online)"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here is an example of embedding a PowerPoint slide deck:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed-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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"emoji"}}),_c('strong',[_v("Emoji")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"emoji-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji-2"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('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('span',{staticClass:"anchor",attrs:{"id":"footnotes"}}),_c('strong',[_v("Footnotes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"footnotes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes-2"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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")])])])]),_v(" "),_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-53-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-53-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-53-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-53-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-53-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-53-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")])])])]),_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('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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(" To 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.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Should you need more expressive formatting, or encounter any issues when formatting the frontmatter, note that the frontmatter follows the "),_c('a',{attrs:{"href":"https://yaml.org/refcard.html"}},[_v("YAML")]),_v(" spec.")])]),_v(" "),_c('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('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('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")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"headings"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings"}}),_c('strong',[_v("Headings")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"headings-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings-2"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can prepend the heading text with 1-6 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#")]),_v(" characters to indicate headings of levels 1-6.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('strong',[_v("MarkBind auto-generates anchors for all headings.")]),_c('br'),_v("\nIf the heading text is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Foo Bar (Goo)")]),_v(", the ID of the generated anchor will be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo-bar-goo")]),_v(" (all lower case, special characters omitted, joined by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('p',[_c('small',[_v("Alternative syntax, more info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#headings"}},[_v("https://www.markdownguide.org/basic-syntax#headings")])])]),_v(" "),_c('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")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{attrs:{"id":"heading-level-3-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-2"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-2"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-2","onclick":"event.stopPropagation()"}})])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"horizontal-rules"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules"}}),_c('strong',[_v("Horizontal Rules")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"horizontal-rules-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules-2"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use three or more asterisks ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("***")]),_v("), dashes ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v("), or underscores ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("___")]),_v(") to indicate a horizontal line.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr'),_v(" "),_c('hr'),_v(" "),_c('hr')])],1)]),_v(" "),_c('h3',{attrs:{"id":"different-types-of-horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"different-types-of-horizontal-rules"}}),_v("Different Types Of Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#different-types-of-horizontal-rules","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Add additional classes to modify the style, thickness, and color of a horizontal line.")]),_v(" "),_c('p',[_v("Available style classes:")]),_v(" "),_c('ul',[_c('li',[_v("dotted")]),_v(" "),_c('li',[_v("dashed")]),_v(" "),_c('li',[_v("double")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.dotted}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dashed}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dotted"}),_v(" "),_c('hr',{staticClass:"dashed"}),_v(" "),_c('hr',{staticClass:"double"})])],1)]),_v(" "),_c('p',[_v("Available size classes:")]),_v(" "),_c('ul',[_c('li',[_v("thick")]),_v(" "),_c('li',[_v("thick-1")]),_v(" "),_c('li',[_v("thick-2")]),_v(" "),_c('li',[_v("thick-3")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.thick}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-1}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-2}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-3}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"thick"}),_v(" "),_c('hr',{staticClass:"thick-1"}),_v(" "),_c('hr',{staticClass:"thick-2"}),_v(" "),_c('hr',{staticClass:"thick-3"})])],1)]),_v(" "),_c('p',[_v("Available color classes (use any of the available Bootstrap border color classes):")]),_v(" "),_c('ul',[_c('li',[_v("border-info")]),_v(" "),_c('li',[_v("border-primary")]),_v(" "),_c('li',[_v("etc")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.border-primary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-info}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-success}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"border-primary"}),_v(" "),_c('hr',{staticClass:"border-secondary"}),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('hr',{staticClass:"border-info"}),_v(" "),_c('hr',{staticClass:"border-success"})])],1)]),_v(" "),_c('p',[_v("Add a 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")])])])]),_v(" "),_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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"icons"}}),_c('strong',[_v("Icons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"icons-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons-2"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('small',[_c('span',{staticClass:"dimmed"},[_v("Acknowledgement: Font Awesome icons are provided by "),_c('a',{attrs:{"href":"https://fontawesome.com/"}},[_v("Font Awesome")]),_v(" under their "),_c('a',{attrs:{"href":"https://fontawesome.com/license"}},[_v("free license")]),_v(", Glyphicons are provided by "),_c('a',{attrs:{"href":"https://glyphicons.com/"}},[_v("Glyphicons")]),_v(" via "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/"}},[_v("Bootstrap 3")]),_v(", "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("Octicons")]),_v(" are copyright of GitHub, and Material icons are provided by "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("Google Fonts")]),_v(" via "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/material-icons"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("material-icons")]),_v(" by Ravindra Marella")]),_v(" under the "),_c('a',{attrs:{"href":"https://www.apache.org/licenses/LICENSE-2.0.html"}},[_v("Apache license 2.0")]),_v(".")])])]),_v(" "),_c('p',[_v("MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.")]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe advantage of font icons over emojis is font icons can be "),_c('em',[_v("styled")]),_v(" to fit your needs. e.g.,")]),_v(" "),_c('ul',[_c('li',[_v("emoji: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the 📖 by its cover! 👎")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}}),_v(" by its cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("The syntax for icons has changed, and the earlier "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ prefix_name }}")]),_v(" syntax has been deprecated. "),_c('br'),_v("\nPlease use the new "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":prefix-name:")]),_v(" syntax instead.")])]),_v(" "),_c('h6',{attrs:{"id":"using-font-awesome-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-font-awesome-icons"}}),_v("Using Font Awesome Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-font-awesome-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from the "),_c('a',{attrs:{"href":"https://fontawesome.com/icons?d=gallery&m=free"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Solid")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-")]),_v(") e.g., "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Regular")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-")]),_v(") e.g., "),_c('span',{staticClass:"far fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-")]),_v("): e.g., "),_c('span',{staticClass:"fab fa-github-alt",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("github-alt")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-github-alt")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert MarkBind name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Create a **branch**")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-code-branch: now!")]),_v(" → Create a "),_c('strong',[_v("branch")]),_v(" "),_c('span',{staticClass:"fas fa-code-branch",attrs:{"aria-hidden":"true"}}),_v(" now!")])])]),_v(" "),_c('h6',{attrs:{"id":"using-glyphicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-glyphicons"}}),_v("Using Glyphicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-glyphicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/components/#glyphicons"}},[_v("list of provided glyphicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Move to the right!")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" → Move to the right! "),_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}})])]),_v(" "),_c('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("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-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:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]),_v(" "),_c('h6',{attrs:{"id":"using-octicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-octicons"}}),_v("Using Octicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-octicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("list of available Octicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Merge a **pull request** :octicon-git-pull-request:")]),_v(" → Merge a "),_c('strong',[_v("pull request")]),_v(" "),_c('svg',{staticClass:"octicon octicon-git-pull-request",attrs:{"version":"1.1","width":"16","height":"16","viewBox":"0 0 16 16","aria-hidden":"true"}},[_c('path',{attrs:{"fill-rule":"evenodd","d":"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"}})])]),_v(" "),_c('li',[_v("You may also append "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("~class-name")]),_v(" to the end of the octicon name to add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"class-name\"")]),_v(" property to your Octicon (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octicon-git-pull-request~icon-large-red:")]),_v(" will generate an Octicon of class "),_c('em',[_v("icon-large-red")]),_v("). You may then add corresponding CSS to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{root}/_markbind/layouts/{layout-name}/styles.css")]),_v(" to customize the style of your Octicon.")]),_v(" "),_c('li',[_v("If your background is dark, you may use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octiconlight-*:")]),_v(" to render the icon as white.")])]),_v(" "),_c('h6',{attrs:{"id":"using-material-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-material-icons"}}),_v("Using Material Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-material-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by writing the icon name in "),_c('em',[_v("lowercase letters only")]),_v(", replacing any spaces between the words in the name with "),_c('em',[_v("dashes")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v("), then adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Filled")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-")]),_v(") e.g. "),_c('span',{staticClass:"material-icons align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Outlined")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-")]),_v(") e.g., "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Rounded")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-round align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Sharp")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-sharp align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Two tone")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-two-tone align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-perm-media")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Download from Cloud :mio-cloud-download:")]),_v(" → Download from Cloud "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("cloud_download")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"images"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"images"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images"}}),_c('strong',[_v("Images")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"images-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images-2"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n URLs can be specified as relative references. More info in: "),_c('i',[_c('a',{attrs:{"href":"#intraSiteLinks"}},[_v("Intra-Site Links")])])]),_v(" "),_c('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")])])])]),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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('span',{staticClass:"anchor",attrs:{"id":"includes"}}),_c('strong',[_v("Includes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_c('em',[_v("User Guide → Reusing Contents → Includes")])])])]),_v(" "),_c('h2',{attrs:{"id":"includes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"includes-2"}}),_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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")])])])]),_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('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/tips.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v(" Tip 1. ...\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("Tip 2. ...\n")])])])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("When setting the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" of a fragment, be careful not to clash with heading anchor IDs auto-generated by MarkBind. For example, if you have a heading "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("## Some Useful Tips")]),_v(", MarkBind will auto-generate an ID "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("some-useful-tips")]),_v(" for that heading.")])]),_v(" "),_c('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")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("optional")])]),_v(" (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("optional")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trim")])]),_v(" (optional): remove leading and trailing whitespace and newlines from the document before including."),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md#epic\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])]),_v(" (optional): omit the 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")])])])])]),_v(" "),_c('h5',{attrs:{"id":"include-inside-an-included-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"include-inside-an-included-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" Inside an Included File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#include-inside-an-included-file","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Although the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute of an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" is given "),_c('em',[_v("relative")]),_v(" to the current directory, it is converted to an "),_c('em',[_v("absolute")]),_v(" value "),_c('em',[_v("before")]),_v(" the "),_c('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('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Review")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../bookFiles/book.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_v("...\n")])])]),_c('p',[_v("The content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" will be included in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(" (via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"../bookFiles/book.md\" />")]),_v(") although "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" are not in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reviewFiles")]),_v(" directory. i.e., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter1.md\" />")]),_v(" will be interpreted as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"c:/mySite/bookFiles/chapter1.md\" />")])])]),_v(" "),_c('p',[_v("In other words, "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" interprets the reused code relative to the original location of the file, not the location in which it is reused.")])]),_v(" "),_c('hr'),_v(" "),_c('h5',{attrs:{"id":"specifying-variables-in-an-include"}},[_c('span',{staticClass:"anchor",attrs:{"id":"specifying-variables-in-an-include"}}),_v("Specifying Variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-variables-in-an-include","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("It is possible to include variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(".")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("article.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# {{ title }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("Author: {{ author }}\n")])])])]),_v(" "),_c('p',[_v("These variables work the same way as variables in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(", except that they only apply to the included file. They allow the included file to be reused as a template, for different source files using different variable values.")]),_v(" "),_c('p',[_v("You can also specify include variables within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag itself by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("var-")]),_v(" prefix.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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")])])])]),_v(" "),_c('p',[_v("If the same variable is defined in a chain of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v("s (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("a.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("b.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("c.md")]),_v("...), variables defined in the top-most "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" will take precedence. Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" variables.")]),_v(" "),_c('hr'),_v(" "),_c('h5',{attrs:{"id":"excluding-files-from-rendering-as-pages"}},[_c('span',{staticClass:"anchor",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('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('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/syntax/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")])])]),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-boilerplate-files"}}),_v("Using Boilerplate Files"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-boilerplate-files","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("If you find 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('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("As you can see, both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files are exactly the same. If we were to use only one of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" it twice in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(", we'll end up with the same chapter content duplicated twice, which is not what we want. In other words, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" contains boilerplate code that needs to be interpreted relative to where it is applied, once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory and once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])]),_v(" "),_c('p',[_v("To use a code fragment as a boilerplate file,")]),_v(" "),_c('ol',[_c('li',[_v("Put the code in a file inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" the file "),_c('em',[_v("as if")]),_v(" a copy of it exists in any directory you want it to applied, but add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag.")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("Consider the line "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter1/chapter.md\" boilerplate />")]),_v(". Note how you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src=\"chapter1/chapter.md\"")]),_v(" 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")])])])]),_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")])])])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"keywords"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"keywords"}},[_c('span',{staticClass:"anchor",attrs:{"id":"keywords"}}),_c('strong',[_v("Keywords")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"keywords-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"keywords-2"}}),_v("Keywords"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{staticClass:"keyword d-none"},[_v("regress")]),_v(" "),_c('span',{staticClass:"keyword d-none"},[_v("regression testing")])]),_v(" "),_c('p',[_c('strong',[_v("You can also specify additional keywords to be indexed under a heading")]),_v(" by tagging the words with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keyword")]),_v(" class. Those keywords will be linked to the heading immediately above it. If you want to index a keyword without rendering it in the page, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("d-none")]),_v(" as a class.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('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")])])])]),_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")])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"line-breaks"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"line-breaks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-breaks"}}),_c('strong',[_v("Line Breaks")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"line-breaks-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-breaks-2"}}),_v("Line Breaks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The preferred way to indicate line breaks is to use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<br>")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the second sentence."),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_v("This should be on a new line.\n")]),_c('span',[_v("This will not be in a new line.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the second sentence."),_c('br'),_v("\nThis should be on a new line.\nThis will not be in a new line.")])])],1)])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"links"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links"}}),_c('strong',[_v("Links")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"links-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links-2"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Basic style:")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])]),_v(" "),_c('p',[_c('em',[_v("Reference style")]),_v(" links (i.e., specify the URL in a separate place):")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#links"}},[_v("https://www.markdownguide.org/basic-syntax#links")])])]),_v(" "),_c('h4',{attrs:{"id":"autolinks"}},[_c('span',{staticClass:"anchor",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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intra-site-links"}}),_v("Intra-Site Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intra-site-links","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"intraSiteLinks"}},[_c('p',[_v("Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Auto-conversion of extension")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("You may link to markdown files using its original extension ("),_c('strong',[_v(".md")]),_v(") as it will automatically be converted to a HTML extension ("),_c('strong',[_v(".html")]),_v(") when the site is generated.")]),_v(" "),_c('p',[_c('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('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", we can also display the image using")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- or -->")]),_v("\n")]),_c('span',[_v("![](textbook/image.png)\n")])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Relative links to resources (e.g. images, hrefs) should be valid "),_c('strong',[_v("relative to the file where the link is defined")]),_v(".")]),_v(" "),_c('p',[_v("In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" is in the same directory as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("subsite.md")]),_v(". Thus, the correct path is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" and not "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/image.png")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Link validation")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links will be validated when generating a site and a warning will be displayed in the console for every link that is invalid.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("Disabling link validation")])]),_v(" "),_c('p',[_v("Link validation is enabled by default.")]),_v(" "),_c('p',[_v("If you wish to only disable validation for a "),_c('strong',[_v("specific link")]),_v(", you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-validation")]),_v(" attribute.")]),_v(" "),_c('p',[_c('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")])])])])])],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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"lists"}}),_c('strong',[_v("Lists")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"lists-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists-2"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.2"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Second line")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" * Sub item 1.2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 2")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 3")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2"),_c('br'),_v("\nSecond line\n"),_c('ul',[_c('li',[_v("Sub item 1.2.1")])])])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Ordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\nYou can also start an ordered list at a particular number by changing the\n"),_c('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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"math-formulae"}}),_c('strong',[_v("Math Formulae")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"math-formulae-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae-2"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind supports typesetting TeX math equations. "),_c('a',{attrs:{"href":"https://katex.org"}},[_v("KaTeX")]),_v(" is used as a fast math renderer.")]),_v(" "),_c('p',[_v("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")])])])]),_v(" "),_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")])])])]),_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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"modals"}}),_c('strong',[_v("Modals")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"modals-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals-2"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Modals are to be used together with the "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" component for activation.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(".")],1),_v(" "),_c('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 "),_c('hr',{staticStyle:{"margin-top":"0.2rem","margin-bottom":"0"}}),_v(" "),_c('small',[_v("modal-footer "),_c('br'),_v(" (deprecated)")])]),_v(" "),_c('td',[_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_v("Slot")])],1),_v(" "),_c('td',[_v("empty")]),_v(" "),_c('td',[_v("Specifying this will override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ok-text")]),_v(" attribute, and the OK button will not render.")])]),_v(" "),_c('tr',[_c('td',[_v("ok-text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text for the OK button.")])]),_v(" "),_c('tr',[_c('td',[_v("effect")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fade")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("id")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Used by "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" to activate the Modal by id."),_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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"nav-bars"}}),_c('strong',[_v("Nav Bars")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nav-bars","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"navbars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navbars"}}),_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Navbar allows visitors of your website to navigate through pages easily.")])]),_v(" "),_c('p',[_c('strong',[_v("Navbars support link highlighting; link highlighting can be customised by specifying rules.")])]),_v(" "),_c('ul',[_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default-highlight-on")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<navbar>")]),_v(" to specify fallback highlight rules.")]),_v(" "),_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("data-highlight")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a>")]),_v(" tags with the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("nav-link")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dropdown-item")]),_v(" to specify individual highlight rules.")])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("default-highlight-on")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(". Specifies link highlight rules for navbars.")])])])])]),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"none\"")]),_v(" attribute and 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\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])]),_c('p',[_c('strong',[_c('strong',[_v("Highlight Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a child of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" is a child of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bear")]),_v(" are siblings.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling or child of the link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar exactly matches link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")])]),_v(" "),_c('td',[_v("No highlighting.")])])])])]),_c('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")])])])]),_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:"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('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('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("layouts")]),_v(" section to find out how to add custom CSS files to a page!")])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"page-navigation-menus"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"page-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus"}}),_c('strong',[_v("Page Navigation Menus")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"page-navigation-menus-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus-2"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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('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('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\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-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")])])])])])],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('span',{staticClass:"anchor",attrs:{"id":"panels"}}),_c('strong',[_v("Panels")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"panels-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels-2"}}),_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is your header for a Panel, click me to expand!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimized")]),_v(" attribute, panel is minimized into an inline block element. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("alt")]),_v(" attribute is for you to specify the minimized block header.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"How to cultivate a tomato plant at home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tomatoes\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("How to cultivate a tomato plant at home")])]},proxy:true},{key:"_alt",fn:function(){return [_c('p',[_v("Tomatoes")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expanded")]),_v(" attribute, you can set the panels to be expanded when loaded in.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Have your readers click less to see the Panel's contents\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Have your readers click less to see the Panel's contents")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expand-headerless")]),_v(" attribute, you can hide the panel header when it is expanded.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This header will only show when the Panel is collapsed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expand-headerless")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expand-headerless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This header will only show when the Panel is collapsed")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("peek")]),_v(" attribute, you may showcase part of your content without expanding the panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Give your readers a peek of the content without expanding Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("peek")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_v(" Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n")]),_c('span',[_v(" facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n")]),_c('span',[_v(" eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n")]),_c('span',[_v(" dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n")]),_c('span',[_v(" pellentesque. \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"peek":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Give your readers a peek of the content without expanding Panel")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n pellentesque. \n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Panel provides many types that change its appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**light type panel (DEFAULT)**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**dark type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**primary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**secondary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**info type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**danger type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**warning type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**success type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**seamless type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**minimal type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("light type panel (DEFAULT)")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("dark type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("primary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("secondary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("info type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("danger type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("warning type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("success type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("seamless type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"minimal","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("minimal type panel")])])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Show/Hide buttons using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-switch")]),_v(", "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"paragraphs"}}),_c('strong',[_v("Paragraphs")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"paragraphs-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"paragraphs-2"}}),_v("Paragraphs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use one or more empty lines to separate paragraphs.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_c('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")])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"pictures"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"pictures"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures"}}),_c('strong',[_v("Pictures")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"pictures-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures-2"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pic")]),_v(" component allows you to add captions below the image.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<pic>")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_c('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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"popovers"}}),_c('strong',[_v("Popovers")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"popovers-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers-2"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-2"}}),_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"content-using-slot"}}),_v("Content using slot"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-slot","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text"}}),_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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")])])])]),_v(" "),_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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes"}}),_c('strong',[_v("Questions and Quizzes")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"questions-and-quizzes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes-2"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',{staticClass:"mt-3"},[_v("Question and quiz components provide an easy way to test readers on the relevant content topic in the page.")]),_v(" "),_c('h4',{attrs:{"id":"introduction"}},[_c('span',{staticClass:"anchor",attrs:{"id":"introduction"}}),_v("Introduction"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#introduction","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Question components ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(") can be one of the following types: "),_c('strong',[_v("MCQ")]),_v(", "),_c('strong',[_v("Checkbox")]),_v(", "),_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")])])])])])]),_v(" "),_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")])])])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"mcq-and-checkbox-questions"}}),_v("MCQ and Checkbox Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#mcq-and-checkbox-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MCQ and checkbox questions are indicated with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"mcq\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"checkbox\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("In both instances, you can include the possible answers using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<q-option>")]),_v(" component, placed anywhere inside the "),_c('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")])])])]),_v(" "),_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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(" Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("correct")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.")])]),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"fill-in-the-blanks-questions"}},[_c('span',{staticClass:"anchor",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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-questions"}}),_v("Text Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Text questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute.\nIf no keywords are provided, the answer will always be marked as correct when placed in quizzes.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by simply looking for the keyword as a pattern in the user's answer!\nThis works well for some\n"),_c('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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute.")]),_v(" "),_c('p',[_v("If you don't want to validate the answer at all, you may also omit the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute entirely. Doing so also always marks the question as correct inside "),_c('a',{attrs:{"href":"#quizzes"}},[_v("quizzes")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Text Question specific Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("keywords")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Comma delimited string of keywords or phrases to match the user's answer against.")])]),_v(" "),_c('tr',[_c('td',[_v("threshold")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0.5")])]),_v(" "),_c('td',[_v("Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.")])]),_v(" "),_c('tr',[_c('td',[_v("answer"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The answer or explanation to display when the user clicks the check button.")])])])])]),_c('box',{attrs:{"type":"important"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Deprecation notes")])]},proxy:true}])},[_v(" "),_c('ul',[_c('li',[_v("The old "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("has-input")]),_v(" attributes translate to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(", but will be deprecated in a future version.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v("s without a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type")]),_v(" (or an unrecognised one) will always be marked correct when placed in quizzes.")])])]),_v(" "),_c('h4',{attrs:{"id":"quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"quizzes"}}),_v("Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quizzes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also build a series of questions out of multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(" components.")]),_v(" "),_c('p',[_v("Simply place the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(" components you want to include into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<quiz>")]),_v(" component! No extra configuration is needed.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true-2"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"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"}},[_c('span',{staticClass:"anchor",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:"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:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"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")])])])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v("\n\n ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\n\n "),_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',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"search-bars"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_c('strong',[_v("Search Bars")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"search-bars-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars-2"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component allows users to search all headings within any page on the site.")]),_v(" "),_c('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('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("algolia")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the searchbar should be connected to "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("Algolia DocSearch")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("data")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Array")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchData\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the search bar's dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("on-hit")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Function")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchCallback\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("placeholder")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The placeholder text shown when no keywords are entered in the search bar.")])])])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])])],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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('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('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus"}}),_c('strong',[_v("Site Navigation Menus")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"site-navigation-menus-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus-2"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])]),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_c('ol',[_c('li',[_v("Format your siteNav as an unordered Markdown list")]),_v(" "),_c('li',[_v("Include it under a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav>")]),_v(" element.")]),_v(" "),_c('li',[_v("(Optional) To make siteNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav-button />")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("<site-nav>\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("</site-nav>\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_c('p',[_v("MarkBind has styles nested lists with additional padding and smaller text sizes up to "),_c('strong',[_v("4")]),_v(" nesting levels.\nBeyond that, you'd have to include your own styles.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])]),_v(" "),_c('p',[_v("You can "),_c('strong',[_v("append the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":expanded:")]),_v(" to a "),_c('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("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"examples"}})])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"tables"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"tables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables"}}),_c('strong',[_v("Tables")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tables-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables-2"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])])],1)]),_v(" "),_c('ul',[_c('li',[_v("Colons ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":")]),_v(") in the 2nd line are optional and they indicates whether to left/center/right-align the values in that column.")]),_v(" "),_c('li',[_v("There is no need to align pipe symbols to be on a vertical line; it's just for aesthetic purposes only.")])]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#tables"}},[_v("https://www.markdownguide.org/extended-syntax#tables")])])]),_v(" "),_c('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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"tabs"}}),_c('strong',[_v("Tabs")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tabs-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs-2"}}),_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tabs")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("active")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")])]),_v(" "),_c('td',[_v("Active Tab index (0-based)")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab is clickable and can be activated.")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab-group")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab Group title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab Group is clickable and can be activated.")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Tabs, tab group and individual tab can be omitted during printing by adding Bootstrap's display property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"d-print-none\"")]),_v(" to the respective components.")])]),_v(" "),_c('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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"tags"}}),_c('strong',[_v("Tags")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tags","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('h3',{attrs:{"id":"plugin-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-tags"}}),_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"toggling-alternative-contents"}}),_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])]),_v(" "),_c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")]),_v(" "),_c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('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")])])])]),_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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_v("Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will be merged with the ones in the 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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tagging-tips"}}),_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<p>")]),_v("s will be shown.")])]),_v(" "),_c('h4',{attrs:{"id":"hiding-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-tags"}}),_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])]),_v(" "),_c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(".")]),_v(" "),_c('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('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_v(" "),_c('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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"text-styles"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"text-styles"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles"}}),_c('strong',[_v("Text Styles")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"text-styles-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles-2"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Markdown text styles:")]),_v(" "),_c('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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"thumbnails"}}),_c('strong',[_v("Thumbnails")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"thumbnails-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails-2"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("thumbnail")]),_v(" component allows you to insert thumbnails using text, images, or icons.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('thumbnail',{attrs:{"circle":"","src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"circle":"","font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('thumbnail',{attrs:{"src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" is specified")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("background")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the background color."),_c('br'),_v(" Accepts any valid CSS background property")])]),_v(" "),_c('tr',[_c('td',[_v("border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the border thickness, type, and color."),_c('br'),_v(" Accepts any valid CSS border property")])]),_v(" "),_c('tr',[_c('td',[_v("circle")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("If this option is enabled, the thumbnail will be circle shaped instead of square")])]),_v(" "),_c('tr',[_c('td',[_v("font-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The color of the text, affects normal text and icons (but not emojis)")])]),_v(" "),_c('tr',[_c('td',[_v("font-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Text size, defaults to half of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("size")]),_v(", affects text, icons and emojis")])]),_v(" "),_c('tr',[_c('td',[_v("size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("100")]),_v(" "),_c('td',[_v("The size of the thumbnail in pixels")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The text to use in the thumbnail, "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#emoji"}},[_v("emojis")]),_v(" and markdown are supported here")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" are specified, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" will take higher priority.")])]),_v(" "),_c('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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"tooltips"}}),_c('strong',[_v("Tooltips")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tooltips-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips-2"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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('span',{staticClass:"anchor",attrs:{"id":"variables"}}),_c('strong',[_v("Variables")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('div',[_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_c('em',[_v("User Guide → Reusing Contents → Variables")])])])]),_v(" "),_c('h2',{attrs:{"id":"variables-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"variables-2"}}),_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"global-variables"}}),_v("Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#global-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Global variables are to be defined in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(" file.")]),_v(" Each variable must have an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" and the value can be any MarkBind-compliant code fragment. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" should not contain "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search-option")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search.options")]),_v(" are not allowed.")]),_v(" "),_c('p',[_v("The variables declared here are available from anywhere in the code base.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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")])])])]),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"built-in-global-variables"}}),_v("Built-in Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#built-in-global-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind also provides a number of built-in variables.")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Variable")]),_v(" "),_c('th',[_v("Notes")]),_v(" "),_c('th',[_c('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: Tue, 14 Feb 2023, 1:33:56 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 4.1.0")])])])])])]),_c('h3',{attrs:{"id":"importing-variables-from-other-external-file-formats"}},[_c('span',{staticClass:"anchor",attrs:{"id":"importing-variables-from-other-external-file-formats"}}),_v("Importing variables from other external file formats"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#importing-variables-from-other-external-file-formats","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also source variables from external files using MarkBind's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext varName = \"filepathToFile\" %}")]),_v(" Nunjucks extension.\nThis is useful if you have external datasets you want to display in your site!")]),_v(" "),_c('p',[_v("To do so, assign a root variable name ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName")]),_v(") to the file path from the "),_c('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('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("JSON file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("JSON File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"JSON File","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"lastUpdated\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"21 November, 2020\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"students\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234567X\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("87")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234123U\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("60")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("3")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A9876543L\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("76")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("2")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ]\n")]),_c('span',[_v("}\n")])])])])])]),_v(" "),_c('br')],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])]),_c('p',[_c('small',[_v("Last updated at 21 November, 2020")])])])],1)]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from CSV files")]},proxy:true}])},[_v(" "),_c('p',[_c('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('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("CSV file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("CSV File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"CSV File","class":"hljs"}},[_c('span',[_v("number,score,rank\n")]),_c('span',[_v("A1234567X,87,1\n")]),_c('span',[_v("A1234123U,60,3\n")]),_c('span',[_v("A9876543L,76,2\n")])])])])])]),_v(" "),_c('br'),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v(" If you do not want to have a header row, you can specify it by appending a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("noHeader")]),_v(" option at the end of the variable declaration. In this example, it should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.csv\", noHeader %}")]),_v(" . Elements have to be accessed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[]")]),_v(" operator (i.e. using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student[0]")]),_v(" to access student number instead of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student.number")]),_v(").")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])])])],1)])],1),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("Only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".csv")]),_v(" files are supported for now.")])]),_v(" "),_c('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('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-53-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-53-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-53-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)]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(4)])} +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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("strong")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_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("\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("</"),_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',{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("<annotate>")]),_v(") are used in conjunction with Annotate\nPoints ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a-point>")]),_v(").")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<annotate>")]),_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("<a-point>")]),_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("<!-- Minimal Point -->")]),_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("<!-- Customize Point Size (default size is 40px) -->")]),_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("<!-- Customize Point Header (default is empty) -->")]),_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("<!-- Customize Point Color (default color is green) -->")]),_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("\"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 33% 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("<!-- Customize Point Opacity (default opacity is 0.3) -->")]),_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("\"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 66% 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("<!-- Customize Point Label (default is empty) -->")]),_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("<!-- Customize Text Color (default color is black) -->")]),_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("<!-- Customize Font Size (default font size is 14) -->")]),_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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"This point is 25% from the left and 25% from the top"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"This point is 50% from the left and 25% from the top","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"This point is 75% from the left and 25% from the top","header":"This has a header"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"This point is 33% from the left and 50% from the top","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"This point is 66% from the left and 50% from the top","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"This point is 25% from the left and 75% from the top","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"This point is 50% from the left and 75% from the top","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"This point is 75% from the left and 75% from the top","fontSize":"30","label":"3"}})],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("<!-- Default Trigger (click)-->")]),_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("<!-- Set Trigger to hover focus -->")]),_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("<!-- Set Popover Placement (click)-->")]),_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("<!-- Both trigger and popover placement hover focus -->")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Popover on the left","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Popover on the right","placement":"right"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom","trigger":"hover focus"}})],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("<a-point>")]),_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("<a-point>")]),_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("<!-- Default Legend (popover only)-->")]),_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("<!-- Set Legend to bottom only (no popover) -->")]),_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("<!-- Set Legend to both -->")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"There is only text when you click me","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Clicking on this does nothing","label":"2","legend":"bottom","header":"Headers are displayed as well"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"There is text at both locations","label":"3","legend":"both","header":"Headers are displayed at both positions"}})],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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"Class inheritance","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"Aggregation","color":"blue","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow","legend":"both"}})],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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"Operation is invoked","header":"Operation","opacity":"0.2","size":"30"}}),_v(" "),_c('a-point',{attrs:{"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"}}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","content":"Return control and possibly some return value","header":"Return Value","opacity":"0.2","size":"30","color":"blue"}})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a-point>")]),_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.")])]),_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.")])]),_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(".")])]),_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("<annotate>")]),_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("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<pic>")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("<annotate src=\"../../images/annotateSampleImage.png\" width=\"500\" alt=\"Sample Image\">\n")]),_c('span',[_v(" <a-point x=\"25%\" y=\"25%\" content=\"Lorem ipsum dolor sit amet\" />\n")]),_c('span',[_v(" <a-point x=\"50%\" y=\"25%\" content=\"Lorem ipsum dolor sit amet\" label=\"1a\"/>\n")]),_c('span',[_v(" <a-point x=\"50%\" y=\"25%\" content=\"Lorem ipsum dolor sit amet\" label=\"1b\" legend=\"both\"/>\n")]),_c('span',[_v("</annotate>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],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("<!-- Use inspect element on the "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**space**")]),_v(" word below to see the \"header\" attribute! -->\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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('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("</"),_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("\"badge bg-secondary\"")]),_v(">")]),_v("Secondary"),_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("\"badge bg-success\"")]),_v(">")]),_v("Success"),_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("\"badge bg-danger\"")]),_v(">")]),_v("Danger"),_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("\"badge bg-warning text-dark\"")]),_v(">")]),_v("Warning"),_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("\"badge bg-info text-dark\"")]),_v(">")]),_v("Info"),_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("\"badge bg-light text-dark\"")]),_v(">")]),_v("Light"),_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("\"badge bg-dark\"")]),_v(">")]),_v("Dark"),_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("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("</"),_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("\"badge rounded-pill bg-secondary\"")]),_v(">")]),_v("Secondary"),_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("\"badge rounded-pill bg-success\"")]),_v(">")]),_v("Success"),_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("\"badge rounded-pill bg-danger\"")]),_v(">")]),_v("Danger"),_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("\"badge rounded-pill bg-warning text-dark\"")]),_v(">")]),_v("Warning"),_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("\"badge rounded-pill bg-info text-dark\"")]),_v(">")]),_v("Info"),_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("\"badge rounded-pill bg-light text-dark\"")]),_v(">")]),_v("Light"),_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("\"badge rounded-pill bg-dark\"")]),_v(">")]),_v("Dark"),_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('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',[_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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_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("</"),_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("button")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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(">")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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("<blockquote>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_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("blockquote")]),_v(">")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("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(">")]),_v("\n")]),_c('span',[_v(" default\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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_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(">")]),_v("\n")]),_c('span',[_v(" default\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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a light color scheme for boxes")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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("<breadcrumb />")]),_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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List<Item> 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("\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")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List<Item>")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")]),_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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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:<br>We support page breaks\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("<foo></foo>")]),_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:<br>We support page breaks","class":"hljs"}},[_c('span',[_v("<foo></foo>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")])]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 `<bar type=\"name\">goo</bar>`{.xml},<br>\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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_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("<foo>\n")]),_c('span',[_v(" <bar type=\"name\">goo</bar>\n")]),_c('span',[_v("</foo>\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("`<bar type=\"name\">goo</bar>`{.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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_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 don't have Graphviz installed (ignore this warning if you are on Windows). 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("<puml width=\"300\">\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("</puml>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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('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("<puml>")]),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])]),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("<puml width=300>\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("</puml>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless","panelId":"dropdowns"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h6',{attrs:{"id":"dropdowns"}},[_c('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("<!--Notice how header attribute supports inline MarkDown-->")]),_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-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("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-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("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-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-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("</"),_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("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-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',[_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("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For segmented dropdown, ignore header and add a \"before\" slot -->")]),_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("</"),_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("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-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',[_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("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Right aligned list -->")]),_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-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',[_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("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Inside a Bootstrap button group -->")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- With slots you can handle some elements as native Bootstrap -->")]),_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("</"),_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("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("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-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("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-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("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-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-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("</"),_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("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-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("ul")]),_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-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-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("</"),_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("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('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("<!-- Nest the dropdown syntax to create dropdown submenus -->")]),_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-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("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-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(" "),_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-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("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-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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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":"hljs-name"}},[_v("a")]),_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(">")])]),_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":"hljs-name"}},[_v("a")]),_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(">")])]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_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":"hljs-name"}},[_v("a")]),_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(">")])]),_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("dropdown")]),_v(">")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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:\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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-56-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-56-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-56-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-56-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-56-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-56-3"}},[_v("[3]")])])])],1)])],1)])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Normal footnotes won't work when used inside the attributes of MarkBind components!\n"),_c('br'),_v("\nFor example, it won't work in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" attribute of "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#panels"}},[_v("panels")]),_v(".")])]),_v(" "),_c('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("<frontmatter>")]),_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("</"),_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('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("</"),_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('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 <include> 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("<title>")]),_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("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(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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',[_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',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimized")]),_v(" attribute, panel is minimized into an inline block element. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("alt")]),_v(" attribute is for you to specify the minimized block header.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<pic>")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_c('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(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tabs")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("active")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")])]),_v(" "),_c('td',[_v("Active Tab index (0-based)")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab is clickable and can be activated.")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab-group")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab Group title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab Group is clickable and can be activated.")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Tabs, tab group and individual tab can be omitted during printing by adding Bootstrap's display property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"d-print-none\"")]),_v(" to the respective components.")])]),_v(" "),_c('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: Sun, 16 Jul 2023, 10:15: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.0.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-56-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-56-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-56-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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"full-syntax-reference"}}),_v("Full Syntax Reference"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#full-syntax-reference","onclick":"event.stopPropagation()"}})])} +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-53-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-56-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} },function anonymous( ) { -with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-53-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.")])])} +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-56-2"}},[_c('p',[_v("Here's one with multiple blocks.")]),_v(" "),_c('p',[_v("Subsequent paragraphs are indented to show that they\nbelong to the previous footnote.")])])} },function anonymous( ) { -with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-53-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.")])])} +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-56-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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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 dba9e26..0093e05 100644 --- a/userGuide/gettingStarted.html +++ b/userGuide/gettingStarted.html @@ -3,10 +3,8 @@ <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="generator" content="MarkBind 4.1.0"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>MarkBind - User Guide - Getting Started - + + MarkBind - User Guide - Getting Started @@ -14,8 +12,7 @@ - - + @@ -23,14 +20,88 @@ 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

                        Quick Start 🚀

                        Initialize a MarkBind site:

                        npx markbind-cli init mySite
+

                        Preview the site:

                        cd mySite
+npx markbind-cli serve
+

                        See usage information:

                        npx markbind-cli --help
+

                        1. Install MarkBind

                        Run the following command to install MarkBind.

                        $ npm install -g markbind-cli
+

                        Next, run the command markbind. If MarkBind has been installed correctly, you should see the MarkBind ascii logo followed by a summary of MarkBind commands as the output.

                        $ markbind
   __  __                  _      ____    _               _
  |  \/  |   __ _   _ __  | | __ | __ )  (_)  _ __     __| |
  | |\/| |  / _` | | '__| | |/ / |  _ \  | | | '_ \   / _` |
@@ -39,14 +110,77 @@
 
  v3.x.y
 Usage: ...
-

                        Alternative installation: as a local dev-dependency with package.json


                        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
-

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

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

                          4. Next steps

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

                          Authoring Contents


                          +

                          Alternative installation: as a local dev-dependency with package.json


                          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
+

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

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

                            4. Next steps

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

                            Authoring Contents


                            + diff --git a/userGuide/gettingStarted.page-vue-render.js b/userGuide/gettingStarted.page-vue-render.js index 39bb11f..1bd57b4 100644 --- a/userGuide/gettingStarted.page-vue-render.js +++ b/userGuide/gettingStarted.page-vue-render.js @@ -1,14 +1,14 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_m(3),_v(" a basic knowledge of "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax/"}},[_v("Markdown")]),_v(" and "),_c('a',{attrs:{"href":"https://www.w3schools.com/html/"}},[_v("HTML")]),_v(" syntax"),_c('br'),_v(" "),_m(4),_v(" a basic knowledge of running CLI commands"),_c('br'),_v(" "),_m(5),_v(" a recent version of "),_c('a',{attrs:{"href":"https://www.npmjs.com/get-npm"}},[_v("npm")]),_v(" installed"),_c('br'),_v(" "),_m(6),_v(" "),_c('a',{attrs:{"href":"https://nodejs.org"}},[_v("Node.js")]),_v(" "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("MarkBind aims to support up to the last maintenance lts release as outlined "),_c('a',{attrs:{"href":"https://nodejs.org/en/about/releases/"}},[_v("here")])]},proxy:true}])},[_v("v14")]),_v(" or higher installed")],1)]),_v(" "),_c('box',{attrs:{"type":"tip"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"quick-start"}},[_c('span',{staticClass:"anchor",attrs:{"id":"quick-start"}}),_v("Quick Start 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quick-start","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Initialize a MarkBind site:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers hljs"}},[_c('span',[_v("npx markbind-cli init mySite\n")])])]),_c('p',[_v("Preview the site:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers hljs"}},[_c('span',[_v("cd mySite\n")]),_c('span',[_v("npx markbind-cli serve\n")])])]),_c('p',[_v("See usage information:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"line-numbers hljs"}},[_c('span',[_v("npx markbind-cli --help\n")])])])]),_v(" "),_m(7),_v(" "),_c('p',[_v("Run the following command to install MarkBind.")]),_v(" "),_m(8),_m(9),_v(" "),_m(10),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Alternative installation: as a local dev-dependency with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")])])]},proxy:true}])},[_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("1. Initialize a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file")])])]),_v(" "),_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('em',[_v("If you already have a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file, skip to the next step.")])]),_v(" "),_c('p',[_v("To initialize a npm project in your current working directory, run the following command.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ npm init\n")])])]),_c('p',[_v("You will need to answer the prompts to create a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file.")]),_v(" "),_c('box',{attrs:{"type":"tip","light":""}},[_c('p',[_v("To get a default "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file, run the following command.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ npm init -y\n")])])]),_c('p',[_v("You can always adjust the content of your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" later.")])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("2. Install markbind-cli locally as a dev-dependency")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ npm install markbind-cli --save-dev\n")])])]),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("3. Add scripts in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file")])])]),_v(" "),_c('p',[_v("To make the commands available via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm run")]),_v(", add the following scripts to your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(".")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scripts\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"init\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"markbind init\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"build\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"markbind build\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"serve\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"markbind serve\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"deploy\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"markbind deploy\"")]),_v("\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("You are now ready to run MarkBind commands with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm run xxx")]),_v(" (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm run init")]),_v(" for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(").")]),_v(" "),_c('ul',[_c('li',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npx")]),_v(" to run the commands with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npx markbind-cli xxx")]),_v(" (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npx markbind-cli init")]),_v(" for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(").")])]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("If you are using Git to version control your source files, view the "),_c('a',{attrs:{"href":"/userGuide/gitignoreFile.html"}},[_c('em',[_v("User Guide: .gitignore File")])]),_v(" section for more info.")])])],1),_v(" "),_c('br'),_v(" "),_m(11),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Initializing a new project")]},proxy:true}])},[_v(" "),_c('p',[_v("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., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ markbind init\n")])])]),_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 can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--help")]),_v(" flag to any command to show the help screen. "),_c('br'),_v("\ne.g., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init --help")])])])],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("init")]),_v(" command populates the project with the "),_c('a',{attrs:{"href":"https://markbind-init-typical.netlify.com/"}},[_v("default project template")]),_v(". Refer to "),_c('a',{attrs:{"href":"/userGuide/templates.html"}},[_v("templates")]),_v(" section to learn how to use a different template.")])])],1)]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Starting with an existing project")]},proxy:true}])},[_v(" "),_c('p',[_v("Navigate to the project "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(".")],1)])],1),_v(" "),_m(12),_v(" "),_c('p',[_v("Run the following command in the same directory. It will generate a website from your source files, start a web server, and open a "),_c('trigger',{attrs:{"trigger":"click","for":"modal:quickStart-livePreview"}},[_v("live preview")]),_v(" of your site in your default Browser.")],1),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:quickStart-livePreview"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Live Preview")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("Regeneration of affected content upon any change to "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]},proxy:true}])},[_v("source files")]),_v(", then reloading the updated site in the Browser.")],1)]),_v(" "),_c('li',[_c('p',[_v("Regeneration will also occur upon any modification to attributes in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" with the exception of "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Copying "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("files that don't affect page generation (eg. images), but are used in the site")]},proxy:true}])},[_v("assets")]),_v(" to the site output folder.")],1)])]),_v(" "),_c('p',[_v("Use "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.")])])]),_v(" "),_m(13),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(19)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_m(3),_v(" a basic knowledge of "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax/"}},[_v("Markdown")]),_v(" and "),_c('a',{attrs:{"href":"https://www.w3schools.com/html/"}},[_v("HTML")]),_v(" syntax"),_c('br'),_v(" "),_m(4),_v(" a basic knowledge of running CLI commands"),_c('br'),_v(" "),_m(5),_v(" a recent version of "),_c('a',{attrs:{"href":"https://www.npmjs.com/get-npm"}},[_v("npm")]),_v(" installed"),_c('br'),_v(" "),_m(6),_v(" "),_c('a',{attrs:{"href":"https://nodejs.org"}},[_v("Node.js")]),_v(" "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("MarkBind aims to support up to the last maintenance lts release as outlined "),_c('a',{attrs:{"href":"https://nodejs.org/en/about/releases/"}},[_v("here")])]},proxy:true}])},[_v("v16")]),_v(" or higher installed")],1)]),_v(" "),_c('box',{attrs:{"type":"tip"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"quick-start"}},[_v("Quick Start 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quick-start","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Initialize a MarkBind site:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("npx markbind-cli init mySite\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("Preview the site:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("cd mySite\n")]),_c('span',[_v("npx markbind-cli serve\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 usage information:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("npx markbind-cli --help\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(7),_v(" "),_c('p',[_v("Run the following command to install MarkBind.")]),_v(" "),_c('pre',[_m(8),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(9),_v(" "),_c('pre',[_m(10),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Alternative installation: as a local dev-dependency with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")])])]},proxy:true}])},[_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("1. Initialize a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file")])])]),_v(" "),_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('em',[_v("If you already have a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file, skip to the next step.")])]),_v(" "),_c('p',[_v("To initialize a npm project in your current working directory, run the following command.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ npm init\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 will need to answer the prompts to create a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file.")]),_v(" "),_c('box',{attrs:{"type":"tip","light":""}},[_c('p',[_v("To get a default "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file, run the following command.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ npm init -y\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 can always adjust the content of your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" later.")])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("2. Install markbind-cli locally as a dev-dependency")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ npm install markbind-cli --save-dev\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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:"large"},[_c('strong',[_v("3. Add scripts in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" file")])])]),_v(" "),_c('p',[_v("To make the commands available via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm run")]),_v(", add the following scripts to your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(".")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"scripts\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"init\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"markbind init\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"build\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"markbind build\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"serve\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"markbind serve\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"deploy\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"markbind deploy\"")]),_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("You are now ready to run MarkBind commands with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm run xxx")]),_v(" (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm run init")]),_v(" for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(").")]),_v(" "),_c('ul',[_c('li',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npx")]),_v(" to run the commands with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npx markbind-cli xxx")]),_v(" (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npx markbind-cli init")]),_v(" for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(").")])]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("If you are using Git to version control your source files, view the "),_c('a',{attrs:{"href":"/userGuide/gitignoreFile.html"}},[_c('em',[_v("User Guide: .gitignore File")])]),_v(" section for more info.")])])],1),_v(" "),_c('br'),_v(" "),_m(11),_v(" "),_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Initializing a new project")]},proxy:true}])},[_v(" "),_c('p',[_v("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., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ markbind init\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_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 can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--help")]),_v(" flag to any command to show the help screen. "),_c('br'),_v("\ne.g., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init --help")])])])],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("init")]),_v(" command populates the project with the "),_c('a',{attrs:{"href":"https://markbind-init-typical.netlify.com/"}},[_v("default project template")]),_v(". Refer to "),_c('a',{attrs:{"href":"/userGuide/templates.html"}},[_v("templates")]),_v(" section to learn how to use a different template.")])])],1)]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Starting with an existing project")]},proxy:true}])},[_v(" "),_c('p',[_v("Navigate to the project "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(".")],1)])],1),_v(" "),_m(12),_v(" "),_c('p',[_v("Run the following command in the same directory. It will generate a website from your source files, start a web server, and open a "),_c('trigger',{attrs:{"trigger":"click","for":"modal:quickStart-livePreview"}},[_v("live preview")]),_v(" of your site in your default Browser.")],1),_v(" "),_c('modal',{attrs:{"large":"","id":"modal:quickStart-livePreview"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Live Preview")]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("Regeneration of affected content upon any change to "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]},proxy:true}])},[_v("source files")]),_v(", then reloading the updated site in the Browser.")],1)]),_v(" "),_c('li',[_c('p',[_v("Regeneration will also occur upon any modification to attributes in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" with the exception of "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#baseurl"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Copying "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("files that don't affect page generation (eg. images), but are used in the site")]},proxy:true}])},[_v("assets")]),_v(" to the site output folder.")],1)])]),_v(" "),_c('p',[_v("Use "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.")])])]),_v(" "),_c('pre',[_m(13),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('br')],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(19)])} }; var pageVueStaticRenderFns = [function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Getting Started")])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"getting-started"}},[_c('span',{staticClass:"anchor",attrs:{"id":"getting-started"}}),_v("Getting Started"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#getting-started","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"getting-started"}},[_v("Getting Started"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#getting-started","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Prerequisites")])])])} @@ -29,13 +29,13 @@ with(this){return _c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"far with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("1. Install MarkBind")])])])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ npm install -g markbind-cli\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ npm install -g markbind-cli\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("Next, run the command "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind")]),_v(". If MarkBind has been installed correctly, you should see the MarkBind ascii logo followed by a summary of MarkBind commands as the output.")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ markbind\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(" v3.x.y\n")]),_c('span',[_v("Usage: ...\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ markbind\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(" v3.x.y\n")]),_c('span',[_v("Usage: ...\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("2. Initialize a new Project (or Start with an existing Project)")])])])} @@ -44,7 +44,7 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("2. I with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("3. Preview the site")])])])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ markbind serve\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("$ markbind serve\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("Do some changes to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(" and save the file. The live preview in the Browser should update automatically to reflect your changes.")])} @@ -62,6 +62,6 @@ with(this){return _c('ol',[_c('li',[_c('strong',[_v("Update the content of your with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/authoringContents.html"}},[_c('span',[_c('span',[_v("Authoring Contents")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/gitignoreFile.html b/userGuide/gitignoreFile.html index 4f73faa..1a66470 100644 --- a/userGuide/gitignoreFile.html +++ b/userGuide/gitignoreFile.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: .gitignore - + + MarkBind - User Guide: .gitignore @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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
 *.log
 npm-debug.log*
@@ -48,9 +55,40 @@
 .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.

                            + diff --git a/userGuide/gitignoreFile.page-vue-render.js b/userGuide/gitignoreFile.page-vue-render.js index 9642d82..fed36b9 100644 --- a/userGuide/gitignoreFile.page-vue-render.js +++ b/userGuide/gitignoreFile.page-vue-render.js @@ -1,13 +1,31 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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(" "),_m(0),_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":"#gitignore"}},[_v(".gitignore‎")])])],1)])],1),_v(" "),_m(1)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_c('p',[_v("Some common files to ignore in a MarkBind project are:")]),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_c('div',{staticClass:"code-block"},[_m(5),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(6),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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":"info"}},[_c('p',[_v("A pre-existing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file will not be overwritten if you are using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init --convert")]),_v(" command.")]),_v(" "),_c('p',[_v("The auto-generation only adds this "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" if it detects that there is none in your root directory.")])])],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":"#gitignore-file"}},[_v(".gitignore File‎")])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(7)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"content-wrapper"}},[_c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v(".gitignore")])]),_v(" "),_c('h1',{attrs:{"id":"gitignore"}},[_c('span',{staticClass:"anchor",attrs:{"id":"gitignore"}}),_v(".gitignore"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#gitignore","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("If you are using "),_c('a',{attrs:{"href":"https://git-scm.com/"}},[_v("Git")]),_v(" to manage your project, you can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file to ignore files that you don't want to be tracked by Git.")]),_v(" "),_c('p',[_v("Some common files to ignore in a MarkBind project are:")]),_v(" "),_c('ul',[_c('li',[_v("log files")]),_v(" "),_c('li',[_v("build output")]),_v(" "),_c('li',[_v("dependencies such as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("node_modules")])])]),_v(" "),_c('p',[_v("The following is a sample "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file for typical MarkBind projects:")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v(".gitignore")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":".gitignore","class":"hljs"}},[_c('span',[_v("# Logs\n")]),_c('span',[_v("logs\n")]),_c('span',[_v("*.log\n")]),_c('span',[_v("npm-debug.log*\n")]),_c('span',[_v("yarn-debug.log*\n")]),_c('span',[_v("yarn-error.log*\n")]),_c('span',[_v("lerna-debug.log*\n")]),_c('span',[_v("_markbind/logs/\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Dependency directories\n")]),_c('span',[_v("node_modules/\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Production build files (change if you output the build to a different directory)\n")]),_c('span',[_v("_site/\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Env\n")]),_c('span',[_v(".env\n")]),_c('span',[_v(".env.local\n")]),_c('span',[_v("\n")]),_c('span',[_v("# IDE configs\n")]),_c('span',[_v(".vscode/\n")]),_c('span',[_v(".idea/*\n")]),_c('span',[_v("*.iml\n")])])])])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])} +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v(".gitignore")])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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('h1',{attrs:{"id":"gitignore-file"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#gitignore-file","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you are using "),_c('a',{attrs:{"href":"https://git-scm.com/"}},[_v("Git")]),_v(" to manage your project, you can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file to ignore files that you don't want to be tracked by Git.")])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_v("log files")]),_v(" "),_c('li',[_v("build output")]),_v(" "),_c('li',[_v("dependencies such as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("node_modules")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The following is the auto-generated "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file for MarkBind projects when "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(" is called:")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v(".gitignore")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":".gitignore","class":"hljs"}},[_c('span',[_v("# Logs\n")]),_c('span',[_v("logs\n")]),_c('span',[_v("*.log\n")]),_c('span',[_v("npm-debug.log*\n")]),_c('span',[_v("yarn-debug.log*\n")]),_c('span',[_v("yarn-error.log*\n")]),_c('span',[_v("lerna-debug.log*\n")]),_c('span',[_v("_markbind/logs/\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Dependency directories\n")]),_c('span',[_v("node_modules/\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Production build files (change if you output the build to a different directory)\n")]),_c('span',[_v("_site/\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Env\n")]),_c('span',[_v(".env\n")]),_c('span',[_v(".env.local\n")]),_c('span',[_v("\n")]),_c('span',[_v("# IDE configs\n")]),_c('span',[_v(".vscode/\n")]),_c('span',[_v(".idea/*\n")]),_c('span',[_v("*.iml\n")])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 5.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/glossary.html b/userGuide/glossary.html index 642f0af..4ca3280 100644 --- a/userGuide/glossary.html +++ b/userGuide/glossary.html @@ -3,10 +3,8 @@ - - - MarkBind - Glossary - + + MarkBind - Glossary @@ -14,8 +12,7 @@ - - + @@ -23,11 +20,36 @@ 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.

                            + diff --git a/userGuide/glossary.page-vue-render.js b/userGuide/glossary.page-vue-render.js index 417f4fa..0ca5a02 100644 --- a/userGuide/glossary.page-vue-render.js +++ b/userGuide/glossary.page-vue-render.js @@ -1,11 +1,14 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_c('div',{attrs:{"id":"live-preview"}},[_m(1),_v(" "),_c('ul',[_c('li',[_c('p',[_v("Regeneration of affected content upon any change to "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]},proxy:true}])},[_v("source files")]),_v(", then reloading the updated site in the Browser.")],1)]),_v(" "),_m(2),_v(" "),_c('li',[_c('p',[_v("Copying "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("files that don't affect page generation (eg. images), but are used in the site")]},proxy:true}])},[_v("assets")]),_v(" to the site output folder.")],1)])]),_v(" "),_m(3)]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(4)])} +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(" "),_m(1),_v(" "),_c('div',{attrs:{"id":"live-preview"}},[_m(2),_v(" "),_c('ul',[_c('li',[_c('p',[_v("Regeneration of affected content upon any change to "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".md")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".njk")]),_v(" files ... anything your content depends on!")]},proxy:true}])},[_v("source files")]),_v(", then reloading the updated site in the Browser.")],1)]),_v(" "),_m(3),_v(" "),_c('li',[_c('p',[_v("Copying "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("files that don't affect page generation (eg. images), but are used in the site")]},proxy:true}])},[_v("assets")]),_v(" to the site output folder.")],1)])]),_v(" "),_m(4)])],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(5)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"live-preview"}},[_c('span',{staticClass:"anchor",attrs:{"id":"live-preview"}}),_v("Live Preview "),_c('span',{staticStyle:{"font-size":"0.8em"}},[_c('span',{staticClass:"fas fa-sync",attrs:{"aria-hidden":"true"}})]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#live-preview","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"glossary"}},[_v("Glossary"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#glossary","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"live-preview"}},[_v("Live Preview "),_c('span',{staticStyle:{"font-size":"0.8em"}},[_c('span',{staticClass:"fas fa-sync",attrs:{"aria-hidden":"true"}})]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#live-preview","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_c('em',[_v("Live preview")])]),_v(" is:")])} @@ -17,6 +20,6 @@ with(this){return _c('li',[_c('p',[_v("Regeneration will also occur upon any mod with(this){return _c('p',[_v("Use "),_c('a',{attrs:{"href":"/userGuide/cliCommands.html#serve-command"}},[_v("the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("serve")]),_v(" command")]),_v(" to launch a live preview.")])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/index.html b/userGuide/index.html index a617801..26b8ee2 100644 --- a/userGuide/index.html +++ b/userGuide/index.html @@ -3,10 +3,8 @@ - - - MarkBind - + + MarkBind @@ -14,8 +12,7 @@ - - + @@ -23,13 +20,28 @@ const baseUrl = '' -
                            + diff --git a/userGuide/index.page-vue-render.js b/userGuide/index.page-vue-render.js index 885a7b7..ad110e8 100644 --- a/userGuide/index.page-vue-render.js +++ b/userGuide/index.page-vue-render.js @@ -1,13 +1,10 @@ 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"}},[_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"sibling-or-child","href":"/userGuide/index.html"}},[_v("USER GUIDE")])])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/showcase.html"}},[_v("SHOWCASE")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"highlight-on":"exact","href":"/about.html"}},[_v("ABOUT")])]),_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_c('span',[_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_m(0),_v(" "),_m(1)])} +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('div',{attrs:{"id":"content-wrapper"}}),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(0)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"flex-body"}},[_c('div',{attrs:{"id":"content-wrapper"}},[_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])])} -},function anonymous( -) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/makingTheSiteSearchable.html b/userGuide/makingTheSiteSearchable.html index 2a14575..dfa9fdc 100644 --- a/userGuide/makingTheSiteSearchable.html +++ b/userGuide/makingTheSiteSearchable.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Making the Site Searchable - + + MarkBind - User Guide: Making the Site Searchable @@ -14,8 +12,7 @@ - - + @@ -23,27 +20,132 @@ 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
 <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}
+
                            <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>
+

                            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


                            + diff --git a/userGuide/makingTheSiteSearchable.page-vue-render.js b/userGuide/makingTheSiteSearchable.page-vue-render.js index 0159d28..02c82ed 100644 --- a/userGuide/makingTheSiteSearchable.page-vue-render.js +++ b/userGuide/makingTheSiteSearchable.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you do not wish to use MarkBind's searchbar (e.g. you have an external service provider), it may be helpful to include the option "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch: false")]),_v(" in your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(". This stops MarkBind from indexing search headings and speeds up building.")])]),_v(" "),_m(5),_v(" "),_c('p',[_v("You can add a search bar component to your website to allow users to search the site.")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',[_c('span',{staticClass:"glyphicon glyphicon-log-in",attrs:{"aria-hidden":"true"}})]),_v(" Using components → "),_c('strong',[_v("Search bars")])])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("algolia")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the searchbar should be connected to "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("Algolia DocSearch")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("data")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Array")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchData\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the search bar's dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("on-hit")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Function")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchCallback\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("placeholder")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The placeholder text shown when no keywords are entered in the search bar.")])])])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])])],1)]),_v(" "),_c('p'),_v(" "),_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_m(9),_v(" "),_m(10),_m(11),_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(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14)]),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_c('p',[_v("MarkBind sites can use Algolia Doc Search services easily via the Algolia plugin. Unlike the built-in search, Algolia provides full-text search. See the panel below for more info.")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',[_c('span',{staticClass:"glyphicon glyphicon-log-in",attrs:{"aria-hidden":"true"}})]),_v(" Using plugins → "),_c('strong',[_v("Algolia")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-algolia"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-algolia"}}),_v("Plugin: Algolia"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-algolia","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin allows you to use "),_c('a',{attrs:{"href":"https://docsearch.algolia.com/docs/what-is-docsearch/"}},[_v("Algolia DocSearch")]),_v(" for your site.")]),_v(" "),_c('p',[_v("To enable it, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia")]),_v(" to your site's plugins, and supply the required options via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(".")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("apiKey")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The API key for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("appId")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The application id for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("indexName")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The index name for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("searchParameters")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Object")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{}")])]),_v(" "),_c('td',[_v("A JSON object specifying the "),_c('a',{attrs:{"href":"https://www.algolia.com/doc/api-reference/search-api-parameters/"}},[_v("Algolia Search Parameters")])])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"apiKey\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25626fae796133dc1e734c6bcaaeac3c\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's api key")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"appId\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"R2IYF7ETH7\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's application id")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"indexName\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docsearch\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's index name")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchParameters\"")]),_v(": { "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"facetFilters\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site:yoursite.com\"")]),_v("] } "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("To connect the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component to Algolia DocSearch, add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia")]),_v(" key.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("algolia")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Alternatively, if you are using a custom search bar, you can assign the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("div")]),_v(" element the id "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-search-input")]),_v(" to connect it to Algolia DocSearch.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia-search-input\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("By default, Algolia DocSearch indexes all content on the page, including content in components that are hidden to the user during the initial render (e.g. Panels). To exclude these content from being indexed, you can add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".algolia-no-index")]),_v(" to the "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/config-file.html#selectors_exclude-optional"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("selectors_exclude")])]),_v(" attribute in your DocSearch configuration.")]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class is automatically added to content hidden by MarkBind's Vue components. You may also add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class to content that you do not want to be indexed by Algolia DocSearch.")])])],1)]),_v(" "),_m(17),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#making-the-site-searchable"}},[_v("Making the Site Searchable‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#search-bars"}},[_v("Search Bars‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#keywords"}},[_v("Keywords‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#including-or-excluding-headings"}},[_v("Including or Excluding Headings‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-external-search-services"}},[_v("Using External Search Services‎")])])])],1)])],1),_v(" "),_m(18)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you do not wish to use MarkBind's searchbar (e.g. you have an external service provider), it may be helpful to include the option "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch: false")]),_v(" in your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(". This stops MarkBind from indexing search headings and speeds up building.")])]),_v(" "),_m(5),_v(" "),_c('p',[_v("You can add a search bar component to your website to allow users to search the site.")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',[_c('span',{staticClass:"glyphicon glyphicon-log-in",attrs:{"aria-hidden":"true"}})]),_v(" Using components → "),_c('strong',[_v("Search bars")])])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("")]),_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('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('p'),_v(" "),_c('div',[_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"indented"},[_m(9),_v(" "),_c('pre',[_m(10),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(11),_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(" "),_m(12),_v(" "),_c('div',{staticClass:"indented"},[_m(13),_v(" "),_c('pre',[_m(14),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(15),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('div',{staticClass:"indented"},[_m(19),_v(" "),_c('pre',[_m(20),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("Equivalently,")]),_v(" "),_c('pre',[_m(21),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_m(22),_v(" "),_c('p',[_v("MarkBind sites can use Algolia Doc Search services easily via the Algolia plugin. Unlike the built-in search, Algolia provides full-text search. See the panel below for more info.")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',[_c('span',{staticClass:"glyphicon glyphicon-log-in",attrs:{"aria-hidden":"true"}})]),_v(" Using plugins → "),_c('strong',[_v("Algolia")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-algolia"}},[_v("Plugin: Algolia"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-algolia","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin allows you to use "),_c('a',{attrs:{"href":"https://docsearch.algolia.com/docs/what-is-docsearch/"}},[_v("Algolia DocSearch")]),_v(" for your site.")]),_v(" "),_c('p',[_v("To enable it, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia")]),_v(" to your site's plugins, and supply the required options via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(".")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("apiKey")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The API key for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("appId")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The application id for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("indexName")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The index name for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("searchParameters")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Object")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{}")])]),_v(" "),_c('td',[_v("A JSON object specifying the "),_c('a',{attrs:{"href":"https://www.algolia.com/doc/api-reference/search-api-parameters/"}},[_v("Algolia Search Parameters")])])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"apiKey\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25626fae796133dc1e734c6bcaaeac3c\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's api key")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"appId\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"R2IYF7ETH7\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's application id")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"indexName\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docsearch\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's index name")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchParameters\"")]),_v(": { "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"facetFilters\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site:yoursite.com\"")]),_v("] } "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 connect the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component to Algolia DocSearch, add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia")]),_v(" key.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("algolia")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("Alternatively, if you are using a custom search bar, you can assign the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("div")]),_v(" element the id "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-search-input")]),_v(" to connect it to Algolia DocSearch.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia-search-input\"")]),_v(">")]),_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('box',{attrs:{"type":"warning"}},[_c('p',[_v("By default, Algolia DocSearch indexes all content on the page, including content in components that are hidden to the user during the initial render (e.g. Panels). To exclude these content from being indexed, you can add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".algolia-no-index")]),_v(" to the "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/config-file.html#selectors_exclude-optional"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("selectors_exclude")])]),_v(" attribute in your DocSearch configuration.")]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class is automatically added to content hidden by MarkBind's Vue components. You may also add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class to content that you do not want to be indexed by Algolia DocSearch.")])])],1)]),_v(" "),_m(23),_v(" "),_c('br')],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":"#making-the-site-searchable"}},[_v("Making the Site Searchable‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#search-bars"}},[_v("Search Bars‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#keywords"}},[_v("Keywords‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#including-or-excluding-headings"}},[_v("Including or Excluding Headings‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-external-search-services"}},[_v("Using External Search Services‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(24)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,7 +11,7 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('em',[_v("User Guide → Making the Site Searchable")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"making-the-site-searchable"}},[_c('span',{staticClass:"anchor",attrs:{"id":"making-the-site-searchable"}}),_v("Making the Site Searchable"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#making-the-site-searchable","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"making-the-site-searchable"}},[_v("Making the Site Searchable"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#making-the-site-searchable","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind comes with an in-built "),_c('em',[_v("site search")]),_v(" facility")]),_v(" with the option to use third-party search services as well.")])])} @@ -20,10 +20,10 @@ with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p', with(this){return _c('p',[_c('strong',[_v("All markdown and HTML headings of levels 1-3 are captured in the search index")]),_v(" by default. You can change this setting using the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#headingindexinglevel"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexLevel")]),_v(" property of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"search-bars"}},[_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"keywords"}},[_c('span',{staticClass:"anchor",attrs:{"id":"keywords"}}),_v("Keywords"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"keywords"}},[_v("Keywords"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"keyword d-none"},[_v("regress")]),_v(" "),_c('span',{staticClass:"keyword d-none"},[_v("regression testing")])])} @@ -35,7 +35,7 @@ with(this){return _c('p',[_c('strong',[_v("You can also specify additional keywo with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("#### Developer Testing\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regression testing"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is good for catching "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword\"")]),_v(">")]),_v("regressions"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("#### Developer Testing\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regression testing"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is good for catching "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword\"")]),_v(">")]),_v("regressions"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"aria-hidden":"true"}})])} @@ -44,21 +44,39 @@ with(this){return _c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"ari with(this){return _c('p',[_c('strong',[_v("You can also set additional keywords to be indexed for an entire page")]),_v(" using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" of that page.")])} },function anonymous( ) { -with(this){return _c('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("")]),_v("\n")]),_c('span',[_v("...\n")])])])])} +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" keywords: regress, regression testing, regressions\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("...\n")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"including-or-excluding-headings"}},[_v("Including or Excluding Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#including-or-excluding-headings","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature")]),_v(" using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".always-index")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".no-index")]),_v(" classes.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you wish to index a specific heading outside the specified "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexLevel")]),_v(", you may add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".always-index")]),_v(" attribute to the heading. Similarly, if you wish for a specific heading inside the specified "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexLevel")]),_v(" not to be indexed, you may add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".no-index")]),_v(" attribute to the heading.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])])])} },function anonymous( ) { -with(this){return _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("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs md"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading outside heading index level that will be indexed {.always-index}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# Heading inside heading index level that will not be indexed {.no-index}")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('div',[_c('h2',{attrs:{"id":"including-or-excluding-headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"including-or-excluding-headings"}}),_v("Including or Excluding Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#including-or-excluding-headings","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("You can specify headings which are to be included or excluded from the index built by MarkBind's built-in search feature")]),_v(" using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".always-index")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".no-index")]),_v(" classes.")]),_v(" "),_c('p',[_v("If you wish to index a specific heading outside the specified "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexLevel")]),_v(", you may add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".always-index")]),_v(" attribute to the heading. Similarly, if you wish for a specific heading inside the specified "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexLevel")]),_v(" not to be indexed, you may add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".no-index")]),_v(" attribute to the heading.")]),_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 md"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading outside heading index level that will be indexed {.always-index}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# Heading inside heading index level that will not be indexed {.no-index}")]),_v("\n")])])]),_c('p',[_v("Equivalently,")]),_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("h6")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"always-index\"")]),_v(">")]),_v(" Heading outside heading index level that will be indexed "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h1")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v(" Heading inside heading index level that will not be indexed "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h6")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"always-index\"")]),_v(">")]),_v(" Heading outside heading index level that will be indexed "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h1")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v(" Heading inside heading index level that will not be indexed "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"using-external-search-services"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-external-search-services"}}),_v("Using External Search Services"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-external-search-services","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"using-external-search-services"}},[_v("Using External Search Services"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-external-search-services","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingPlugins.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Using Plugins")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/themes.html"}},[_c('span',[_c('span',[_v("Themes")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/markBindInTheProjectWorkflow.html b/userGuide/markBindInTheProjectWorkflow.html index 96ca284..0ed45b6 100644 --- a/userGuide/markBindInTheProjectWorkflow.html +++ b/userGuide/markBindInTheProjectWorkflow.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: MarkBind in the Project Workflow - + + MarkBind - User Guide: MarkBind in the Project Workflow @@ -14,8 +12,7 @@ - - + @@ -23,15 +20,40 @@ 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.
                            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


                            + diff --git a/userGuide/markBindInTheProjectWorkflow.page-vue-render.js b/userGuide/markBindInTheProjectWorkflow.page-vue-render.js index feeeb55..2cc308a 100644 --- a/userGuide/markBindInTheProjectWorkflow.page-vue-render.js +++ b/userGuide/markBindInTheProjectWorkflow.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('p',[_v("Here is an example workflow for using MarkBind for both developer documentation and user documentation in a GitHub project:")]),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('p',[_v("A MarkBind conversion involves the following:")]),_v(" "),_m(13),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n Conversion might not work if your project files have existing Nunjucks syntax. \n")]),_v(" "),_c('p',[_v("To convert your existing project, follow these steps:")]),_v(" "),_m(14),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n You only need to run the conversion once. Once you have converted your project, you can proceed to edit it as a normal MarkBind project.\n")]),_v(" "),_m(15),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(16)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('p',[_v("Here is an example workflow for using MarkBind for both developer documentation and user documentation in a GitHub project:")]),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('p',[_v("A MarkBind conversion involves the following:")]),_v(" "),_m(13),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n Conversion might not work if your project files have existing Nunjucks syntax. \n")]),_v(" "),_c('p',[_v("To convert your existing project, follow these steps:")]),_v(" "),_m(14),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n You only need to run the conversion once. Once you have converted your project, you can proceed to edit it as a normal MarkBind project.\n")]),_v(" "),_m(15),_v(" "),_c('br')],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(16)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,19 +11,19 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_c('em',[_v("User Guide → MarkBind in the Project Workflow")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"markbind-in-the-project-workflow"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-in-the-project-workflow"}}),_v("MarkBind in the Project Workflow"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-in-the-project-workflow","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"markbind-in-the-project-workflow"}},[_v("MarkBind in the Project Workflow"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-in-the-project-workflow","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("As "),_c('strong',[_v("MarkBind is especially optimized as a project documentation tool")]),_v(", it integrates well with the workflow of software projects.")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"authoring-workflow"}},[_c('span',{staticClass:"anchor",attrs:{"id":"authoring-workflow"}}),_v("Authoring Workflow"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#authoring-workflow","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"authoring-workflow"}},[_v("Authoring Workflow"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#authoring-workflow","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("While most IDEs provide previews for Markdown files, unless your MarkBind files are using basic Markdown syntax only, you are recommended to launch a "),_c('a',{attrs:{"href":"/userGuide/glossary.html#live-preview"}},[_v("live preview")]),_v(" and check the rendering of the page as you modify the source file.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"github-project-workflow"}},[_c('span',{staticClass:"anchor",attrs:{"id":"github-project-workflow"}}),_v("GitHub Project Workflow"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#github-project-workflow","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"github-project-workflow"}},[_v("GitHub Project Workflow"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#github-project-workflow","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("If you use GitHub for your project, you can "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-github-pages"}},[_v("deploy your site to GitHub pages")]),_v(" easily. You can even set up Travis to automatically deploy your site to GitHub pages whenever a branch in your repo is updated.")])} @@ -32,19 +32,19 @@ with(this){return _c('p',[_v("If you use GitHub for your project, you can "),_c( with(this){return _c('p',[_v("If you are using GitHub Pull Requests as part of your workflow, you can "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-netlify"}},[_v("set up Netlify to show a preview of the site generated from the MarkBind code in the PR")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"using-markbind-for-project-documentation"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-markbind-for-project-documentation"}}),_v("Using MarkBind for Project Documentation"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-markbind-for-project-documentation","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"using-markbind-for-project-documentation"}},[_v("Using MarkBind for Project Documentation"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-markbind-for-project-documentation","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"indented"},[_c('p',[_v("Suppose the main development of the project is done in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("master")]),_v(" branch while product releases are done using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("release")]),_v(" branch.")]),_v(" "),_c('p',[_v("You can keep the user docs in a separate directory (say "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("user-docs")]),_v(") and set up a MarkBind project in that folder. When there is a new release, you can deploy the user-docs site to GitHub Pages for users to read.")]),_v(" "),_c('p',[_v("Similarly, you can keep the dev docs in a separate directory (say "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dev-docs")]),_v(") and set up Netlify to deploy the site when there is an update to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("master")]),_v(" branch; that way, developers can see the latest version of dev-docs via the Netlify site.")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"converting-existing-project-documentation-wiki"}},[_c('span',{staticClass:"anchor",attrs:{"id":"converting-existing-project-documentation-wiki"}}),_v("Converting existing project documentation/wiki"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#converting-existing-project-documentation-wiki","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"converting-existing-project-documentation-wiki"}},[_v("Converting existing project documentation/wiki"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#converting-existing-project-documentation-wiki","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("MarkBind supports the automatic conversion of an existing GitHub wiki or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs")]),_v(" folder containing Markdown files.")])} },function anonymous( ) { -with(this){return _c('ul',[_c('li',[_v("Adding a Home page: If your project already has a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("README.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Home.md")]),_v(", the content will be copied over to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(". Otherwise, a default home page will be added.")]),_v(" "),_c('li',[_v("Adding an About Us page: If your project already has "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("about.md")]),_v(", this will be used as the About page. Otherwise, a default About page will be added.")]),_v(" "),_c('li',[_v("Adding a top navigation bar.")]),_v(" "),_c('li',[_v("Adding a site navigation menu: If your project has a valid "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_Sidebar.md")]),_v(" file, it will be used as the "),_c('a',{attrs:{"href":"https://markbind.org/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation menu")]),_v(". Otherwise, the menu will be built from your project's directory structure and contain links to all addressable pages.")]),_v(" "),_c('li',[_v("Adding a custom footer: If your project has a valid "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_Footer.md")]),_v(" file, it will be used as the website footer. Otherwise, a default footer will be added.")])])} +with(this){return _c('ul',[_c('li',[_v("Adding a Home page: If your project already has a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("README.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Home.md")]),_v(", the content will be copied over to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(". Otherwise, a default home page will be added.")]),_v(" "),_c('li',[_v("Adding an About Us page: If your project already has "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("about.md")]),_v(", this will be used as the About page. Otherwise, a default About page will be added.")]),_v(" "),_c('li',[_v("Adding a top navigation bar.")]),_v(" "),_c('li',[_v("Adding a site navigation menu: If your project has a valid "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_Sidebar.md")]),_v(" file, it will be used as the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation menu")]),_v(". Otherwise, the menu will be built from your project's directory structure and contain links to all addressable pages.")]),_v(" "),_c('li',[_v("Adding a custom footer: If your project has a valid "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_Footer.md")]),_v(" file, it will be used as the website footer. Otherwise, a default footer will be added.")])])} },function anonymous( ) { with(this){return _c('ol',[_c('li',[_v("Navigate into the project directory.")]),_v(" "),_c('li',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init --convert")]),_v(" to convert the project.")]),_v(" "),_c('li',[_v("You can now preview the website using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(" to view your newly converted MarkBind website.")])])} @@ -53,6 +53,6 @@ with(this){return _c('ol',[_c('li',[_v("Navigate into the project directory.")]) with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/deployingTheSite.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Deploying the Site")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_c('span',[_c('span',[_v("Redirecting to a Custom 404 Page")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/markBindSyntaxOverview.html b/userGuide/markBindSyntaxOverview.html index c7ad0ab..6270b4f 100644 --- a/userGuide/markBindSyntaxOverview.html +++ b/userGuide/markBindSyntaxOverview.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: MarkBind Syntax Overview - + + MarkBind - User Guide: MarkBind Syntax Overview @@ -14,8 +12,7 @@ - - + @@ -23,29 +20,70 @@ 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.
                            More info: User Guide → Reusing Contents → Includes

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

                            Support for HTML, JavaScript, CSS

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

                            Support for HTML, JavaScript, CSS

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

                            MarkBind Vue components and Bootstrap

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

                            Support for Nunjucks

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

                            <ul>
+More info: User Guide → Using HTML, JavaScript, CSS

                            Support for Bootstrap

                            MarkBind has Vue.js components built on the popular BootStrap framework. Much of Bootstrap's features are supported in and out of these components as well. However, interactive BootStrap components like dismissible alerts and toasts are not supported.

                            Support for Nunjucks

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

                            CODE:

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

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

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

                            Adding Pages

                            Formatting Contents


                            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 +

                            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.

                            + diff --git a/userGuide/markBindSyntaxOverview.page-vue-render.js b/userGuide/markBindSyntaxOverview.page-vue-render.js index 6d2db88..2ae4a7d 100644 --- a/userGuide/markBindSyntaxOverview.page-vue-render.js +++ b/userGuide/markBindSyntaxOverview.page-vue-render.js @@ -1,29 +1,29 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_v("\n[_User Guide → MarkBind Syntax Overview_](markBindSyntaxOverview.html)\n")]),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_c('p',[_v("Given below is an overview of the syntax schemes supported by MarkBind.")]),_v(" "),_c('box',[_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Exact usage of various MarkBind syntax is described in separate sections such as "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_c('em',[_v("User Guide → Formatting Contents")])])])])])]),_v(" "),_m(3),_v(" "),_c('p',[_v("MarkBind supports all basic Markdown syntax.")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Some examples ...")])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")])])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])])]),_v(" "),_m(4),_v(" "),_c('p',[_v("MarkBind supports additional Markdown features provided by GitHub-Flavored Markdown (GFMD).")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Some examples ...")])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [ ] Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" -")]),_v(" [x] Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [x] Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" [ ] Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 1\n"),_c('ul',{staticClass:"contains-task-list"},[_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Sub item 1.1")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Sub item 1.2")])])]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"checked":"","type":"checkbox"}}),_v(" Item 2")]),_v(" "),_c('li',{staticClass:"task-list-item enabled"},[_c('input',{staticClass:"task-list-item-checkbox",attrs:{"type":"checkbox"}}),_v(" Item 3")])])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])])]),_v(" "),_m(5),_v(" "),_c('p',[_v("MarkBind adds several Markdown-like features on top of GFMD.")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Some examples ...")])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_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('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 markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" ( ) Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" (x) Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"radio-list",attrs:{"radio-group":"e5b87"}},[_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 1")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"name":"e5b87","type":"radio"}}),_v(" Item 2")])]),_v(" "),_c('li',{staticClass:"radio-list-item"},[_c('label',[_c('input',{staticClass:"radio-list-input",attrs:{"checked":"","name":"e5b87","type":"radio"}}),_v(" Item 3")])])])])],1)])]),_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('strong',[_v("Normal footnotes:")]),_v("\nHere is a footnote reference,"),_c('trigger',{attrs:{"for":"pop:footnotefn-19-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-19-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-19-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-19-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-19-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-19-3"}},[_v("[3]")])])])],1)])],1)])])]),_v(" "),_m(6),_v(" "),_c('p',[_v("Given below are some examples of custom syntax added by MarkBind.")]),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('br'),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_c('br'),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('br'),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_c('br'),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_m(21),_v(" "),_c('box',[_c('ul',[_c('li',[_v("Item 1")]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")]),_v(" "),_c('li',[_v("Item 4")])])]),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_c('br'),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('popover',{attrs:{"id":"pop:footnotefn-19-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-19-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-19-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(24),_v(" "),_m(25),_v(" "),_m(26)],1)]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(27)])} +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('span',{staticClass:"d-none",attrs:{"id":"link"}},[_v("\n[_User Guide → MarkBind Syntax Overview_](markBindSyntaxOverview.html)\n")]),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_c('p',[_v("Given below is an overview of the syntax schemes supported by MarkBind.")]),_v(" "),_c('box',[_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Exact usage of various MarkBind syntax is described in separate sections such as "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_c('em',[_v("User Guide → Formatting Contents")])])])])])]),_v(" "),_m(3),_v(" "),_c('p',[_v("MarkBind supports all basic Markdown syntax.")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Some examples ...")])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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('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 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('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 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(" "),_m(4),_v(" "),_c('p',[_v("MarkBind supports additional Markdown features provided by GitHub-Flavored Markdown (GFMD).")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Some examples ...")])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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('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 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('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 markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])])]),_v(" "),_m(5),_v(" "),_c('p',[_v("MarkBind adds several Markdown-like features on top of GFMD.")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Some examples ...")])]},proxy:true}])},[_v(" "),_c('div',[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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('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 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',[_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-19-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-19-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-19-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-19-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-19-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-19-3"}},[_v("[3]")])])])],1)])],1)])])]),_v(" "),_m(6),_v(" "),_c('p',[_v("Given below are some examples of custom syntax added by MarkBind.")]),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('br'),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_c('br'),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_c('br'),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_c('br'),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(21),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1")]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")]),_v(" "),_c('li',[_v("Item 4")])])])],1),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_c('br'),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('popover',{attrs:{"id":"pop:footnotefn-19-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-19-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-19-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(25),_v(" "),_m(26),_v(" "),_m(27)],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(28)])} }; var pageVueStaticRenderFns = [function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("MarkBind Syntax Overview")])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"markbind-syntax-overview"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-syntax-overview"}}),_v("MarkBind Syntax Overview"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-syntax-overview","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"markbind-syntax-overview"}},[_v("MarkBind Syntax Overview"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-syntax-overview","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("A MarkBind source file may contain a mix of several popular syntax schemes")]),_v(" used in creating web pages. MarkBind source file can be as simple as basic Markdown, and you can use progressively more complicated syntax to create progressively more sophisticated Web pages while optimizing other aspects such as content reuse.")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"support-for-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"support-for-markdown"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-markdown","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"support-for-markdown"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-markdown","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"support-for-gfmd"}},[_c('span',{staticClass:"anchor",attrs:{"id":"support-for-gfmd"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for GFMD"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-gfmd","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"support-for-gfmd"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for GFMD"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-gfmd","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"markbind-extensions-to-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-extensions-to-markdown"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" MarkBind Extensions to Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-extensions-to-markdown","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"markbind-extensions-to-markdown"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" MarkBind Extensions to Markdown"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-extensions-to-markdown","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"markbind-custom-syntax"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-custom-syntax"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" MarkBind Custom Syntax"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-custom-syntax","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"markbind-custom-syntax"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" MarkBind Custom Syntax"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-custom-syntax","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#set"}},[_v("variables")]),_v(" are ideal for reusing small bits of code")]),_v(" in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring to the variable instead of duplicating the code bit.\n")])])} @@ -44,7 +44,7 @@ with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind provides with(this){return _c('div',{staticClass:"indented"},[_v("\nMore info: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_c('em',[_v("User Guide → Using Components")])])])])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"support-for-html-javascript-css"}},[_c('span',{staticClass:"anchor",attrs:{"id":"support-for-html-javascript-css"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for HTML, JavaScript, CSS"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-html-javascript-css","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"support-for-html-javascript-css"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for HTML, JavaScript, CSS"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-html-javascript-css","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS")]),_v(" as a normal web page would.\n")])])} @@ -53,22 +53,25 @@ with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("A MarkBind source with(this){return _c('div',{staticClass:"indented"},[_v("\nMore info: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_c('em',[_v("User Guide → Using HTML, JavaScript, CSS")])])])])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"markbind-vue-components-and-bootstrap"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markbind-vue-components-and-bootstrap"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" MarkBind Vue components and Bootstrap"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markbind-vue-components-and-bootstrap","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"support-for-bootstrap"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for Bootstrap"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-bootstrap","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('p',[_v("MarkBind has several core Vue.js components built on the popular "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/5.1/getting-started/introduction/"}},[_v("BootStrap")]),_v(" framework. Much of Bootstrap's features are supported in and out of these components as well.")])} +with(this){return _c('p',[_v("MarkBind has Vue.js components built on the popular "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/5.1/getting-started/introduction/"}},[_v("BootStrap")]),_v(" framework. Much of Bootstrap's features are supported in and out of these components as well. However, interactive BootStrap components like dismissible alerts and toasts are not supported.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"support-for-nunjucks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"support-for-nunjucks"}}),_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for Nunjucks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-nunjucks","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"support-for-nunjucks"}},[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-check-circle",attrs:{"aria-hidden":"true"}})]),_v(" Support for Nunjucks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#support-for-nunjucks","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/"}},[_v("Nunjucks")]),_v(" is a JavaScript based templating tool. Here is a simple example:")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(">")]),_v("\n")]),_c('span',[_v("{% for item in [1, 2, 3, 4] %}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("Item {{ item }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("{% endfor %}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('p',[_c('span',{staticClass:"fas fa-arrow-down",attrs:{"aria-hidden":"true"}})])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(">")]),_v("\n")]),_c('span',[_v("{% for item in [1, 2, 3, 4] %}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("Item {{ item }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("{% endfor %}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { with(this){return _c('p',[_v("As MarkBind uses Nunjucks behind the scene, "),_c('strong',[_v("MarkBind is generally compatible with Nunjucks")]),_v(", which means you can use Nunjucks templating in your source files. Note that "),_c('mark',[_v("the code is processed for Nunjucks syntax before the rest of the MarkBind syntax are processed")]),_v(".")])} @@ -86,6 +89,6 @@ with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-19-2"}},[ with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-19-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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/readerFacingFeatures.html b/userGuide/readerFacingFeatures.html index ab6c0ba..70a7b83 100644 --- a/userGuide/readerFacingFeatures.html +++ b/userGuide/readerFacingFeatures.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Reader-Facing Features - + + MarkBind - User Guide: Reader-Facing Features @@ -14,8 +12,7 @@ - - + @@ -23,74 +20,111 @@ const baseUrl = '' -

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

                            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
                            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
                                +
                                Second tab
                                Contents of the second tab -
                                Third tab group 📺
                                Stars ⭐️
                                +
                                Third tab group 📺
                                Stars ⭐️
                                Some stuff about stars ... -
                                Moon
                                +
                                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...

                                  Page Navigation Menus

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

                                  details...

                                  Questions and Quizzes

                                  - Click start to begin -

                                  0 questions

                                  details...

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

                                    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

                                    + 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 you don't have to pick an identifier and move down to type the -note.

                                    +note.

                                    + diff --git a/userGuide/readerFacingFeatures.page-vue-render.js b/userGuide/readerFacingFeatures.page-vue-render.js index a29f63c..5f06393 100644 --- a/userGuide/readerFacingFeatures.page-vue-render.js +++ b/userGuide/readerFacingFeatures.page-vue-render.js @@ -1,124 +1,130 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_c('div'),_v(" "),_m(1),_v(" "),_c('box',[_c('div',[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"headings-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings-2"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can prepend the heading text with 1-6 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#")]),_v(" characters to indicate headings of levels 1-6.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-2"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-2"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-2","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('strong',[_v("MarkBind auto-generates anchors for all headings.")]),_c('br'),_v("\nIf the heading text is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Foo Bar (Goo)")]),_v(", the ID of the generated anchor will be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo-bar-goo")]),_v(" (all lower case, special characters omitted, joined by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('p',[_c('small',[_v("Alternative syntax, more info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#headings"}},[_v("https://www.markdownguide.org/basic-syntax#headings")])])]),_v(" "),_c('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")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{attrs:{"id":"heading-level-3-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-3"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-3","onclick":"event.stopPropagation()"}})])])])])],1),_v(" "),_m(2),_v(" "),_c('box',[_c('div',[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"text-styles-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles-2"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Markdown text styles:")]),_v(" "),_c('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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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")])])])])])],1),_v(" "),_m(3),_v(" "),_c('box',[_c('div',[_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested blockquote")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"blockquotes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes-2"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("Normal text\n")]),_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested quoteblock\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested quoteblock")])])])])],1)]),_v(" "),_c('p',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                    ")]),_v(" tags:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Normal text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Blockquote, first paragraph\n")]),_c('span',[_v("\n")]),_c('span',[_v("Second paragraph\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Nested blockquote\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_v("\nBlockquote, first paragraph\n"),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_v("\nNested blockquote\n")])])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#blockquotes-1"}},[_v("https://www.markdownguide.org/basic-syntax#blockquotes-1")])])]),_v(" "),_c('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")])])])]),_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")])])])])])])],1),_v(" "),_m(4),_v(" "),_c('box',[_c('div',[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])])]),_v(" "),_c('ul',[_c('li',[_v("Item 2\n"),_c('ul',[_c('li',[_v("item 2.1")])])])]),_v(" "),_c('ul',{staticClass:"contains-task-list",attrs:{"radio-group":"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")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"lists-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists-2"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.2"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Second line")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" * Sub item 1.2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 2")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 3")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2"),_c('br'),_v("\nSecond line\n"),_c('ul',[_c('li',[_v("Sub item 1.2.1")])])])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Ordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\nYou can also start an ordered list at a particular number by changing the\n"),_c('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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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)])],1),_v(" "),_m(5),_v(" "),_c('box',[_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Syntax coloring for inline code: "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(" too!")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"code-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code-2"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h4',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can present formatted code blocks, be it fenced or inline, with either "),_c('strong',[_v("light")]),_v(" or "),_c('strong',[_v("dark")]),_v(" themes. The default is dark "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"fenced-code"}}),_v("Fenced Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fenced-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's "),_c('em',[_v("fenced code blocks")]),_v(".")]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#fenced-code-blocks"}},[_v("https://www.markdownguide.org/extended-syntax#fenced-code-blocks")])])]),_v(" "),_c('p',[_v("Features:")]),_v(" "),_c('ul',[_c('li',[_v("Syntax coloring")]),_v(" "),_c('li',[_v("Line numbering")]),_v(" "),_c('li',[_v("Line highlighting")]),_v(" "),_c('li',[_v("Code block headers")])]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To enable syntax coloring, specify a language next to the backticks before the fenced code block.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_c('h5',{attrs:{"id":"line-numbering"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-numbering"}}),_v("Line numbering"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-numbering","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Line numbers are "),_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('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")])])])]),_v(" "),_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")])])])])],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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)]),_v(" "),_c('p',[_v("You can have your line numbers start with a value other than "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(" with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(" attribute.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function add(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"style":"counter-reset: line 5;","class":"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")])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"line-highlighting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-highlighting"}}),_v("Line highlighting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-highlighting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" attribute to add highlighting to your code block. Refer to the example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")]),_c('span',[_v("\n")])])])])],1)]),_v(" "),_c('p',[_v("The value of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" is composed of "),_c('em',[_v("highlight rules")]),_v(", separated by commas.\nThese rules dictate where and how MarkBind should highlight your code block.")]),_v(" "),_c('p',[_v("You can specify the highlight rules in many different ways, each is detailed as follows:")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Full text highlight")]),_c('br'),_v("Highlights the entirety of the text portion of the line")]),_v(" "),_c('td',[_v("The line numbers as-is (subject to the starting line number set in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Substring highlight")]),_c('br'),_v("Highlights "),_c('em',[_v("all")]),_v(" occurrences of a substring in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[part]")]),_c('br'),_c('br'),_c('em',[_v("Limitations")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" must be wrapped in quotes. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" contains a quote, escape it with a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3['Inventory']")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4['It\\'s designed']")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Character-bounded highlight")]),_c('br'),_v("Highlights a specific range of characters in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start:end]")]),_v(", highlights from character position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Character positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first non-whitespace character, upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("19[1:5]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("30[10:]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("35[:20]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Word-bounded highlight")]),_c('br'),_v("Highlights a specific range of words in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start::end]")]),_v(", highlights from word position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Word positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first word (sequence of non-whitespace characters), upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5[2::4]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("9[1::]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("11[::5]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Full line highlight")]),_c('br'),_v("Highlights the entirety of the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("7[:]")])])])])])]),_c('p',[_v("Not only a single line, MarkBind is also capable of highlighting ranges of lines in various ways. In general, the syntax\nfor range highlighting consists of two single line highlight rules as listed above joined by a dash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Ranged full text highlight")]),_c('br'),_v("Highlights from the first non-whitespace character to the last non-whitespace character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2-4")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged full line highlight")]),_c('br'),_v("Like ranged full text highlight, but highlights the entirety of the lines")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1[:]-5")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("10-12[:]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged character-bounded highlight")]),_c('br'),_v("Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3[2:]-7")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4-9[:17]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged word-bounded highlight")]),_c('br'),_v("Like ranged character-bounded highlight, but starts/ends at an arbitrary word")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start::]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[::end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("16[1::]-20")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("22-24[::3]")])])])])])]),_c('h5',{attrs:{"id":"heading"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading"}}),_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To add a heading, add the attribute "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading")]),_v(" with the heading text as the value, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('p',[_v("Headings support inline Markdown, except for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" and "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(" text styles.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```{heading=\"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
                                    We support page breaks\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", 👍 ❗️ ❌ 🚧"),_c('br'),_v("We support page breaks")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
                                    We support page breaks","class":"hljs"}},[_c('span',[_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"using-multiple-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-multiple-features"}}),_v("Using multiple features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-multiple-features","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also use multiple features together, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {highlight-lines=\"2\" heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"copy-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"copy-button"}}),_v("Copy button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#copy-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("copy")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockcopybuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h5',{attrs:{"id":"wrap-text-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text-button"}}),_v("Wrap text button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("wrap text")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockwrapbuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"inline-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inline-code"}}),_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring-2"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can apply syntax-coloring on inline code too.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("Consider the XML code `goo`{.xml},
                                    \n")]),_c('span',[_v("or the java code `public static void main(String[] args)`{.java}.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Consider the XML code "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(","),_c('br'),_v("\nor the java code "),_c('code',{pre:true,attrs:{"class":"hljs inline java"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("static")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("main")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(String[] args)")])])]),_v(".")])])],1)]),_v(" "),_c('h5',{attrs:{"id":"displaying-content-within-curly-braces-content"}},[_c('span',{staticClass:"anchor",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:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("```xml\n")]),_c('span',[_v("\n")]),_c('span',[_v(" goo\n")]),_c('span',[_v("\n")]),_c('span',[_v("```\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])]),_v(" "),_c('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('p',[_v("Syntax coloring for inline code: "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(" too!")])])],1)])],1),_v(" "),_m(6),_v(" "),_c('box',[_c('div',[_c('hr')]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"horizontal-rules-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules-2"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use three or more asterisks ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("***")]),_v("), dashes ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v("), or underscores ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("___")]),_v(") to indicate a horizontal line.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr'),_v(" "),_c('hr'),_v(" "),_c('hr')])],1)]),_v(" "),_c('h3',{attrs:{"id":"different-types-of-horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"different-types-of-horizontal-rules"}}),_v("Different Types Of Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#different-types-of-horizontal-rules","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Add additional classes to modify the style, thickness, and color of a horizontal line.")]),_v(" "),_c('p',[_v("Available style classes:")]),_v(" "),_c('ul',[_c('li',[_v("dotted")]),_v(" "),_c('li',[_v("dashed")]),_v(" "),_c('li',[_v("double")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.dotted}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dashed}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dotted"}),_v(" "),_c('hr',{staticClass:"dashed"}),_v(" "),_c('hr',{staticClass:"double"})])],1)]),_v(" "),_c('p',[_v("Available size classes:")]),_v(" "),_c('ul',[_c('li',[_v("thick")]),_v(" "),_c('li',[_v("thick-1")]),_v(" "),_c('li',[_v("thick-2")]),_v(" "),_c('li',[_v("thick-3")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.thick}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-1}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-2}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-3}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"thick"}),_v(" "),_c('hr',{staticClass:"thick-1"}),_v(" "),_c('hr',{staticClass:"thick-2"}),_v(" "),_c('hr',{staticClass:"thick-3"})])],1)]),_v(" "),_c('p',[_v("Available color classes (use any of the available Bootstrap border color classes):")]),_v(" "),_c('ul',[_c('li',[_v("border-info")]),_v(" "),_c('li',[_v("border-primary")]),_v(" "),_c('li',[_v("etc")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.border-primary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-info}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-success}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"border-primary"}),_v(" "),_c('hr',{staticClass:"border-secondary"}),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('hr',{staticClass:"border-info"}),_v(" "),_c('hr',{staticClass:"border-success"})])],1)]),_v(" "),_c('p',[_v("Add a 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")])])])]),_v(" "),_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")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('hr')])])])],1),_v(" "),_m(7),_v(" "),_c('box',[_c('div',[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"links-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links-2"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Basic style:")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])]),_v(" "),_c('p',[_c('em',[_v("Reference style")]),_v(" links (i.e., specify the URL in a separate place):")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#links"}},[_v("https://www.markdownguide.org/basic-syntax#links")])])]),_v(" "),_c('h4',{attrs:{"id":"autolinks"}},[_c('span',{staticClass:"anchor",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("")])]),_v("markbind.org\n")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intra-site-links"}}),_v("Intra-Site Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intra-site-links","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"intraSiteLinks"}},[_c('p',[_v("Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Auto-conversion of extension")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("You may link to markdown files using its original extension ("),_c('strong',[_v(".md")]),_v(") as it will automatically be converted to a HTML extension ("),_c('strong',[_v(".html")]),_v(") when the site is generated.")]),_v(" "),_c('p',[_c('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("")]),_v("\n")]),_c('span',[_v("![](image.png)\n")])])]),_c('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", we can also display the image using")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v("![](textbook/image.png)\n")])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Relative links to resources (e.g. images, hrefs) should be valid "),_c('strong',[_v("relative to the file where the link is defined")]),_v(".")]),_v(" "),_c('p',[_v("In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" is in the same directory as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("subsite.md")]),_v(". Thus, the correct path is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" and not "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/image.png")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Link validation")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links will be validated when generating a site and a warning will be displayed in the console for every link that is invalid.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("Disabling link validation")])]),_v(" "),_c('p',[_v("Link validation is enabled by default.")]),_v(" "),_c('p',[_v("If you wish to only disable validation for a "),_c('strong',[_v("specific link")]),_v(", you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-validation")]),_v(" attribute.")]),_v(" "),_c('p',[_c('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")])])])])])],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")])])])]),_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(".")])])])])],1),_v(" "),_m(8),_v(" "),_c('box',[_c('div',[_v("\n1 + 1 = 2 ^[Math]\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"footnotes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes-2"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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")])])])]),_v(" "),_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-50-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-50-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-50-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-50-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-50-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-50-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")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_v("\n1 + 1 = 2 ^[Math]\n")])],1)])],1),_v(" "),_m(9),_v(" "),_c('box',[_c('div',[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"alt text here","title":"title here"}})])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"images-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images-2"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n URLs can be specified as relative references. More info in: "),_c('i',[_c('a',{attrs:{"href":"#intraSiteLinks"}},[_v("Intra-Site Links")])])]),_v(" "),_c('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")])])])]),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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)])],1),_v(" "),_m(10),_v(" "),_c('box',[_c('div',[_c('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"classes-attributes-and-amp-identifiers-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers-2"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Most markdown syntax above this section supports adding classes, attributes and identifiers\nusing "),_c('a',{attrs:{"href":"https://pandoc.org/MANUAL.html"}},[_v("pandoc")]),_v(" syntax without the need for a wrapper HTML element.")]),_v(" "),_c('p',[_v("The syntax is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{.class-name attribute=\"value\" attribute=value #id}")]),_v(", which is placed at different locations depending\non the type of markdown.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\n")]),_c('span',[_v("by leaving a space before '{' {.text-success #attribute-example}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#### heading {.text-info}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Apply the same to inline markdown (eg. bold text) by\n")]),_c('span',[_v("omitting the "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**space**")]),_v("{.text-primary .bg-light header=\"attributes example\"}\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',{staticClass:"text-success",attrs:{"id":"attribute-example"}},[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\nby leaving a space before '{'")]),_v(" "),_c('h4',{staticClass:"text-info",attrs:{"id":"heading-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-2"}}),_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_c('p',{staticClass:"mb-4"},[_v("Some other types of markdown have "),_c('strong',[_v("different placements")]),_v(" of the curly group "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{...}")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered and Ordered lists")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Apply to the list item itself like so {.text-success #list-item-id}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Curly groups after newlines apply to the closest nested list {.text-danger}\n")]),_c('span',[_v("{.bg-light}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Curly groups two lines after the last line apply to the top most list\n")]),_c('span',[_v("\n")]),_c('span',[_v("{.alert-info}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"alert-info"},[_c('li',{staticClass:"text-success",attrs:{"id":"list-item-id"}},[_v("Apply to the list item itself like so\n"),_c('ul',{staticClass:"bg-light"},[_c('li',{staticClass:"text-danger"},[_v("Curly groups after newlines apply to the closest nested list")])])]),_v(" "),_c('li',[_v("Curly groups two lines after the last line apply to the top most list")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Fenced code blocks")])])]),_v(" "),_c('p',[_v("Refer to the above "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#line-numbering"}},[_v("section")]),_v("!")]),_v(" "),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nFormatting features listed above this section support this syntax for attributes, classes and identifiers.\nThose below this section do not.\n")]),_v(" "),_c('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('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('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])])],1)])],1),_v(" "),_m(11),_v(" "),_c('box',[_c('div',[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tables-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables-2"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])])],1)]),_v(" "),_c('ul',[_c('li',[_v("Colons ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":")]),_v(") in the 2nd line are optional and they indicates whether to left/center/right-align the values in that column.")]),_v(" "),_c('li',[_v("There is no need to align pipe symbols to be on a vertical line; it's just for aesthetic purposes only.")])]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#tables"}},[_v("https://www.markdownguide.org/extended-syntax#tables")])])]),_v(" "),_c('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")])])])]),_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')])])])])])])])],1),_v(" "),_m(12),_v(" "),_c('box',[_c('div',[_c('p',[_v("👍 ❗️ ❌ 🚧")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"emoji-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji-2"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])])])],1),_v(" "),_m(13),_v(" "),_c('box',[_c('div',[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"icons-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons-2"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('small',[_c('span',{staticClass:"dimmed"},[_v("Acknowledgement: Font Awesome icons are provided by "),_c('a',{attrs:{"href":"https://fontawesome.com/"}},[_v("Font Awesome")]),_v(" under their "),_c('a',{attrs:{"href":"https://fontawesome.com/license"}},[_v("free license")]),_v(", Glyphicons are provided by "),_c('a',{attrs:{"href":"https://glyphicons.com/"}},[_v("Glyphicons")]),_v(" via "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/"}},[_v("Bootstrap 3")]),_v(", "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("Octicons")]),_v(" are copyright of GitHub, and Material icons are provided by "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("Google Fonts")]),_v(" via "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/material-icons"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("material-icons")]),_v(" by Ravindra Marella")]),_v(" under the "),_c('a',{attrs:{"href":"https://www.apache.org/licenses/LICENSE-2.0.html"}},[_v("Apache license 2.0")]),_v(".")])])]),_v(" "),_c('p',[_v("MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.")]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe advantage of font icons over emojis is font icons can be "),_c('em',[_v("styled")]),_v(" to fit your needs. e.g.,")]),_v(" "),_c('ul',[_c('li',[_v("emoji: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the 📖 by its cover! 👎")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}}),_v(" by its cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("The syntax for icons has changed, and the earlier "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ prefix_name }}")]),_v(" syntax has been deprecated. "),_c('br'),_v("\nPlease use the new "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":prefix-name:")]),_v(" syntax instead.")])]),_v(" "),_c('h6',{attrs:{"id":"using-font-awesome-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-font-awesome-icons"}}),_v("Using Font Awesome Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-font-awesome-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from the "),_c('a',{attrs:{"href":"https://fontawesome.com/icons?d=gallery&m=free"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Solid")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-")]),_v(") e.g., "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Regular")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-")]),_v(") e.g., "),_c('span',{staticClass:"far fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-")]),_v("): e.g., "),_c('span',{staticClass:"fab fa-github-alt",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("github-alt")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-github-alt")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert MarkBind name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Create a **branch**")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-code-branch: now!")]),_v(" → Create a "),_c('strong',[_v("branch")]),_v(" "),_c('span',{staticClass:"fas fa-code-branch",attrs:{"aria-hidden":"true"}}),_v(" now!")])])]),_v(" "),_c('h6',{attrs:{"id":"using-glyphicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-glyphicons"}}),_v("Using Glyphicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-glyphicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/components/#glyphicons"}},[_v("list of provided glyphicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Move to the right!")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" → Move to the right! "),_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}})])]),_v(" "),_c('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("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-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:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]),_v(" "),_c('h6',{attrs:{"id":"using-octicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-octicons"}}),_v("Using Octicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-octicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("list of available Octicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Merge a **pull request** :octicon-git-pull-request:")]),_v(" → Merge a "),_c('strong',[_v("pull request")]),_v(" "),_c('svg',{staticClass:"octicon octicon-git-pull-request",attrs:{"version":"1.1","width":"16","height":"16","viewBox":"0 0 16 16","aria-hidden":"true"}},[_c('path',{attrs:{"fill-rule":"evenodd","d":"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"}})])]),_v(" "),_c('li',[_v("You may also append "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("~class-name")]),_v(" to the end of the octicon name to add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"class-name\"")]),_v(" property to your Octicon (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octicon-git-pull-request~icon-large-red:")]),_v(" will generate an Octicon of class "),_c('em',[_v("icon-large-red")]),_v("). You may then add corresponding CSS to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{root}/_markbind/layouts/{layout-name}/styles.css")]),_v(" to customize the style of your Octicon.")]),_v(" "),_c('li',[_v("If your background is dark, you may use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octiconlight-*:")]),_v(" to render the icon as white.")])]),_v(" "),_c('h6',{attrs:{"id":"using-material-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-material-icons"}}),_v("Using Material Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-material-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by writing the icon name in "),_c('em',[_v("lowercase letters only")]),_v(", replacing any spaces between the words in the name with "),_c('em',[_v("dashes")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v("), then adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Filled")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-")]),_v(") e.g. "),_c('span',{staticClass:"material-icons align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Outlined")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-")]),_v(") e.g., "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Rounded")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-round align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Sharp")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-sharp align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Two tone")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-two-tone align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-perm-media")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Download from Cloud :mio-cloud-download:")]),_v(" → Download from Cloud "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("cloud_download")])])])])],1)])],1),_v(" "),_m(14),_v(" "),_c('box',[_c('div',[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube",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('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"embeds-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds-2"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("There are easy ways to embed media content such as YouTube videos and PowerPoint slides")]),_v(".")]),_v(" "),_c('h6',{attrs:{"id":"embedding-youtube-videos"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-youtube-videos"}}),_v("Embedding YouTube Videos"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-youtube-videos","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here are three ways of embedding YouTube videos and one example of how it will look in the page.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-youtube",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}}),_v("Embedding PowerPoint Slides (using the embed URL from PowerPoint online)"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here is an example of embedding a PowerPoint slide deck:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed-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")])])])]),_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":""}})])])])])],1),_v(" "),_m(15),_v(" "),_c('box',[_c('div',[_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('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dates-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates-2"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("MarkBind supports date formatting and simple calculations")]),_v(" as a Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#filters"}},[_v("filter")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_v("Syntax:")]),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ baseDate | date(format, daysToAdd) }}")])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('p',[_v("20 days after 1st Jan 2020:")]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2020-01-01\" | date(\"ddd, Do MMM, YYYY\", 20) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Tue, 21st Jan, 2020")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The baseDate follows the format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("YYYY-MM-DD")])]),_v(" "),_c('p',[_v("The default output format is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])]),_v(" "),_c('h3',{attrs:{"id":"using-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-variables"}}),_v("Using variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2020-01-01\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MMM (DD/MM/YYYY)\" %}")])]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1 Jan"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"custom-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"custom-formatting"}}),_v("Custom formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#custom-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" 01 01 2020"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"adding-days"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-days"}}),_v("Adding days"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-days","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 0) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1st Jan (01/01/2020)"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Sat 11th Jan (11/01/2020)"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"page-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-variables"}}),_v("Page variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("page variables")]),_v(" for convenience.")]),_v(" "),_c('p',[_v("Inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variables.md")]),_v(" or referencing page:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])])]),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ date_pagevar | date(format2) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Fri 6th Mar (06/03/2020) "),_c('br')]),_v(" "),_c('h3',{attrs:{"id":"advanced-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-formatting"}}),_v("Advanced Formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.")]),_v(" "),_c('p',[_v("Default format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Brief reference")])])]},proxy:true}])},[_v(" "),_c('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)])],1),_v(" "),_m(16),_v(" "),_c('box',[_c('div',[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.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('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"math-formulae-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae-2"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind supports typesetting TeX math equations. "),_c('a',{attrs:{"href":"https://katex.org"}},[_v("KaTeX")]),_v(" is used as a fast math renderer.")]),_v(" "),_c('p',[_v("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")])])])]),_v(" "),_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")])])])]),_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")])])])]),_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)])],1),_v(" "),_m(17),_v(" "),_c('box',[_c('div',[_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable"}}),_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","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"badges-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges-2"}}),_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_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',[_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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",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-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable-2"}}),_v("Feature Y "),_c('span',{staticClass:"badge rounded-pill bg-success"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable-2","onclick":"event.stopPropagation()"}})])])],1)]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You can refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/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")])])])]),_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-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"feature-y-stable-3"}}),_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-3","onclick":"event.stopPropagation()"}})])])])])],1),_v(" "),_m(18),_v(" "),_c('box',[_c('div',[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"boxes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes-2"}}),_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Boxes come with different built-in types.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" important\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#### Header :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use **markdown** here! :pizza:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header"}}),_v("Header 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")]),_v(" "),_c('box',{attrs:{"type":"warning","dismissible":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("You can use "),_c('strong',[_v("markdown")]),_v(" here! 🍕")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("The built in types can be colored.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" primary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" secondary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" danger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" dark\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a light color scheme for boxes")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" default light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" info light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" success light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" important light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"light":""}},[_v("\n default light\n")]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_v("\n info light\n")]),_v(" "),_c('box',{attrs:{"type":"warning","light":""}},[_v("\n warning light\n")]),_v(" "),_c('box',{attrs:{"type":"success","light":""}},[_v("\n success light\n")]),_v(" "),_c('box',{attrs:{"type":"important","light":""}},[_v("\n important light\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","light":""}},[_v("\n wrong light\n")]),_v(" "),_c('box',{attrs:{"type":"tip","light":""}},[_v("\n tip light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""}},[_v("\n definition light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n definition light with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a seamless style of boxes")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("As "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(" are mutually exclusive styles, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" takes priority over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(".")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" default seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" info seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" important seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible definition seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"seamless":""}},[_v("\n default seamless\n")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_v("\n info seamless\n")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\n warning seamless\n")]),_v(" "),_c('box',{attrs:{"type":"success","seamless":""}},[_v("\n success seamless\n")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_v("\n important seamless\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","seamless":""}},[_v("\n wrong seamless\n")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n tip seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":"","dismissible":""}},[_v("\n dismissible definition seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown-2"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown-2","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n success seamless with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can further customize the Box's appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#ffca6a\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"grey\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-left-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#8b5a01\"")]),_v(">")]),_v("\n")]),_c('span',[_v("default type, styled as an orange box with a brown left border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("info, with a custom markdown rocket icon and `red` colored text.\n")]),_c('span',[_v("\n")]),_c('span',[_v("You can use any inline markdown in the `icon` property.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"background-color":"#ffca6a","border-color":"grey","border-left-color":"#8b5a01"}},[_v("\ndefault type, styled as an orange box with a brown left border\n")]),_v(" "),_c('box',{attrs:{"type":"info","color":"red"},scopedSlots:_u([{key:"icon",fn:function(){return [_v("🚀")]},proxy:true}])},[_v(" "),_c('p',[_v("info, with a custom markdown rocket icon and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(" colored text.")]),_v(" "),_c('p',[_v("You can use any inline markdown in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" property.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can remove the background, icon and borders of preset styles.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-icon")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-background")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success box without a tick icon and backgound\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-border")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition type box, light style without border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"no-icon":"","no-background":"","type":"success"}},[_v("\n success box without a tick icon and backgound\n")]),_v(" "),_c('box',{attrs:{"no-border":"","type":"definition","light":""}},[_v("\n definition type box, light style without border\n")])],1)],1)]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Note")])]},proxy:true}])},[_v(" "),_c('p',[_v("Custom styles "),_c('strong',[_v("(")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("background-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" "),_c('strong',[_v(")")]),_v(" as introduced in the previous section, takes precedence over the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-background")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-border")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-icon")]),_v(" attributes.")])]),_v(" "),_c('p',[_c('strong',[_v("You can also use icons, resize them and change their color accordingly.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"type":"success"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_v(" "),_c('box',{attrs:{"type":"warning","icon-size":"2x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_v(" "),_c('box',{attrs:{"type":"definition","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_v(" "),_c('box',{attrs:{"type":"info","icon-color":"red","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("background-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-left-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Overrides border-color for the left border.")])]),_v(" "),_c('tr',[_c('td',[_v("color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the text.")])]),_v(" "),_c('tr',[_c('td',[_v("dismissible")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Adds a button to close the box to the top right corner.")])]),_v(" "),_c('tr',[_c('td',[_v("icon"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Inline MarkDown text of the icon displayed on the left.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Resizes the icon. Supports integer-scaling of the icon dimensions e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4x")]),_v(", etc.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the icon.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Markdown text of the box header.")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("important")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("wrong")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("definition")]),_v(", or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("theme")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("secondary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(" or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("light")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a light color scheme for the box.")])]),_v(" "),_c('tr',[_c('td',[_v("seamless")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a seamless style for the box. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" is specified, this style will not be activated.")])]),_v(" "),_c('tr',[_c('td',[_v("no-border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes border, except if styled by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("no-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")])])])]),_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)])],1),_v(" "),_m(19),_v(" "),_c('box',[_c('div',[_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("minimal type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("seamless type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("info type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("danger type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("warning type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("success type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('p'),_v(" "),_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("light type panel (DEFAULT)")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("dark type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("primary type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("secondary type panel")])]},proxy:true}])},[_v("\n ...\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"panels-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels-2"}}),_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is your header for a Panel, click me to expand!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimized")]),_v(" attribute, panel is minimized into an inline block element. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("alt")]),_v(" attribute is for you to specify the minimized block header.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"How to cultivate a tomato plant at home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tomatoes\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("How to cultivate a tomato plant at home")])]},proxy:true},{key:"_alt",fn:function(){return [_c('p',[_v("Tomatoes")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expanded")]),_v(" attribute, you can set the panels to be expanded when loaded in.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Have your readers click less to see the Panel's contents\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Have your readers click less to see the Panel's contents")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expand-headerless")]),_v(" attribute, you can hide the panel header when it is expanded.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This header will only show when the Panel is collapsed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expand-headerless")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expand-headerless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This header will only show when the Panel is collapsed")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("peek")]),_v(" attribute, you may showcase part of your content without expanding the panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Give your readers a peek of the content without expanding Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("peek")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_v(" Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n")]),_c('span',[_v(" facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n")]),_c('span',[_v(" eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n")]),_c('span',[_v(" dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n")]),_c('span',[_v(" pellentesque. \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"peek":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Give your readers a peek of the content without expanding Panel")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n pellentesque. \n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Panel provides many types that change its appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**light type panel (DEFAULT)**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**dark type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**primary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**secondary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**info type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**danger type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**warning type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**success type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**seamless type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**minimal type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("light type panel (DEFAULT)")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("dark type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("primary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("secondary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("info type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("danger type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("warning type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("success type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("seamless type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"minimal","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("minimal type panel")])])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Show/Hide buttons using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-switch")]),_v(", "),_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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a close button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have either buttons\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"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("")]),_v("\n")])])])]),_v(" "),_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("")]),_v("\n")])])])]),_v(" "),_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("")]),_v("\n")])])])]),_v(" "),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"src":"/userGuide/syntax/extra/loadContent._include_.html#fragment","preload":"","fragment":"fragment"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Right click and inspect my HTML before expanding me!")])]},proxy:true}])},[_v(" "),_c('p',[_v("You should be able to find this text before expanding the Panel.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can nest Panels or other components within a Panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 3 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" minimal-type panel\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some Text\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Parent Panel")])]},proxy:true}])},[_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 1 Nested Panel")])]},proxy:true}])},[_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Level 2 Nested Panel")])]},proxy:true}])},[_v(" "),_c('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("")]),_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)])])],1),_v(" "),_m(20),_v(" "),_c('box',[_c('div',[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Content of the first tab\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Second tab")]},proxy:true}])},[_v("\n Contents of the second tab\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 📺")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Moon")]},proxy:true}])},[_v("\n Some stuff about the moon ...\n ")])],1)],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tabs-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs-2"}}),_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tabs")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("active")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")])]),_v(" "),_c('td',[_v("Active Tab index (0-based)")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab is clickable and can be activated.")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab-group")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab Group title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab Group is clickable and can be activated.")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Tabs, tab group and individual tab can be omitted during printing by adding Bootstrap's display property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"d-print-none\"")]),_v(" to the respective components.")])]),_v(" "),_c('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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Second tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Contents of the second tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :tv:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Moon\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about the moon ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('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)])],1),_v(" "),_m(21),_v(" "),_c('box',[_c('div',[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"pictures-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures-2"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pic")]),_v(" component allows you to add captions below the image.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_c('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("")]),_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)])])],1),_v(" "),_m(22),_v(" "),_c('box',[_c('div',[_c('annotate',{attrs:{"src":"https://markbind.org/userGuide/diagrams/object.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"annotations-2"}},[_c('span',{staticClass:"anchor",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("\"33%\"")]),_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 33% 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("\"66%\"")]),_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 66% 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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"This point is 25% from the left and 25% from the top"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"This point is 50% from the left and 25% from the top","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"This point is 75% from the left and 25% from the top","header":"This has a header"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"This point is 33% from the left and 50% from the top","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"This point is 66% from the left and 50% from the top","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"This point is 25% from the left and 75% from the top","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"This point is 50% from the left and 75% from the top","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"This point is 75% from the left and 75% from the top","fontSize":"30","label":"3"}})],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")])])])]),_v(" "),_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%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Popover on the left","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Popover on the right","placement":"right"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom","trigger":"hover focus"}})],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")])])])]),_v(" "),_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%","content":"There is only text when you click me","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Clicking on this does nothing","label":"2","legend":"bottom","header":"Headers are displayed as well"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"There is text at both locations","label":"3","legend":"both","header":"Headers are displayed at both positions"}})],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("\"https://markbind.org/userGuide/diagrams/object.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")])])])]),_v(" "),_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":"https://markbind.org/userGuide/diagrams/object.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"Class inheritance","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"Aggregation","color":"blue","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow","legend":"both"}})],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("\"https://markbind.org/userGuide/diagrams/sequence.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")])])])]),_v(" "),_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":"https://markbind.org/userGuide/diagrams/sequence.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"35%","y":"18.5%","content":"Operation is invoked","header":"Operation","opacity":"0.2","size":"30"}}),_v(" "),_c('a-point',{attrs:{"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"}}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","content":"Return control and possibly some return value","header":"Return Value","opacity":"0.2","size":"30","color":"blue"}})],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.")])]),_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.")])]),_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(".")])]),_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("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_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")])])])]),_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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],1)],1)])])],1),_v(" "),_m(23),_v(" "),_c('box',[_c('div',[_c('thumb',{pre:true,attrs:{"circle":"","src":"https://markbind.org/images/logo-lightbackground.png","size":"100"}})],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"thumbnails-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails-2"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("thumbnail")]),_v(" component allows you to insert thumbnails using text, images, or icons.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('thumbnail',{attrs:{"circle":"","src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"circle":"","font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('thumbnail',{attrs:{"src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" is specified")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("background")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the background color."),_c('br'),_v(" Accepts any valid CSS background property")])]),_v(" "),_c('tr',[_c('td',[_v("border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the border thickness, type, and color."),_c('br'),_v(" Accepts any valid CSS border property")])]),_v(" "),_c('tr',[_c('td',[_v("circle")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("If this option is enabled, the thumbnail will be circle shaped instead of square")])]),_v(" "),_c('tr',[_c('td',[_v("font-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The color of the text, affects normal text and icons (but not emojis)")])]),_v(" "),_c('tr',[_c('td',[_v("font-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Text size, defaults to half of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("size")]),_v(", affects text, icons and emojis")])]),_v(" "),_c('tr',[_c('td',[_v("size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("100")]),_v(" "),_c('td',[_v("The size of the thumbnail in pixels")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The text to use in the thumbnail, "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#emoji"}},[_v("emojis")]),_v(" and markdown are supported here")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" are specified, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" will take higher priority.")])]),_v(" "),_c('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")])])])]),_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)])],1),_v(" "),_m(24),_v(" "),_c('box',[_c('div',[_c('div',[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"diagrams-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams-2"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use the "),_c('a',{attrs:{"href":"http://plantuml.com/"}},[_v("PlantUML")]),_v(" syntax to add diagrams.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_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 later (required - to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v(" v2.38 or later (optional - you don't need this if you 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 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('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")])])])])]),_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('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")])])])]),_v(" "),_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('p',[_v("Alternatively, a PlantUML diagram can be specified in a separate "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file and inserted into a page using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")])])]),_c('p',[_v("in another file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("puml")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"diagrams/sequence.puml\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("300")]),_v(" />")]),_v("\n")])])])]),_v(" "),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])]),_c('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")])])])]),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1)])],1),_v(" "),_m(25),_v(" "),_c('box',[_c('div',[_c('div',{staticClass:"tree"},[_v("C:/course/\n├── textbook/\n│ └── index.md\n├── index.md\n├── reading.md\n└── site.json\n")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tree-2"}},[_c('span',{staticClass:"anchor",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("")]),_v("\n")])])])]),_v(" "),_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("")]),_v("\n")])])])]),_v(" "),_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("")]),_v("\n")])])])]),_v(" "),_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("")]),_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("")]),_v("\n")])])])]),_v(" "),_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("")]),_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)])],1),_v(" "),_m(26),_v(" "),_c('box',[_c('div',[_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)]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tooltips-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips-2"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Trigger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Click"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"focus\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Focus\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Free Text**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_v("coupling"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('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("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This tooltip triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"tt:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('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("")]),_v(" to see a tooltip.\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)])],1),_v(" "),_m(27),_v(" "),_c('box',[_c('div',[_c('p',[_v("Hover over the "),_c('trigger',{attrs:{"for":"pop:context-target"}},[_v("keyword")]),_v(" to see the popover.")],1),_v(" "),_c('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),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"popovers-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers-2"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Markdown"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using slot"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using src"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Wrap Text"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-2"}}),_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"content-using-slot"}}),_v("Content using slot"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-slot","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text"}}),_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This popover is triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"pop:trigger_id"}},[_v("trigger")]),_v(".\n"),_c('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("")]),_v(" to see the popover.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("description :+1:\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('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)])],1),_v(" "),_m(28),_v(" "),_c('box',[_c('div',[_c('p',[_v("Hover "),_c('trigger',{attrs:{"large":"","for":"modal:unused"}},[_v("here")]),_v(" to open a modal.")],1),_v(" "),_c('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),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"modals-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals-2"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Modals are to be used together with the "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" component for activation.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(".")],1),_v(" "),_c('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 "),_c('hr',{staticStyle:{"margin-top":"0.2rem","margin-bottom":"0"}}),_v(" "),_c('small',[_v("modal-footer "),_c('br'),_v(" (deprecated)")])]),_v(" "),_c('td',[_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_v("Slot")])],1),_v(" "),_c('td',[_v("empty")]),_v(" "),_c('td',[_v("Specifying this will override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ok-text")]),_v(" attribute, and the OK button will not render.")])]),_v(" "),_c('tr',[_c('td',[_v("ok-text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text for the OK button.")])]),_v(" "),_c('tr',[_c('td',[_v("effect")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fade")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("id")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Used by "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" to activate the Modal by id."),_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("")]),_v(" to open a modal.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Modal header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Modal content\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('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)])],1)])],1),_v(" "),_m(29),_v(" "),_c('box',[_c('div',[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Action")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('p'),_v(" "),_c('div',{staticClass:"btn-group d-flex",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dropdowns-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns-2"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("While the main use case for dropdowns is under navbars, they can also be used as top-level components.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Action*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"before\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-info\"")]),_v(">")]),_v("Segmented"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right aligned list\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn-group d-flex mt-3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"group\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-danger w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-warning dropdown-toggle w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Action\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"caret\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-success w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Action")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('dropdown',{attrs:{"type":"primary","menu-align-right":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Right aligned list")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])])]),_v(" "),_c('div',{staticClass:"btn-group d-flex mt-3",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Dropdowns can also be nested within each other to create multi-level submenus.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Multi-Level Dropdown*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Submenu*\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Multi-Level Dropdown")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])]),_v(" "),_c('dropdown',{scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Submenu")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Dropdown can be opened.")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Dropdown button header text. (Supports inline MarkDown syntax)")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(".")])])])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You may refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/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")])])])]),_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)])])],1),_v(" "),_m(30),_v(" "),_c('box',[_c('div',[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"search-bars-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars-2"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component allows users to search all headings within any page on the site.")]),_v(" "),_c('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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("algolia")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the searchbar should be connected to "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("Algolia DocSearch")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("data")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Array")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchData\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the search bar's dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("on-hit")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Function")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchCallback\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("placeholder")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The placeholder text shown when no keywords are entered in the search bar.")])])])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])])],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("")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1)])])],1),_v(" "),_m(31),_v(" "),_c('box',[_c('div',[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"navbars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navbars"}}),_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Navbar allows visitors of your website to navigate through pages easily.")])]),_v(" "),_c('p',[_c('strong',[_v("Navbars support link highlighting; link highlighting can be customised by specifying rules.")])]),_v(" "),_c('ul',[_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default-highlight-on")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to specify fallback highlight rules.")]),_v(" "),_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("data-highlight")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags with the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("nav-link")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dropdown-item")]),_v(" to specify individual highlight rules.")])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("default-highlight-on")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(". Specifies link highlight rules for navbars.")])])])])]),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"none\"")]),_v(" attribute and 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("")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to apply Bootstrap background styles.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Navbar Link Highlighting")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])]),_c('p',[_c('strong',[_c('strong',[_v("Highlight Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a child of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" is a child of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bear")]),_v(" are siblings.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling or child of the link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar exactly matches link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")])]),_v(" "),_c('td',[_v("No highlighting.")])])])])]),_c('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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('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("")]),_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("")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot.")]),_v(" "),_c('p',[_v("By default, if the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot is not specified, the site and page navigation buttons are simply placed as such.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lower-navbar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-menu-container\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Component")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("page-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=page-nav")]),_v(" into the menu. If no such element exists, it pulls any "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#page-navigation-menus"}},[_v("page navigation menu")]),_v(" used in the layout.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site-nav-button")])]),_v(" "),_c('td',[_v("Pulls any element with an identifier, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id=site-nav")]),_v(" into the menu. If no such element exists, it pulls all "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#site-navigation-menus"}},[_v("site navigation menu components")]),_v(" used in the layout.")])])])])]),_c('p',[_c('strong',[_c('strong',[_v("Styling the mobile page and site navigation menus")])])]),_v(" "),_c('p',[_v("You may also wish to style your navigation content differently on mobile view.\nBy default, MarkBind already provides some reasonable overrides for smaller screens, applied over any styles you might have for the mobile navigation content identified above.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("CSS class attached to the root navigation element")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"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('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('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("layouts")]),_v(" section to find out how to add custom CSS files to a page!")])])],1)])],1),_v(" "),_m(32),_v(" "),_c('box',[_c('div'),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"site-navigation-menus-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus-2"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])]),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_c('ol',[_c('li',[_v("Format your siteNav as an unordered Markdown list")]),_v(" "),_c('li',[_v("Include it under a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" element.")]),_v(" "),_c('li',[_v("(Optional) To make siteNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_c('p',[_v("MarkBind has styles nested lists with additional padding and smaller text sizes up to "),_c('strong',[_v("4")]),_v(" nesting levels.\nBeyond that, you'd have to include your own styles.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])]),_v(" "),_c('p',[_v("You can "),_c('strong',[_v("append the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":expanded:")]),_v(" to a "),_c('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("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"examples"}})])])],1),_v(" "),_m(33),_v(" "),_c('box',[_c('div',[_c('p',[_v("You can see an example of a Page Navigation Bar "),_c('mark',[_v("on the right side")]),_v(" of "),_c('a',{attrs:{"target":"_blank","href":"/userGuide/formattingContents.html"}},[_v("this page")]),_v(".")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"page-navigation-menus-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus-2"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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("")]),_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("")]),_v(" that will be placed at the top of the page navigation menu.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("Position the page navigation menu")]),_v(" within your layout using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])])]),_v(" "),_c('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("")]),_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("")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("Table of Contents")])])])])]),_v(" "),_c('p',[_v("You can specify multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("")]),_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("")]),_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('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("

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

                                    ")]),_v(" headings in the pageNav, and set a custom pageNav title like so:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("Then, in your "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout file")]),_v(", use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component to position the pageNav.")]),_v(" "),_c('p',[_c('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("")]),_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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" {{ content }}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"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("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])],1)],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(".")])])])])],1),_v(" "),_m(34),_v(" "),_c('box',[_c('div',[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v("\n\n ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\n\n "),_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',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"questions-and-quizzes-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes-2"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',{staticClass:"mt-3"},[_v("Question and quiz components provide an easy way to test readers on the relevant content topic in the page.")]),_v(" "),_c('h4',{attrs:{"id":"introduction"}},[_c('span',{staticClass:"anchor",attrs:{"id":"introduction"}}),_v("Introduction"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#introduction","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Question components ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") can be one of the following types: "),_c('strong',[_v("MCQ")]),_v(", "),_c('strong',[_v("Checkbox")]),_v(", "),_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("...")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is correct?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which of the following is correct?")])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)]),_v(" "),_c('p',[_v("If you require more expressive formatting for your header or hint markup, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                    ")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                    ")]),_v(" slots. Expand the panel below to see an example!")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Header and Hint example "),_c('strong',[_v("with slots")])])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Headers and Hints using slots")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Which of the following is correct?"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/math-question.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"math question image\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"200\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-block mx-auto\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html\"")]),_v(">")]),_v("Daily Mail"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Think out of the box! "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-box\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Need another hint? "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Two of the answers are correct!\"")]),_v(">")]),_v("Hover over me!"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-mouse-pointer\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('p',[_v("Which of the following is correct?")]),_v(" "),_c('p',[_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️")])])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('p',[_v("Need another hint? "),_c('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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"mcq-and-checkbox-questions"}}),_v("MCQ and Checkbox Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#mcq-and-checkbox-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MCQ and checkbox questions are indicated with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"mcq\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"checkbox\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("In both instances, you can include the possible answers using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component, placed anywhere inside the "),_c('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("")]),_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("")]),_v(" attribute, or the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                    ")]),_v(" slot for more expressive formatting, similar to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" options and slots.")]),_v(" "),_c('p',[_c('strong',[_v("MCQ Questions")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1)],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("MCQ questions can have multiple correct options!")]),_v(" "),_c('p',[_c('strong',[_v("Checkbox Questions")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Use your calculator! :fas-calculator:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" ##### Which of the following is true?\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 + 1 = 11\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Division by zero is **undefined**!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 / 0 = infinity\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" 11 / 11 = 1\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(" Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("correct")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.")])]),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"fill-in-the-blanks-questions"}},[_c('span',{staticClass:"anchor",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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"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"}},[_c('span',{staticClass:"anchor",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("")]),_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("")]),_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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-questions"}}),_v("Text Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Text questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute.\nIf no keywords are provided, the answer will always be marked as correct when placed in quizzes.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by simply looking for the keyword as a pattern in the user's answer!\nThis works well for some\n"),_c('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("
                                    ")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute.")]),_v(" "),_c('p',[_v("If you don't want to validate the answer at all, you may also omit the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute entirely. Doing so also always marks the question as correct inside "),_c('a',{attrs:{"href":"#quizzes"}},[_v("quizzes")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Text Question specific Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("keywords")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Comma delimited string of keywords or phrases to match the user's answer against.")])]),_v(" "),_c('tr',[_c('td',[_v("threshold")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0.5")])]),_v(" "),_c('td',[_v("Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.")])]),_v(" "),_c('tr',[_c('td',[_v("answer"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The answer or explanation to display when the user clicks the check button.")])])])])]),_c('box',{attrs:{"type":"important"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Deprecation notes")])]},proxy:true}])},[_v(" "),_c('ul',[_c('li',[_v("The old "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("has-input")]),_v(" attributes translate to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(", but will be deprecated in a future version.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v("s without a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type")]),_v(" (or an unrecognised one) will always be marked correct when placed in quizzes.")])])]),_v(" "),_c('h4',{attrs:{"id":"quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"quizzes"}}),_v("Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quizzes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also build a series of questions out of multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components.")]),_v(" "),_c('p',[_v("Simply place the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components you want to include into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component! No extra configuration is needed.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true-2"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"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"}},[_c('span',{staticClass:"anchor",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("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v("\n\n ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\n\n "),_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',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)])],1)])],1),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('popover',{attrs:{"id":"pop:footnotefn-50-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-50-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-50-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(35),_v(" "),_m(36),_v(" "),_m(37)],1)]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(38)])} +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('div'),_v(" "),_m(1),_v(" "),_c('box',[_c('div',[_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()"}})])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"headings-2"}},[_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-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()"}})])])],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-3"}},[_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-3"}},[_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-3","onclick":"event.stopPropagation()"}})])])])])],1),_v(" "),_m(2),_v(" "),_c('box',[_c('div',[_c('p',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(", "),_c('span',{staticClass:"large"},[_v("Large")]),_v(", "),_c('span',{staticClass:"small"},[_v("Small")]),_v(", Super"),_c('sup',[_v("script")]),_v(", Sub"),_c('sub',[_v("script")])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"text-styles-2"}},[_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")])])])])])],1),_v(" "),_m(3),_v(" "),_c('box',[_c('div',[_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested blockquote")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"blockquotes-2"}},[_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")])])])])])])],1),_v(" "),_m(4),_v(" "),_c('box',[_c('div',[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])])]),_v(" "),_c('ul',[_c('li',[_v("Item 2\n"),_c('ul',[_c('li',[_v("item 2.1")])])])]),_v(" "),_c('ul',{staticClass:"contains-task-list",attrs:{"radio-group":"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")])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"lists-2"}},[_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("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(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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)])],1),_v(" "),_m(5),_v(" "),_c('box',[_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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!")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"code-2"}},[_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 example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\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")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")]),_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"}},[_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To add a heading, add the attribute "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading")]),_v(" with the heading text as the value, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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)])],1),_v(" "),_m(6),_v(" "),_c('box',[_c('div',[_c('hr')]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"horizontal-rules-2"}},[_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')])])])],1),_v(" "),_m(7),_v(" "),_c('box',[_c('div',[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"links-2"}},[_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("")])]),_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("")]),_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("")]),_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(".")])])])])],1),_v(" "),_m(8),_v(" "),_c('box',[_c('div',[_v("\n1 + 1 = 2 ^[Math]\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"footnotes-2"}},[_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-53-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-53-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-53-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-53-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-53-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-53-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)])],1),_v(" "),_m(9),_v(" "),_c('box',[_c('div',[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":"alt text here","title":"title here"}})])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"images-2"}},[_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)])],1),_v(" "),_m(10),_v(" "),_c('box',[_c('div',[_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")])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"classes-attributes-and-amp-identifiers-2"}},[_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-2"}},[_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_c('p',{staticClass:"mb-4"},[_v("Some other types of markdown have "),_c('strong',[_v("different placements")]),_v(" of the curly group "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{...}")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered and Ordered lists")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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)])],1),_v(" "),_m(11),_v(" "),_c('box',[_c('div',[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tables-2"}},[_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')])])])])])])])],1),_v(" "),_m(12),_v(" "),_c('box',[_c('div',[_c('p',[_v("👍 ❗️ ❌ 🚧")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"emoji-2"}},[_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:\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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),_v(" "),_m(13),_v(" "),_c('box',[_c('div',[_c('p',[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"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('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"icons-2"}},[_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)])],1),_v(" "),_m(14),_v(" "),_c('box',[_c('div',[_c('p',[_v("Embedded YouTube video:")]),_v(" "),_c('div',{staticClass:"block-embed block-embed-service-youtube",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('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},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":""}})])])])])],1),_v(" "),_m(15),_v(" "),_c('box',[_c('div',[_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('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dates-2"}},[_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)])],1),_v(" "),_m(16),_v(" "),_c('box',[_c('div',[_c('p',[_v("Solve the following simultaneous equations:")]),_v(" "),_c('section',{staticClass:"eqno"},[_c('eqn',{pre:true},[_c('span',{pre:true,attrs:{"class":"katex-display"}},[_c('span',{pre:true,attrs:{"class":"katex"}},[_c('span',{pre:true,attrs:{"class":"katex-mathml"}},[_c('math',{pre:true,attrs:{"xmlns":"http://www.w3.org/1998/Math/MathML","display":"block"}},[_c('semantics',{pre:true},[_c('mrow',{pre:true},[_c('mn',{pre:true},[_v("3")]),_c('mi',{pre:true},[_v("x")]),_c('mo',{pre:true},[_v("+")]),_c('mi',{pre:true},[_v("y")]),_c('mo',{pre:true},[_v("=")]),_c('mn',{pre:true},[_v("11")])],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v(" 3x + y = 11 ")])],1)],1)],1),_c('span',{pre:true,attrs:{"class":"katex-html","aria-hidden":"true"}},[_c('span',{pre:true,attrs:{"class":"base"}},[_c('span',{pre:true,attrs:{"class":"strut","style":"height:0.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('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"math-formulae-2"}},[_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)])],1),_v(" "),_m(17),_v(" "),_c('box',[_c('div',[_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"}},[_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","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"badges-2"}},[_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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',[_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-2"}},[_v("Feature Y "),_c('span',{staticClass:"badge rounded-pill bg-success"},[_v("stable")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#feature-y-stable-2","onclick":"event.stopPropagation()"}})])])],1)]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You can refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/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-3"}},[_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-3","onclick":"event.stopPropagation()"}})])])])])],1),_v(" "),_m(18),_v(" "),_c('box',[_c('div',[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"boxes-2"}},[_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Boxes come with different built-in types.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" important\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#### Header :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use **markdown** here! :pizza:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_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(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" primary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" secondary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" danger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" dark\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a light color scheme for boxes")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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)])],1),_v(" "),_m(19),_v(" "),_c('box',[_c('div',[_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("minimal type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("seamless type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("info type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("danger type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("warning type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("success type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('p'),_v(" "),_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("light type panel (DEFAULT)")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("dark type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("primary type panel")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("secondary type panel")])]},proxy:true}])},[_v("\n ...\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"panels-2"}},[_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',[_v(" Lorem ipsum ...\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',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimized")]),_v(" attribute, panel is minimized into an inline block element. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("alt")]),_v(" attribute is for you to specify the minimized block header.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"How to cultivate a tomato plant at home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tomatoes\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**dark type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**primary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**secondary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**info type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**danger type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**warning type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**success type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**seamless type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**minimal type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have a close button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel does not have either buttons\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-close")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-switch")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_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('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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 3 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" minimal-type panel\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Level 1 Nested Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some Text\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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)])])],1),_v(" "),_m(20),_v(" "),_c('box',[_c('div',[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Content of the first tab\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Second tab")]},proxy:true}])},[_v("\n Contents of the second tab\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 📺")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Moon")]},proxy:true}])},[_v("\n Some stuff about the moon ...\n ")])],1)],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tabs-2"}},[_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(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tabs")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("active")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")])]),_v(" "),_c('td',[_v("Active Tab index (0-based)")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab is clickable and can be activated.")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab-group")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab Group title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab Group is clickable and can be activated.")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Tabs, tab group and individual tab can be omitted during printing by adding Bootstrap's display property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"d-print-none\"")]),_v(" to the respective components.")])]),_v(" "),_c('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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Second tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Contents of the second tab\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :tv:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Moon\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about the moon ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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)])],1),_v(" "),_m(21),_v(" "),_c('box',[_c('div',[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")])],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"pictures-2"}},[_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("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_c('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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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)])])],1),_v(" "),_m(22),_v(" "),_c('box',[_c('div',[_c('annotate',{attrs:{"src":"https://markbind.org/userGuide/diagrams/object.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"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("\"33%\"")]),_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 33% 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("\"66%\"")]),_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 66% 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',[_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%","content":"This point is 25% from the left and 25% from the top"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"This point is 50% from the left and 25% from the top","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"This point is 75% from the left and 25% from the top","header":"This has a header"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"This point is 33% from the left and 50% from the top","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"This point is 66% from the left and 50% from the top","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"This point is 25% from the left and 75% from the top","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"This point is 50% from the left and 75% from the top","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"This point is 75% from the left and 75% from the top","fontSize":"30","label":"3"}})],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%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Popover on the left","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Popover on the right","placement":"right"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom","trigger":"hover focus"}})],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%","content":"There is only text when you click me","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Clicking on this does nothing","label":"2","legend":"bottom","header":"Headers are displayed as well"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"There is text at both locations","label":"3","legend":"both","header":"Headers are displayed at both positions"}})],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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"Class inheritance","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"Aggregation","color":"blue","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow","legend":"both"}})],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%","content":"Operation is invoked","header":"Operation","opacity":"0.2","size":"30"}}),_v(" "),_c('a-point',{attrs:{"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"}}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","content":"Return control and possibly some return value","header":"Return Value","opacity":"0.2","size":"30","color":"blue"}})],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.")])]),_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.")])]),_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(".")])]),_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("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],1)],1)])])],1),_v(" "),_m(23),_v(" "),_c('box',[_c('div',[_c('thumb',{pre:true,attrs:{"circle":"","src":"https://markbind.org/images/logo-lightbackground.png","size":"100"}})],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"thumbnails-2"}},[_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)])],1),_v(" "),_m(24),_v(" "),_c('box',[_c('div',[_c('div',[_c('p',[_c('strong',[_v("Sequence Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/sequence.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"diagrams-2"}},[_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 don't have Graphviz installed (ignore this warning if you are on Windows). 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:{"src":"/userGuide/diagrams/sequence.png","width":"300"}})],1)],1)])]),_v(" "),_c('p',[_v("Alternatively, a PlantUML diagram can be specified in a separate "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file and inserted into a page using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])]),_c('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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1)])],1),_v(" "),_m(25),_v(" "),_c('box',[_c('div',[_c('div',{staticClass:"tree"},[_v("C:/course/\n├── textbook/\n│ └── index.md\n├── index.md\n├── reading.md\n└── site.json\n")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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)])],1),_v(" "),_m(26),_v(" "),_c('box',[_c('div',[_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)]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"tooltips-2"}},[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Tooltip on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Trigger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"click\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Click"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trigger")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"focus\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("input")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Focus\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(" />")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("**Free Text**:\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"coupling is the degree of interdependence between software modules; a measure of how closely connected two routines or modules are; the strength of the relationships between modules.\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("i")]),_v(">")]),_v("coupling"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This tooltip triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tt:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_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)])],1),_v(" "),_m(27),_v(" "),_c('box',[_c('div',[_c('p',[_v("Hover over the "),_c('trigger',{attrs:{"for":"pop:context-target"}},[_v("keyword")]),_v(" to see the popover.")],1),_v(" "),_c('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),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"popovers-2"}},[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Header"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on top"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"left\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lorem ipsum dolor sit amet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bottom\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Popover on bottom"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("hr")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Markdown"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using slot"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-secondary\"")]),_v(">")]),_v("Hover"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Content using src"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("h4")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no-index\"")]),_v(">")]),_v("Wrap Text"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("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("")]),_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('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("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This popover is triggered by a trigger\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:trigger_id\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v(" to see the popover.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("popover")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pop:context-target\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Popover header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placement")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"top\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("description :+1:\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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)])],1),_v(" "),_m(28),_v(" "),_c('box',[_c('div',[_c('p',[_v("Hover "),_c('trigger',{attrs:{"large":"","for":"modal:unused"}},[_v("here")]),_v(" to open a modal.")],1),_v(" "),_c('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),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"modals-2"}},[_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("")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v(" to open a modal.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Modal header\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:unused\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Modal content\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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)])],1)])],1),_v(" "),_m(29),_v(" "),_c('box',[_c('div',[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_v("Action")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('p'),_v(" "),_c('div',{staticClass:"btn-group d-flex",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"dropdowns-2"}},[_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)])])],1),_v(" "),_m(30),_v(" "),_c('box',[_c('div',[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"search-bars-2"}},[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search (Right-aligned dropdown)\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("")]),_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('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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("")]),_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('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}})],1)])])],1),_v(" "),_m(31),_v(" "),_c('box',[_c('div',[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"navbars"}},[_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Navbar allows visitors of your website to navigate through pages easily.")])]),_v(" "),_c('p',[_c('strong',[_v("Navbars support link highlighting; link highlighting can be customised by specifying rules.")])]),_v(" "),_c('ul',[_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default-highlight-on")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to specify fallback highlight rules.")]),_v(" "),_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("data-highlight")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("                                    ")]),_v(" tags with the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("nav-link")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dropdown-item")]),_v(" to specify individual highlight rules.")])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" to apply Bootstrap background styles.")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Navbar Link Highlighting")])])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug 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-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg 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-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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("")]),_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("")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot.")]),_v(" "),_c('p',[_v("By default, if the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lower-navbar")]),_v(" slot is not specified, the site and page navigation buttons are simply placed as such.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"lower-navbar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-menu-container\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav-button")]),_v(" />")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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)])],1),_v(" "),_m(32),_v(" "),_c('box',[_c('div',[_c('breadcrumb')],1),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"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)])],1),_v(" "),_m(33),_v(" "),_c('box',[_c('div'),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"site-navigation-menus-2"}},[_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])]),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_c('ol',[_c('li',[_v("Format your siteNav as an unordered Markdown list")]),_v(" "),_c('li',[_v("Include it under a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" element.")]),_v(" "),_c('li',[_v("(Optional) To make siteNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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"}})])])],1),_v(" "),_m(34),_v(" "),_c('box',[_c('div',[_c('p',[_v("You can see an example of a Page Navigation Bar "),_c('mark',[_v("on the right side")]),_v(" of "),_c('a',{attrs:{"target":"_blank","href":"/userGuide/formattingContents.html"}},[_v("this page")]),_v(".")])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"page-navigation-menus-2"}},[_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("")]),_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("")]),_v(" that will be placed at the top of the page navigation menu.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("Position the page navigation menu")]),_v(" within your layout using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])])]),_v(" "),_c('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("")]),_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("")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("Table of Contents")])])])])]),_v(" "),_c('p',[_v("You can specify multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("")]),_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("")]),_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("

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

                                    ")]),_v(" headings in the pageNav, and set a custom pageNav title like so:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("")]),_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("")]),_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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("HOME"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--ug 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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg 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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" {{ content }}\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"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("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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(".")])])])])],1),_v(" "),_m(35),_v(" "),_c('box',[_c('div',[_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('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},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("")]),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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.")])])])])],1),_v(" "),_m(36),_v(" "),_c('box',[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_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),_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"}},[_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),_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),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('span',{staticClass:"dimmed"},[_v("details...")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h2',{attrs:{"id":"questions-and-quizzes-2"}},[_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("")]),_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("...")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of the following is correct?\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hint")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Think out of the box! :fas-box:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from [Daily Mail](https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Think out of the box! "),_c('span',{staticClass:"fas fa-box",attrs:{"aria-hidden":"true"}})])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which of the following is correct?")])]},proxy:true}])},[_v(" "),_c('pic',{staticClass:"d-block mx-auto",attrs:{"src":"/images/math-question.jpg","alt":"math question image","height":"200"}},[_c('p',[_c('small',[_v("Adapted from "),_c('a',{attrs:{"href":"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html"}},[_v("Daily Mail")])])])]),_c('p'),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Multiply the numbers on the left together and add the leftmost number!")])]},proxy:true}])},[_v("\n 96\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Under normal circumstances, this would be correct.")])]},proxy:true}])},[_v("\n 19\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Simply add the running sum of the results as well!")])]},proxy:true}])},[_v("\n 40\n ")]),_v(" "),_c('q-option',[_v("\n 811\n ")])],1)],1)],1)]),_v(" "),_c('p',[_v("If you require more expressive formatting for your header or hint markup, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                    ")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                    ")]),_v(" slots. Expand the panel below to see an example!")]),_v(" "),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Header and Hint example "),_c('strong',[_v("with slots")])])]},proxy:true}])},[_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Headers and Hints using slots")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Which of the following is correct?"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Challenge: Try to get all the answers on your first try! ⭐️ ⭐️"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/images/math-question.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"math question image\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("height")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"200\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-block mx-auto\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("Adapted from "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.dailymail.co.uk/femail/article-4702868/Can-pass-intelligence-test.html\"")]),_v(">")]),_v("Daily Mail"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Think out of the box! "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-box\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("Need another hint? "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tooltip")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("content")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Two of the answers are correct!\"")]),_v(">")]),_v("Hover over me!"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("aria-hidden")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"true\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"fas fa-mouse-pointer\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])])]),_v(" "),_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("")]),_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("")]),_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("")]),_v(" attribute, or the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                    ")]),_v(" slot for more expressive formatting, similar to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("hint")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("header")]),_v(" options and slots.")]),_v(" "),_c('p',[_c('strong',[_v("MCQ Questions")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Division by zero is **undefined**!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" 1 / 0 = infinity\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" 11 / 11 = 1\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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-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)],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("")]),_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("")]),_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('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)],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("")]),_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("")]),_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("")]),_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("")]),_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('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("
                                    ")]),_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("")]),_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('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("")]),_v(" components.")]),_v(" "),_c('p',[_v("Simply place the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" components you want to include into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component! No extra configuration is needed.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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-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('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("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("reason")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is **correct**. We need to figure out if a positive test case works!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" It is ok to combine valid values for different inputs.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(">")]),_v("\n")]),_c('span',[_v(" No more than one invalid test input should be in a given test case.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("q-option")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("correct")]),_v(">")]),_v("\n")]),_c('span',[_v(" All invalid test inputs must be tested together.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"reason\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n")]),_c('span',[_v(" correctly by the SUT.\n")]),_c('span',[_v(" This is because most SUTs return an error message upon encountering the first invalid input.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" How do you figure out which inputs are wrong? (or correct)\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"blanks\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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-4"}},[_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-4","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-4"}},[_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-4","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)])],1),_c('hr',{staticClass:"footnotes-sep"}),_v(" "),_c('section',{staticClass:"footnotes"},[_c('ol',{staticClass:"footnotes-list"},[_c('popover',{attrs:{"id":"pop:footnotefn-53-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-53-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-53-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(37),_v(" "),_m(38),_v(" "),_m(39)],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(40)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"reader-facing-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"reader-facing-features"}}),_v("Reader-Facing Features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#reader-facing-features","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"reader-facing-features"}},[_v("Reader-Facing Features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#reader-facing-features","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"headings"}},[_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"text-styles"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"text-styles"}},[_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"blockquotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"blockquotes"}},[_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"lists"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"lists"}},[_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"code"}},[_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"horizontal-rules"}},[_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"links"}},[_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"footnotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"footnotes"}},[_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"images"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"images"}},[_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"classes-attributes-and-amp-identifiers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"classes-attributes-and-amp-identifiers"}},[_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"tables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"tables"}},[_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"emoji"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"emoji"}},[_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"icons"}},[_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"embeds"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"embeds"}},[_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"dates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"dates"}},[_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"math-formulae"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"math-formulae"}},[_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"badges"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges"}}),_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"badges"}},[_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"boxes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes"}}),_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"boxes"}},[_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"panels"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels"}}),_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"panels"}},[_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"tabs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs"}}),_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"tabs"}},[_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"pictures"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"pictures"}},[_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"annotations"}},[_c('span',{staticClass:"anchor",attrs:{"id":"annotations"}}),_v("Annotations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#annotations","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"annotations"}},[_v("Annotations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#annotations","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"thumbnails"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"thumbnails"}},[_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"diagrams"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"diagrams"}},[_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"tree"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tree"}}),_v("Tree"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tree","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"tree"}},[_v("Tree"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tree","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"tooltips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"tooltips"}},[_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"popovers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"popovers"}},[_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"modals"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"modals"}},[_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"dropdowns"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"dropdowns"}},[_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"search-bars"}},[_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"nav-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"nav-bars"}}),_v("Nav Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nav-bars","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"nav-bars"}},[_v("Nav Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#nav-bars","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"site-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"breadcrumbs"}},[_v("Breadcrumbs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#breadcrumbs","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"page-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"site-navigation-menus"}},[_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"questions-and-quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"page-navigation-menus"}},[_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-50-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} +with(this){return _c('h5',{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()"}})])} },function anonymous( ) { -with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-50-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.")])])} +with(this){return _c('h5',{attrs:{"id":"questions-and-quizzes"}},[_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-50-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.")])])} +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-53-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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('li',{staticClass:"footnote-item",attrs:{"id":"fn-53-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-53-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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/redirectingToACustom404Page.html b/userGuide/redirectingToACustom404Page.html index 5d559f0..c9f1f13 100644 --- a/userGuide/redirectingToACustom404Page.html +++ b/userGuide/redirectingToACustom404Page.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Redirecting to a Custom 404 Page - + + MarkBind - User Guide: Redirecting to a Custom 404 Page @@ -14,8 +12,7 @@ - - + @@ -23,15 +20,40 @@ 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. +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


                                    + diff --git a/userGuide/redirectingToACustom404Page.page-vue-render.js b/userGuide/redirectingToACustom404Page.page-vue-render.js index 8daee68..cfbb399 100644 --- a/userGuide/redirectingToACustom404Page.page-vue-render.js +++ b/userGuide/redirectingToACustom404Page.page-vue-render.js @@ -1,13 +1,31 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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(" "),_m(0),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(1)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('br'),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('br')],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(7)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"content-wrapper"}},[_c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Redirecting to a Custom 404 Page")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_c('em',[_v("User Guide → Redirecting to a Custom 404 Page")])])])]),_v(" "),_c('h1',{attrs:{"id":"redirecting-to-a-custom-404-page"}},[_c('span',{staticClass:"anchor",attrs:{"id":"redirecting-to-a-custom-404-page"}}),_v("Redirecting to a Custom 404 Page"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#redirecting-to-a-custom-404-page","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("Many popular static hosting services, such as "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(", support custom routing to a custom 404 HTML page.\nA default "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.md")]),_v(" file is provided, and you can customize it to create your own 404 page.\nThe "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.html")]),_v(" file will be created at the root of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(" folder.")])]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"modifying-the-default-404-page"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modifying-the-default-404-page"}}),_v("Modifying the default 404 page"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modifying-the-default-404-page","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("After a project is created with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(", the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.md")]),_v(" file will be generated in the root of the project.\nYou can click "),_c('a',{attrs:{"href":"/404.html"}},[_v("here")]),_v(" to view the default 404 page.\nTo edit the 404 page, you can simply edit this "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.md")]),_v(" file.")]),_v(" "),_c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/addingNavigationButtons.html"}},[_c('span',[_c('span',[_v("Adding Navigation Buttons")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])]),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])} +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Redirecting to a Custom 404 Page")])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_c('em',[_v("User Guide → Redirecting to a Custom 404 Page")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"redirecting-to-a-custom-404-page"}},[_v("Redirecting to a Custom 404 Page"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#redirecting-to-a-custom-404-page","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("Many popular static hosting services, such as "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(", support custom routing to a custom 404 HTML page.\nA default "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.md")]),_v(" file is provided, and you can customize it to create your own 404 page.\nThe "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.html")]),_v(" file will be created at the root of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(" folder.")])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"modifying-the-default-404-page"}},[_v("Modifying the default 404 page"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modifying-the-default-404-page","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("After a project is created with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(", the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.md")]),_v(" file will be generated in the root of the project.\nYou can click "),_c('a',{attrs:{"href":"/404.html"}},[_v("here")]),_v(" to view the default 404 page.\nTo edit the 404 page, you can simply edit this "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.md")]),_v(" file.")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("MarkBind in the Project Workflow")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/addingNavigationButtons.html"}},[_c('span',[_c('span',[_v("Adding Navigation Buttons")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 5.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/reusingContents.html b/userGuide/reusingContents.html index c387449..8d582d0 100644 --- a/userGuide/reusingContents.html +++ b/userGuide/reusingContents.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Reusing Contents - + + MarkBind - User Guide: Reusing Contents @@ -14,8 +12,7 @@ - - + @@ -23,51 +20,237 @@ 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>
 
 <variable name="options">
 * yes
 * no
 * maybe
 </variable>
-

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

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

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

                                    Built-in Global Variables

                                    MarkBind also provides a number of built-in variables.

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

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

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

                                    Page generated at: {{timestamp}}                                    		 Page generated at: Tue, 14 Feb 2023, 1:33:56 UTC
                                    MarkBind The MarkBind version in use, linked to the MarkBind website. Page generated by: {{MarkBind}} Page generated by: MarkBind 4.1.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
-:----- | :-------: | ----
-{% for student in studentScoreboard.students -%}
-{{ student.number }} | {{ student.score }} | {{ student.rank }}
-{% endfor %}
-
-<small>Last updated at {{ studentScoreboard.lastUpdated }}</small>
-

                                      JSON file used in example

                                      OUTPUT:

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

                                      Last updated at 21 November, 2020

                                      Importing from CSV files

                                      Example

                                      CODE:

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

                                      CSV file used in example

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

                                      OUTPUT:

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

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

                                      Global variables:

                                      _markbind/variables.md:

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

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

                                      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: Sun, 16 Jul 2023, 10:15:51 UTC
                                      MarkBind The MarkBind version in use, linked to the MarkBind website. Page generated by: {{MarkBind}} Page generated by: MarkBind 5.0.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
+:----- | :-------: | ----
+{% for student in studentScoreboard.students -%}
+{{ student.number }} | {{ student.score }} | {{ student.rank }}
+{% endfor %}
+
+<small>Last updated at {{ studentScoreboard.lastUpdated }}</small>
+

                                        JSON file used in example

                                        OUTPUT:

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

                                        Last updated at 21 November, 2020

                                        Importing from CSV files

                                        Example

                                        CODE:

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

                                        CSV file used in example

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

                                        OUTPUT:

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

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

                                        Global variables:

                                        _markbind/variables.md:

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

                                        The year was {{ year }}.

                                        User Guide → Reusing Contents → Includes

                                        Includes

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

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

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

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

                                        You can <include> a fragment of a file by specifying the #fragment-id at the end of the src attribute value, provided the fragment is wrapped in a <div>/<span> 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
-

                                        docs/tips.md:

                                        ...
+

                                        docs/tips.md:

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

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

                                        -The <include> 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 ...
-
                                        • optional (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,
                                          <include src="UserStories.md" optional />
-
                                        • trim (optional): remove leading and trailing whitespace and newlines from the document before including.
                                          <include src="UserStories.md#epic" trim />
-
                                        • omitFrontmatter (optional): omit the frontmatter of the file/fragment from being included (if any).
                                          <include src="UserStories.md#epic" omitFrontmatter />
-
                                        <include> Inside an Included File

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

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

                                        C:/mySite/ +

                                        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 ...
+
                                        • optional (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,
                                          <include src="UserStories.md" optional />
+
                                        • trim (optional): remove leading and trailing whitespace and newlines from the document before including.
                                          <include src="UserStories.md#epic" trim />
+
                                        • omitFrontmatter (optional): omit the frontmatter of the file/fragment from being included (if any).
                                          <include src="UserStories.md#epic" omitFrontmatter />
+
                                        <include> Inside an Included File

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

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

                                        C:/mySite/ ├── bookFiles/ │ ├── book.md │ ├── chapter1.md @@ -77,39 +260,168 @@

                                        The book.md:

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

                                        The review.md:

                                        # My Review
+

                                        The review.md:

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

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

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

                                        Specifying Variables in an <include>

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

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

                                        <include src="article.md">
+

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

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

                                        Specifying Variables in an <include>

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

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

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

                                        In article.md:

                                        # {{ title }}<br>
+

                                        In article.md:

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

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

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

                                        Example Specifying title and author variables inline:

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

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

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

                                        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"
+    }
+  ],
+}
+

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

                                        In site.json we then exclude the fragment from the page generation with pagesExclude:

                                        ...
+

                                        In site.json we then exclude the fragment from the page generation with pagesExclude:

                                        ...
 "pagesExclude": [
   "**/*-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 @@ -122,15 +434,63 @@

                                        The book.md:

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

                                        The chapter1/chapter.md:

                                        ## Text
+

                                        The chapter1/chapter.md:

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

                                        The chapter2/chapter.md:

                                        ## Text
+

                                        The chapter2/chapter.md:

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

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

                                        To use a code fragment as a boilerplate file,

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

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

                                        C:/mySite/ +

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

                                        To use a code fragment as a boilerplate file,

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

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

                                        C:/mySite/ ├── _markbind/boilerplates/ │ └── chapter.md ├── chapter1/ @@ -143,20 +503,84 @@

                                        The book.md:

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

                                        The _markbind/boilerplates/chapter.md:

                                        ## Text
+

                                        The _markbind/boilerplates/chapter.md:

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

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

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

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

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

                                        C:/mySite/ +

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

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

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

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

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

                                        It needs to be used as follows:

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

                                        Reusing Contents Across Sites

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

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

                                        C:/course/ +

                                        Reusing Contents Across Sites

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

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

                                        C:/course/ ├── textbook/ │ ├── index.md │ ├── overview.md @@ -166,35 +590,146 @@ └── site.json

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

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

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

                                        Creating Content Variations

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

                                        Allowing users to remove some contents

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

                                        To make an element closeable, use v-closeable.

                                        <div v-closeable>
+

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

                                        Creating Content Variations

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

                                        Allowing users to remove some contents

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

                                        To make an element closeable, use v-closeable.

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

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

                                        Optional video:

                                        Giving alternative contents

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

                                        Giving access to additional contents

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

                                        Organizing contents in alternative ways

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

                                        Optimizing the Print View

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

                                        @media print {
+

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

                                        Optional video:

                                        Giving alternative contents

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

                                        Giving access to additional contents

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

                                        Organizing contents in alternative ways

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

                                        Optimizing the Print View

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

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

                                        Hiding some info in the generated content

                                        To permanently hide a fragment from the reader:

                                        <span class="d-none">
+

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

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

                                        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


                                        + diff --git a/userGuide/reusingContents.page-vue-render.js b/userGuide/reusingContents.page-vue-render.js index 8c2fa5d..0f0ffd8 100644 --- a/userGuide/reusingContents.page-vue-render.js +++ b/userGuide/reusingContents.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('p',[_v("MarkBind does not aim to alter the already robust variable features of Nunjucks, but provides several extensions to it.")]),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('p',[_v("The variables declared here are available from anywhere in the code base.")]),_v(" "),_m(9),_v(" "),_c('p',[_v("To include a variable value in your code, give the variable id enclosed in Nunjucks' double curly braces syntax.")]),_v(" "),_m(10),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any variables set via Nunjucks' tags (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% set %}")]),_v(").")])]),_v(" "),_m(11),_v(" "),_c('p',[_v("MarkBind also provides a number of built-in variables.")]),_v(" "),_m(12),_m(13),_v(" "),_m(14),_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("")]),_v("\n")])])])])]),_c('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("JSON file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("JSON File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"JSON File","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"lastUpdated\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"21 November, 2020\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"students\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234567X\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("87")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234123U\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("60")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("3")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A9876543L\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("76")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("2")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ]\n")]),_c('span',[_v("}\n")])])])])])]),_v(" "),_c('br')],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])]),_c('p',[_c('small',[_v("Last updated at 21 November, 2020")])])])],1)]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from CSV files")]},proxy:true}])},[_v(" "),_c('p',[_c('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('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("CSV file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("CSV File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"CSV File","class":"hljs"}},[_c('span',[_v("number,score,rank\n")]),_c('span',[_v("A1234567X,87,1\n")]),_c('span',[_v("A1234123U,60,3\n")]),_c('span',[_v("A9876543L,76,2\n")])])])])])]),_v(" "),_c('br'),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v(" If you do not want to have a header row, you can specify it by appending a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("noHeader")]),_v(" option at the end of the variable declaration. In this example, it should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.csv\", noHeader %}")]),_v(" . Elements have to be accessed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[]")]),_v(" operator (i.e. using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student[0]")]),_v(" to access student number instead of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student.number")]),_v(").")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])])])],1)])],1),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("Only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".csv")]),_v(" files are supported for now.")])]),_v(" "),_m(15)],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_c('p',[_v("Choose "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                        ")]),_v(" over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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(" "),_m(22),_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("")]),_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(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_c('p',[_c('strong',[_v("Although the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute of an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" is given "),_c('em',[_v("relative")]),_v(" to the current directory, it is converted to an "),_c('em',[_v("absolute")]),_v(" value "),_c('em',[_v("before")]),_v(" the "),_c('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("")])]},proxy:true}])},[_v("host file")]),_v(" is included from another file.")],1)]),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_c('hr'),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_m(33),_v(" "),_m(34),_v(" "),_c('hr'),_v(" "),_m(35),_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("")]),_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('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(" "),_m(36),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/course/\n├── content-fragment.md\n├── index.md\n├── reading.md\n└── site.json\n")]),_v(" "),_m(37),_v(" "),_m(38),_m(39),_v(" "),_m(40),_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(" "),_m(41),_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("")]),_v(" in this case because the code included using a normal "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" stays relative to the original location while boilerplate code needs to be interpreted relative to the location it is being used.")]),_v(" "),_m(42),_v(" "),_c('p',[_v("To use a code fragment as a boilerplate file,")]),_v(" "),_m(43),_v(" "),_m(44),_v(" "),_m(45),_v(" "),_m(46),_v(" "),_m(47)],1),_v(" "),_c('hr'),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_m(50),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nIf you are using Git for version control, you can set up the sub-site repository as a "),_c('a',{attrs:{"href":"https://git-scm.com/book/en/v2/Git-Tools-Submodules"}},[_v("Git sub-module")]),_v(" of the main site repository.")])])],1),_v(" "),_c('hr'),_v(" "),_m(51),_v(" "),_m(52),_v(" "),_m(53),_v(" "),_c('p',[_v("When the readers can remove an item from a page, they can create their own version of the page by removing items they don't want to see. This is especially useful when printing a page.")]),_v(" "),_m(54),_v(" "),_c('div',{staticClass:"indented"},[_m(55),_c('p',[_v("This is how the content will appear. Note how you can hover over the content to access the ❌ button that can collapse the content.")]),_v(" "),_c('div',{directives:[{name:"closeable",rawName:"v-closeable"}]},[_c('p',[_v("Optional video:")]),_v(" "),_m(56)])]),_v(" "),_m(57),_v(" "),_m(58),_v(" "),_m(59),_v(" "),_c('p',[_v("You can use following components to give readers an option to access additional content at their discretion.")]),_v(" "),_m(60),_v(" "),_m(61),_v(" "),_m(62),_v(" "),_m(63),_v(" "),_m(64),_v(" "),_m(65),_m(66),_v(" "),_c('p',[_v("To permanently hide a fragment from the reader:")]),_v(" "),_m(67),_m(68),_v(" "),_m(69),_c('p',[_v("Then, in a page-specific CSS file,")]),_v(" "),_m(70),_m(71),_v(" "),_m(72),_v(" "),_c('p',[_v("This may especially be useful for users who are serving a page from a submodule.")]),_v(" "),_m(73),_v(" "),_m(74),_v(" "),_m(75),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#reusing-contents"}},[_v("Reusing Contents‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#variables"}},[_v("Variables‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#global-variables"}},[_v("Global Variables‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#built-in-global-variables"}},[_v("Built-in Global Variables‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#importing-variables-from-other-external-file-formats"}},[_v("Importing variables from other external file formats‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#includes"}},[_v("Includes‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-boilerplate-files"}},[_v("Using Boilerplate Files‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#reusing-contents-across-sites"}},[_v("Reusing Contents Across Sites‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#creating-content-variations"}},[_v("Creating Content Variations‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#allowing-users-to-remove-some-contents"}},[_v("Allowing users to remove some contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#giving-alternative-contents"}},[_v("Giving alternative contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#giving-access-to-additional-contents"}},[_v("Giving access to additional contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#organizing-contents-in-alternative-ways"}},[_v("Organizing contents in alternative ways‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#optimizing-the-print-view"}},[_v("Optimizing the Print View‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#hiding-some-info-in-the-generated-content"}},[_v("Hiding some info in the generated content‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-a-page-multiple-times-with-different-titles"}},[_v("Deploying a page multiple times with different titles‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#creating-slight-variations-of-content"}},[_v("Creating slight variations of content‎")])])])])],1)])],1),_v(" "),_m(76)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('p',[_v("MarkBind does not aim to alter the already robust variable features of Nunjucks, but provides several extensions to it.")]),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('p',[_v("The variables declared here are available from anywhere in the code base.")]),_v(" "),_c('div',{staticClass:"indented"},[_m(9),_v(" "),_c('pre',[_m(10),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.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(" "),_m(11),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any variables set via Nunjucks' tags (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% set %}")]),_v(").")])]),_v(" "),_m(12),_v(" "),_c('p',[_v("MarkBind also provides a number of built-in variables.")]),_v(" "),_m(13),_m(14),_v(" "),_m(15),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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(" "),_m(16),_v(" "),_c('pre',[_m(17),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(18)])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_m(23),_v(" "),_c('pre',[_m(24),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(25),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_c('p',[_v("Choose "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                        ")]),_v(" over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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"},[_m(26),_v(" "),_c('pre',[_m(27),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(28),_v(" "),_c('pre',[_m(29),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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("")]),_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(" "),_m(30),_v(" "),_c('ul',[_m(31),_v(" "),_c('li',[_m(32),_v(" (optional): make the included result an inline element. (wrapped in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag). e.g.,"),_c('pre',[_m(33),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(34),_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',[_m(35),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(36),_v(" (optional): remove leading and trailing whitespace and newlines from the document before including."),_c('pre',[_m(37),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(38),_v(" (optional): omit the frontmatter of the file/fragment from being included (if any)."),_c('pre',[_m(39),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_m(40),_v(" "),_c('p',[_c('strong',[_v("Although the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute of an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" is given "),_c('em',[_v("relative")]),_v(" to the current directory, it is converted to an "),_c('em',[_v("absolute")]),_v(" value "),_c('em',[_v("before")]),_v(" the "),_c('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("")])]},proxy:true}])},[_v("host file")]),_v(" is included from another file.")],1)]),_v(" "),_c('div',{staticClass:"indented"},[_m(41),_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(" "),_m(42),_v(" "),_c('pre',[_m(43),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(44),_v(" "),_c('pre',[_m(45),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(46)]),_v(" "),_m(47),_v(" "),_c('hr'),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_c('div',{staticClass:"indented"},[_m(50),_v(" "),_c('pre',[_m(51),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(52),_v(" "),_c('pre',[_m(53),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(54),_v(" "),_m(55),_v(" "),_c('div',{staticClass:"indented"},[_m(56),_v(" "),_c('pre',[_m(57),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(58),_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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("")])]),_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('hr'),_v(" "),_m(59),_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("")]),_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(" "),_m(60),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/course/\n├── content-fragment.md\n├── index.md\n├── reading.md\n└── site.json\n")]),_v(" "),_m(61),_v(" "),_c('pre',[_m(62),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(63),_v(" "),_c('pre',[_m(64),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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(" "),_m(65),_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("")]),_v(" in this case because the code included using a normal "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" stays relative to the original location while boilerplate code needs to be interpreted relative to the location it is being used.")]),_v(" "),_c('div',{staticClass:"indented"},[_m(66),_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(" "),_m(67),_v(" "),_c('pre',[_m(68),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(69),_v(" "),_c('pre',[_m(70),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(71),_v(" "),_c('pre',[_m(72),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(73)]),_v(" "),_c('p',[_v("To use a code fragment as a boilerplate file,")]),_v(" "),_m(74),_v(" "),_c('div',{staticClass:"indented"},[_m(75),_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(" "),_m(76),_v(" "),_c('pre',[_m(77),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(78),_v(" "),_c('pre',[_m(79),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(80),_v(" "),_m(81)]),_v(" "),_m(82),_v(" "),_c('div',{staticClass:"indented"},[_m(83),_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',[_m(84),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(85),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('hr'),_v(" "),_m(86),_v(" "),_m(87),_v(" "),_c('div',{staticClass:"indented"},[_m(88),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/course/\n├── textbook/\n│ ├── index.md\n│ ├── overview.md\n│ └── site.json\n├── index.md\n├── reading.md\n└── site.json\n")]),_v(" "),_m(89),_v(" "),_c('pre',[_m(90),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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("\nIf you are using Git for version control, you can set up the sub-site repository as a "),_c('a',{attrs:{"href":"https://git-scm.com/book/en/v2/Git-Tools-Submodules"}},[_v("Git sub-module")]),_v(" of the main site repository.")])])],1),_v(" "),_c('hr'),_v(" "),_m(91),_v(" "),_m(92),_v(" "),_m(93),_v(" "),_c('p',[_v("When the readers can remove an item from a page, they can create their own version of the page by removing items they don't want to see. This is especially useful when printing a page.")]),_v(" "),_m(94),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(95),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 how the content will appear. Note how you can hover over the content to access the ❌ button that can collapse the content.")]),_v(" "),_c('div',{directives:[{name:"closeable",rawName:"v-closeable"}]},[_c('p',[_v("Optional video:")]),_v(" "),_m(96)])]),_v(" "),_m(97),_v(" "),_m(98),_v(" "),_m(99),_v(" "),_c('p',[_v("You can use following components to give readers an option to access additional content at their discretion.")]),_v(" "),_m(100),_v(" "),_m(101),_v(" "),_m(102),_v(" "),_m(103),_v(" "),_m(104),_v(" "),_c('pre',[_m(105),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(106),_v(" "),_c('p',[_v("To permanently hide a fragment from the reader:")]),_v(" "),_c('pre',[_m(107),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(108),_v(" "),_c('pre',[_m(109),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 a page-specific CSS file,")]),_v(" "),_c('pre',[_m(110),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(111),_v(" "),_m(112),_v(" "),_c('p',[_v("This may especially be useful for users who are serving a page from a submodule.")]),_v(" "),_m(113),_v(" "),_m(114),_v(" "),_m(115),_v(" "),_c('br')],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":"#reusing-contents"}},[_v("Reusing Contents‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#variables"}},[_v("Variables‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#global-variables"}},[_v("Global Variables‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#built-in-global-variables"}},[_v("Built-in Global Variables‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#importing-variables-from-other-external-file-formats"}},[_v("Importing variables from other external file formats‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#includes"}},[_v("Includes‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-boilerplate-files"}},[_v("Using Boilerplate Files‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#reusing-contents-across-sites"}},[_v("Reusing Contents Across Sites‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#creating-content-variations"}},[_v("Creating Content Variations‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#allowing-users-to-remove-some-contents"}},[_v("Allowing users to remove some contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#giving-alternative-contents"}},[_v("Giving alternative contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#giving-access-to-additional-contents"}},[_v("Giving access to additional contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#organizing-contents-in-alternative-ways"}},[_v("Organizing contents in alternative ways‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#optimizing-the-print-view"}},[_v("Optimizing the Print View‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#hiding-some-info-in-the-generated-content"}},[_v("Hiding some info in the generated content‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploying-a-page-multiple-times-with-different-titles"}},[_v("Deploying a page multiple times with different titles‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#creating-slight-variations-of-content"}},[_v("Creating slight variations of content‎")])])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(116)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,7 +11,7 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_c('em',[_v("User Guide → Reusing Contents")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"reusing-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"reusing-contents"}}),_v("Reusing Contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#reusing-contents","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"reusing-contents"}},[_v("Reusing Contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#reusing-contents","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind is highly-optimized for content reuse")]),_v(". It offers several mechanisms to provide readers with many variations of the content while minimizing duplication at source file level. As a result, instead of creating a one-size-fits-all site, MarkBind can create a site in which readers can chart their own path of reading.")])])} @@ -20,43 +20,52 @@ with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p', with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_c('em',[_v("User Guide → Reusing Contents → Variables")])])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"variables"}}),_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"variables"}},[_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _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.")])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"global-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"global-variables"}}),_v("Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#global-variables","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"global-variables"}},[_v("Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#global-variables","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Global variables are to be defined in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(" file.")]),_v(" Each variable must have an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" and the value can be any MarkBind-compliant code fragment. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" should not contain "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search-option")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search.options")]),_v(" are not allowed.")])} },function anonymous( ) { -with(this){return _c('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("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"options\"")]),_v(">")]),_v("\n")]),_c('span',[_v("* yes\n")]),_c('span',[_v("* no\n")]),_c('span',[_v("* maybe\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _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(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"year\"")]),_v(">")]),_v("2018"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"options\"")]),_v(">")]),_v("\n")]),_c('span',[_v("* yes\n")]),_c('span',[_v("* no\n")]),_c('span',[_v("* maybe\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('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.")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"built-in-global-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"built-in-global-variables"}}),_v("Built-in Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#built-in-global-variables","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("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("")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")])])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timestamp")])]),_v(" "),_c('td',[_v("The time stamp that indicates when the page was generated. "),_c('br'),_c('br'),_v(" The "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#timezone"}},[_v("default")]),_v(" values of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"timeZone\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"locale\"")]),_v(" are "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" respectively.")]),_v(" "),_c('td',[_v("The following example showcases the use of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Asia/Singapore\"")]),_v(" time zone."),_c('br'),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: {{timestamp}}")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: Tue, 14 Feb 2023, 1:33:56 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 4.1.0")])])])])])])} +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("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("")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")])])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timestamp")])]),_v(" "),_c('td',[_v("The time stamp that indicates when the page was generated. "),_c('br'),_c('br'),_v(" The "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#timezone"}},[_v("default")]),_v(" values of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"timeZone\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"locale\"")]),_v(" are "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" respectively.")]),_v(" "),_c('td',[_v("The following example showcases the use of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Asia/Singapore\"")]),_v(" time zone."),_c('br'),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: {{timestamp}}")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Page generated at: Sun, 16 Jul 2023, 10:15: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.0.0")])])])])])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"importing-variables-from-other-external-file-formats"}},[_c('span',{staticClass:"anchor",attrs:{"id":"importing-variables-from-other-external-file-formats"}}),_v("Importing variables from other external file formats"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#importing-variables-from-other-external-file-formats","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("You can also source variables from external files using MarkBind's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext varName = \"filepathToFile\" %}")]),_v(" Nunjucks extension.\nThis is useful if you have external datasets you want to display in your site!")])} },function anonymous( ) { -with(this){return _c('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("")]),_v("\n")])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")])])])} +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"year\"")]),_v(">")]),_v("2018"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")])])} },function anonymous( ) { with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_c('em',[_v("User Guide → Reusing Contents → Includes")])])])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"includes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"includes"}}),_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"includes"}},[_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _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("")]),_v(" mechanism")]),_v(" which allows you to create documents by combining other content fragments.")])])} @@ -65,37 +74,97 @@ with(this){return _c('div',{attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("M with(this){return _c('p',[_c('strong',[_v("You can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag to include another markdown or HTML document into the current document.")])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _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.")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Tip 1. ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tips/tip2.md\"")]),_v(" />")]),_v("\n")]),_c('span',[_v("Tip 3. ...\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("You can "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" a fragment of a file")]),_v(" by specifying the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#fragment-id")]),_v(" at the end of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute value, provided the fragment is wrapped in a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                        ")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag with the matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(".")])} },function anonymous( ) { -with(this){return _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('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("")]),_v("\n")]),_c('span',[_v("Tip 2. ...\n")])])])])} +with(this){return _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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("Some text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docs/tips.md#tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v("Some other text\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/tips.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v(" Tip 1. ...\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("Tip 2. ...\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Attributes:")])])} },function anonymous( ) { -with(this){return _c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(": specify the source file path.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("inline")])]),_v(" (optional): make the included result an inline element. (wrapped in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag). e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("The title is "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../docs/summary.md#title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" />")]),_v(" while ...\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("optional")])]),_v(" (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("optional")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trim")])]),_v(" (optional): remove leading and trailing whitespace and newlines from the document before including."),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md#epic\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])]),_v(" (optional): omit the 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")])])])])])} +with(this){return _c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(": specify the source file path.")])} +},function anonymous( +) { +with(this){return _c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("inline")])])} +},function anonymous( +) { +with(this){return _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")])])} +},function anonymous( +) { +with(this){return _c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("optional")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,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")])])} +},function anonymous( +) { +with(this){return _c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trim")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,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")])])} +},function anonymous( +) { +with(this){return _c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,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")])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"include-inside-an-included-file"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" Inside an Included File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#include-inside-an-included-file","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('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.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2.md\"")]),_v(" />")])]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(":")])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"include-inside-an-included-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"include-inside-an-included-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" Inside an Included File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#include-inside-an-included-file","onclick":"event.stopPropagation()"}})])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Review")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../bookFiles/book.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_v("...\n")])])} },function anonymous( ) { -with(this){return _c('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('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Review")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../bookFiles/book.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_v("...\n")])])]),_c('p',[_v("The content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" will be included in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(" (via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") although "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" are not in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reviewFiles")]),_v(" directory. i.e., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" will be interpreted as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")])])])} +with(this){return _c('p',[_v("The content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" will be included in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(" (via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(") although "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" are not in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reviewFiles")]),_v(" directory. i.e., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" will be interpreted as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")])])} },function anonymous( ) { with(this){return _c('p',[_v("In other words, "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" interprets the reused code relative to the original location of the file, not the location in which it is reused.")])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"specifying-variables-in-an-include"}},[_c('span',{staticClass:"anchor",attrs:{"id":"specifying-variables-in-an-include"}}),_v("Specifying Variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-variables-in-an-include","onclick":"event.stopPropagation()"}})])} +with(this){return _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("")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-variables-in-an-include","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("It is possible to include variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(".")])])} },function anonymous( ) { -with(this){return _c('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("")]),_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("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"author\"")]),_v(">")]),_v("John Doe"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_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")])])])])} +with(this){return _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("")]),_v(" tag:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"article.md\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(">")]),_v("My Title"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"author\"")]),_v(">")]),_v("John Doe"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("article.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# {{ title }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("Author: {{ author }}\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("These variables work the same way as variables in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(", except that they only apply to the included file. They allow the included file to be reused as a template, for different source files using different variable values.")])} @@ -104,13 +173,16 @@ with(this){return _c('p',[_v("These variables work the same way as variables in with(this){return _c('p',[_v("You can also specify include variables within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag itself by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("var-")]),_v(" prefix.")])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"article.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("var-title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"My Title\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("var-author")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"John Doe\"")]),_v(" />")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('p',[_v("If the same variable is defined in a chain of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v("s (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("a.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("b.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("c.md")]),_v("...), variables defined in the top-most "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" will take precedence. Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" variables.")])} +with(this){return _c('p',[_v("If the same variable is defined in a chain of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v("s (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("a.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("b.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("c.md")]),_v("...), variables defined in the top-most "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" will take precedence. Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" variables.\nThis is to allow the outer context to adapt the reused content without changing its actual content.")])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"excluding-files-from-rendering-as-pages"}},[_c('span',{staticClass:"anchor",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()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _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.")])} @@ -119,112 +191,160 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _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("):")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# Week 1 Reading:")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-fragment.md\"")]),_v(" />")])]),_v("\n")])])])} +with(this){return _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")])])} +},function anonymous( +) { +with(this){return _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(":")])} +},function anonymous( +) { +with(this){return _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")])])} +},function anonymous( +) { +with(this){return _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()"}})])} +},function anonymous( +) { +with(this){return _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.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" />")])]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('p',[_v("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/syntax/siteJsonFile.html#pagesexclude"}},[_v("pagesExclude")]),_v(":")])} +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1/chapter.md")]),_v(":")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs 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")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"using-boilerplate-files"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-boilerplate-files"}}),_v("Using Boilerplate Files"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-boilerplate-files","onclick":"event.stopPropagation()"}})])} +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2/chapter.md")]),_v(":")])} },function anonymous( ) { -with(this){return _c('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('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("As you can see, both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files are exactly the same. If we were to use only one of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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.")])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("As you can see, both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files are exactly the same. If we were to use only one of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" it twice in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(", we'll end up with the same chapter content duplicated twice, which is not what we want. In other words, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" contains boilerplate code that needs to be interpreted relative to where it is applied, once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory and once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])} },function anonymous( ) { with(this){return _c('ol',[_c('li',[_v("Put the code in a file inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" the file "),_c('em',[_v("as if")]),_v(" a copy of it exists in any directory you want it to applied, but add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")])])} },function anonymous( ) { -with(this){return _c('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('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("Consider the line "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("")]),_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.")])])} +with(this){return _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(":")])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Book")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" />")])]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates/chapter.md")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Consider the line "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(". Note how you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src=\"chapter1/chapter.md\"")]),_v(" 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).")])} +},function anonymous( +) { +with(this){return _c('p',[_v("Similarly, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" interprets the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" relative to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])} },function anonymous( ) { with(this){return _c('p',[_v("If you have many boilerplate files, you can organize them into directories inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind")]),_v(" directory. When using such boilerplate files, you need to replace "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate=\"\"")]),_v(".")])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter1/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"book/chapter.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"chapter2/chapter.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"book/chapter.md\"")]),_v(" />")])]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('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("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"foo.md#bar\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("boilerplate")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("inline")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("variable")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"x\"")]),_v(">")])]),_v("5"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"reusing-contents-across-sites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"reusing-contents-across-sites"}}),_v("Reusing Contents Across Sites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#reusing-contents-across-sites","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"reusing-contents-across-sites"}},[_v("Reusing Contents Across Sites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#reusing-contents-across-sites","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("MarkBind supports reusing across sites.")]),_v(" It allows you to include the pages you want from a "),_c('em',[_v("sub-site")]),_v(" in another "),_c('em',[_v("main-site")]),_v(" without having to change anything in the source files of the "),_c('em',[_v("sub-site")]),_v(" as long as the "),_c('em',[_v("sub-site")]),_v(" source files are inside the directory of the "),_c('em',[_v("main-site")]),_v(".")])} },function anonymous( ) { -with(this){return _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 site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v(" and you want to include some pages from it in another site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(". Given below is how you can locate the sub-site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v(" inside the root directory of the main-site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(" so that files from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v(" can be reused in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(" site.")]),_v(" "),_c('div',{staticClass:"tree"},[_v("C:/course/\n├── textbook/\n│ ├── index.md\n│ ├── overview.md\n│ └── site.json\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 sub-site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_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("\"textbook/overview.md\"")]),_v(" />")])]),_v("\n")])])])])} +with(this){return _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 site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v(" and you want to include some pages from it in another site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(". Given below is how you can locate the sub-site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v(" inside the root directory of the main-site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(" so that files from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v(" can be reused in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("course")]),_v(" site.")])} +},function anonymous( +) { +with(this){return _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 sub-site "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook")]),_v("):")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# Week 1 Reading:")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/overview.md\"")]),_v(" />")])]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"creating-content-variations"}},[_c('span',{staticClass:"anchor",attrs:{"id":"creating-content-variations"}}),_v("Creating Content Variations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#creating-content-variations","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"creating-content-variations"}},[_v("Creating Content Variations"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#creating-content-variations","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("MarkBind can create sites that give more control to the reader.")]),_v(" Given below are some mechanisms authors can use to create variations of content that gives more control to the reader in charting their own path through the content.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"allowing-users-to-remove-some-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"allowing-users-to-remove-some-contents"}}),_v("Allowing users to remove some contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#allowing-users-to-remove-some-contents","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"allowing-users-to-remove-some-contents"}},[_v("Allowing users to remove some contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#allowing-users-to-remove-some-contents","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("To make an element closeable, use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-closeable")]),_v(".")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("v-closeable")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Optional video:\n")]),_c('span',[_v("\n")]),_c('span',[_v("@[youtube](v40b3ExbM0c)\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("v-closeable")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Optional video:\n")]),_c('span',[_v("\n")]),_c('span',[_v("@[youtube](v40b3ExbM0c)\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('div',{staticClass:"block-embed block-embed-service-youtube",staticStyle:{"position":"relative","padding-bottom":"60.9375%"}},[_c('iframe',{attrs:{"type":"text/html","src":"//www.youtube.com/embed/v40b3ExbM0c","frameborder":"0","webkitallowfullscreen":"","mozallowfullscreen":"","allowfullscreen":""}})])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"giving-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"giving-alternative-contents"}}),_v("Giving alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#giving-alternative-contents","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"giving-alternative-contents"}},[_v("Giving alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#giving-alternative-contents","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("You can use a "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#tabs"}},[_c('em',[_v("Tabs")]),_v(" component")]),_v(" to give alternative versions of content, for example, giving a code snippet in different programming languages.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"giving-access-to-additional-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"giving-access-to-additional-contents"}}),_v("Giving access to additional contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#giving-access-to-additional-contents","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"giving-access-to-additional-contents"}},[_v("Giving access to additional contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#giving-access-to-additional-contents","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('ul',[_c('li',[_c('a',{attrs:{"href":"/userGuide/components/popups.html#tooltip"}},[_v("Tooltips")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/components/popups.html#popover"}},[_v("Popovers")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/components/popups.html#modal"}},[_v("Modals")])]),_v(" "),_c('li',[_c('a',{attrs:{"href":"/userGuide/components/presentation.html#panels"}},[_v("Expandable Panels")])])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"organizing-contents-in-alternative-ways"}},[_c('span',{staticClass:"anchor",attrs:{"id":"organizing-contents-in-alternative-ways"}}),_v("Organizing contents in alternative ways"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#organizing-contents-in-alternative-ways","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"organizing-contents-in-alternative-ways"}},[_v("Organizing contents in alternative ways"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#organizing-contents-in-alternative-ways","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("You can take advantage of "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("MarkBind's feature for content reuse")]),_v(" to organize content in alternative ways to cater for different readers, without having to duplicate content. For example, you can have different pages that organizes the same information alphabetically, chronologically, by difficulty, group information by topic, etc.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"optimizing-the-print-view"}},[_c('span',{staticClass:"anchor",attrs:{"id":"optimizing-the-print-view"}}),_v("Optimizing the Print View"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#optimizing-the-print-view","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"optimizing-the-print-view"}},[_v("Optimizing the Print View"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#optimizing-the-print-view","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("To "),_c('span',{staticClass:"keyword"},[_v("hide minimized panels in the "),_c('em',[_v("print view")])]),_v(", add the following code to a CSS file used in your site.")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs css"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("@media")]),_v(" print {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".card-container")]),_v(" > "),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".morph")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": none;\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs css"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("@media")]),_v(" print {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".card-container")]),_v(" > "),_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".morph")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": none;\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"hiding-some-info-in-the-generated-content"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-some-info-in-the-generated-content"}}),_v("Hiding some info in the generated content"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-some-info-in-the-generated-content","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"hiding-some-info-in-the-generated-content"}},[_v("Hiding some info in the generated content"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-some-info-in-the-generated-content","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" content to hide ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"...\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("add-class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" content to hide ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" content to hide ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"...\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("add-class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" content to hide ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("To hide a fragment in one specific page, 'mark' the elements using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class")]),_v(":")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" content to hide ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"extra\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" content to hide ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs css"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".extra")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": none; "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* 'block' or 'inline-block' if you want it to show */")]),_v("\n")]),_c('span',[_v("}\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs css"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-class"}},[_v(".extra")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("display")]),_v(": none; "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/* 'block' or 'inline-block' if you want it to show */")]),_v("\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"deploying-a-page-multiple-times-with-different-titles"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploying-a-page-multiple-times-with-different-titles"}}),_v("Deploying a page multiple times with different titles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-a-page-multiple-times-with-different-titles","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"deploying-a-page-multiple-times-with-different-titles"}},[_v("Deploying a page multiple times with different titles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploying-a-page-multiple-times-with-different-titles","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("By "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#front-matter"}},[_v("overriding the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")]),_v(" declared in the frontmatter of the page using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(", it is possible to allow MarkBind to serve the same page with different titles.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"creating-slight-variations-of-content"}},[_c('span',{staticClass:"anchor",attrs:{"id":"creating-slight-variations-of-content"}}),_v("Creating slight variations of content"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#creating-slight-variations-of-content","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"creating-slight-variations-of-content"}},[_v("Creating slight variations of content"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#creating-slight-variations-of-content","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Tags are a good way to create multiple variations of a page within the same source file, such as to filter content for creating multiple different versions of the same page. See "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#tags"}},[_c('em',[_v("User Guide: Tweaking the Page Structure → Tags")])]),_v(" section for more information.")])} @@ -233,6 +353,6 @@ with(this){return _c('p',[_v("Tags are a good way to create multiple variations with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Tweaking the Page Structure")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/workingWithSites.html"}},[_c('span',[_c('span',[_v("Working with Sites")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/settingSiteProperties.html b/userGuide/settingSiteProperties.html index b09ada0..1590232 100644 --- a/userGuide/settingSiteProperties.html +++ b/userGuide/settingSiteProperties.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Setting Site Properties - + + MarkBind - User Guide: Setting Site Properties @@ -14,8 +12,7 @@ - - + @@ -23,11 +20,36 @@ 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


                                        + diff --git a/userGuide/settingSiteProperties.page-vue-render.js b/userGuide/settingSiteProperties.page-vue-render.js index 2f7bb90..5a9131b 100644 --- a/userGuide/settingSiteProperties.page-vue-render.js +++ b/userGuide/settingSiteProperties.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("While MarkBind uses "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" as the site config file by default, it is possible to specify a different config file when you build/serve/deploy a MarkBind site. This is particularly useful when you want to deploy slight variants of your site (e.g., one for users, one for developers).")])]),_v(" "),_m(4),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("References → "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h1',{attrs:{"id":"site-json-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-json-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-json-file","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"lead"},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(" is used to configure various aspects of a MarkBind website.")],1)]),_v(" "),_c('p',[_v("Here is a typical "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"baseUrl\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/myproduct\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"faviconPath\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"myfavicon.png\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titlePrefix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar Dev Docs\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titleSuffix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar\"")]),_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("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdn.plot.ly/plotly-latest.min.js\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"frontmatter\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"header\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header.md\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/**/*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/*/appendix/*.md\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subtopic\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pagesExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subsite/**/*.md\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"node_modules/*\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"deploy\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"message\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Site Update.\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"repo\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/myorg/myrepo.git\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"branch\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"gh-pages\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globalOverride\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"footer\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"my-footer.md\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"ignore\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_site/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.json\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\".git/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"node_modules/*\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag1\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag2\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"headingIndexingLevel\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("4")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plantumlCheck\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_v("\n")]),_c('span',[_v("}\n")])])]),_c('h4',{attrs:{"id":"baseurl"}},[_c('span',{staticClass:"anchor",attrs:{"id":"baseurl"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#baseurl","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The base URL relative to your domain.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"\"")]),_v("(empty).")]),_v(" "),_c('div',[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you are deploying the site to GitHub pages, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" setting in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" should be set to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/\"")]),_v(" for the links in the deployed site to work correctly.")]),_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(" If you are using GitHub Pages to host your deployed website at repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorg/myproduct")]),_v(" (i.e., the website is published at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://myorg.github.io/myproduct")]),_v("), then your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/myproduct\"")]),_v(".")])])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" does not support "),_c('a',{attrs:{"href":"/userGuide/glossary.html#live-preview"}},[_v("live preview")]),_v(" as there is no use case for changing it in during "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(".")])]),_v(" "),_c('h4',{attrs:{"id":"faviconpath"}},[_c('span',{staticClass:"anchor",attrs:{"id":"faviconpath"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("faviconPath")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#faviconpath","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The location of the favicon.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("favicon.ico")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If the favicon was recently changed, you may need to force-refresh the Browser to see the new image.")])])]),_v(" "),_c('h4',{attrs:{"id":"titleprefix"}},[_c('span',{staticClass:"anchor",attrs:{"id":"titleprefix"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titlePrefix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titleprefix","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The prefix for all page titles.")]),_v(" The separator "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" will be inserted by MarkBind.")]),_v(" "),_c('h4',{attrs:{"id":"titlesuffix"}},[_c('span',{staticClass:"anchor",attrs:{"id":"titlesuffix"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titleSuffix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titlesuffix","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The suffix for all page titles.")]),_v(" The separator "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" will be inserted by MarkBind.")]),_v(" "),_c('h4',{attrs:{"id":"style"}},[_c('span',{staticClass:"anchor",attrs:{"id":"style"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("style")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#style","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('em',[_v("(Optional)")]),_v(" "),_c('strong',[_v("The styling options to be applied to the site.")]),_v(" This includes:")]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootstrapTheme")])]),_v(" "),_c('em',[_v("(Optional)")]),_v(" The theme for the generated site."),_c('br'),_v("\nUses the default Bootstrap theme if not specified. See "),_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("User Guide: Themes")]),_v(" for more details.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeTheme")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v("]"),_c('br'),_v("\nThe theme used for fenced code blocks. Accepts either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"light\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeLineNumbers")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")]),_v("]"),_c('br'),_v("\nThe global setting to display or hide line numbers for code blocks. Accepts either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")]),_v(".")])])]),_v(" "),_c('h4',{attrs:{"id":"pages"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pages"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pages","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of pages to be rendered.")])]),_v(" "),_c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src/glob")])]),_v(" "),_c('ul',[_c('li',{staticClass:"my-1"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" can be used to specify a single file, or an array of files."),_c('br'),_v(" "),_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/index.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ 'docs/index.md', 'docs/userGuide.md' ]")])]),_v(" "),_c('li',{staticClass:"my-2"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(" can be used alternatively to define a file pattern in the "),_c('a',{attrs:{"href":"https://en.wikipedia.org/wiki/Glob_(programming)"}},[_c('em',[_v("glob syntax")])]),_v(", or an array of such file patterns."),_c('br'),_v(" "),_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("**/*.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ '**/*.md', '**/index.md' ]")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")])]),_v(": An array of file patterns to be excluded from rendering when using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(", also defined in the glob syntax.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")])]),_v(": The page "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" for the generated web page. Titles specified here take priority over titles specified in the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#front-matter"}},[_v("frontmatter")]),_v(" of individual pages.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")])]),_v(": The "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-layouts"}},[_v("layout")]),_v(" to be used by the page. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(".")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchable")])]),_v(": Specifies that the page(s) should be excluded from searching. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("yes")]),_v(".")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_v(": An array of external scripts to be referenced on the page. Scripts referenced will be run before the layout script.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("frontmatter")])]),_v(": Specifies properties to add to the frontmatter of a page or glob of pages. Overrides any existing properties if they have the same name, and overrides any frontmatter properties specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"page-property-overriding"}},[_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('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('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',{attrs:{"id":"page-glob-overriding"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If multiple "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(" (pages) or "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")])]),_v(" (globs) attributes match a file, MarkBind will merge properties from all entries. If there are conflicting properties, pages are given priority over globs. If there are multiple matching glob entries, the last entry is given priority.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Multiple entries matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yes\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("The following properties will apply to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from page")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from glob")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Page takes priority over glob")]),_v("\n")]),_c('span',[_v("}\n")])])])])])],1),_v(" "),_c('h4',{attrs:{"id":"pagesexclude"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pagesexclude"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pagesexclude","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of file patterns to be excluded from rendering.")]),_v(" The exclusion pattern follows the glob syntax.")]),_v(" "),_c('p',[_v("This property is the global variant to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")]),_v(" property and is functionally identical to it. If the two are used at once, the file patterns from both properties will be combined when excluding pages.")]),_v(" "),_c('h4',{attrs:{"id":"externalscripts"}},[_c('span',{staticClass:"anchor",attrs:{"id":"externalscripts"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#externalscripts","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of external scripts to be referenced on all pages.")]),_v(" To reference an external script only on specific pages, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")]),_v(" should be specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")]),_v(" instead. Scripts referenced will be run before the layout script.")]),_v(" "),_c('h4',{attrs:{"id":"globaloverride"}},[_c('span',{staticClass:"anchor",attrs:{"id":"globaloverride"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#globaloverride","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Globally overrides properties in the frontmatter of all pages.")]),_v(" Any property included in the global override will automatically be merged with the frontmatter of every single page, and override them if the property exists.")]),_v(" "),_c('h4',{attrs:{"id":"ignore"}},[_c('span',{staticClass:"anchor",attrs:{"id":"ignore"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#ignore","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of file patterns to be ignored when copying files to the generated site.")]),_v(" By default, MarkBind will copy all the files as assets of the generated site.")]),_v(" "),_c('p',[_v("The ignore pattern follows the "),_c('a',{attrs:{"href":"https://git-scm.com/docs/gitignore#_pattern_format"}},[_v("glob pattern used in .gitignore")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*.md")]),_v(" ignores all markdown source files.")]),_v(" "),_c('div',{attrs:{"id":"site-json-deploy"}},[_c('h4',{attrs:{"id":"deploy"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploy"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The settings for "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("auto-deployment to GitHub pages")]),_v(".")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Site Update.\"")]),_v("]"),_c('br'),_v("\nThe commit message used for the deployment commit.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")])]),_v(" [Optional. Default: the current working project's repo]"),_c('br'),_v("\nThe repo you want to deploy to."),_c('br'),_v("\nFormat: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com/<org|username>/<repo>.git\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"git@github.com:<org|username>/<repo>.git\"")]),_v(" if you use SSH)"),_c('br'),_v(" "),_c('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("\"https://github.com/myorg/myrepo.git\"")])])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("branch")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"gh-pages\"")]),_v("]"),_c('br'),_v("\nThe branch that will be deployed to in the remote repo.")])])])]),_v(" "),_c('h4',{attrs:{"id":"plugins-pluginscontext"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugins-pluginscontext"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plugins")])]),_v(", "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugins-pluginscontext","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A list of plugins to load.")]),_v(" Plugins are user-defined extensions that can add custom features to MarkBind. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(" contains settings to be applied to the loaded plugins. See "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("User Guide: Using Plugins")]),_v(" for more details.")]),_v(" "),_c('p',[_v("The example above uses tags as an example of configuring plugin settings, refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#filtertags-toggling-alternative-contents-in-a-page"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin")]),_v(" for more details.")]),_v(" "),_c('h4',{attrs:{"id":"headingindexinglevel"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headingindexinglevel"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headingindexinglevel","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The level of headings to be indexed for searching.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(" "),_c('span',{staticClass:"dimmed"},[_v("i.e., only headings of levels 1,2,3 will be indexed for searching")]),_v(".")]),_v(" "),_c('h4',{attrs:{"id":"enablesearch"}},[_c('span',{staticClass:"anchor",attrs:{"id":"enablesearch"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#enablesearch","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Specifies that the website should use MarkBind's search functionality.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(". See "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(" for more details.")]),_v(" "),_c('h4',{attrs:{"id":"timezone"}},[_c('span',{staticClass:"anchor",attrs:{"id":"timezone"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timeZone")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#timezone","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Time zone of the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(".")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Time Zone Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Abidjan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Accra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Algiers\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Bissau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Cairo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Casablanca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ceuta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/El_Aaiun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Johannesburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Juba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Khartoum\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Lagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Maputo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Monrovia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Nairobi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ndjamena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Sao_Tome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tripoli\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tunis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Windhoek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Adak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Anchorage\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Araguaina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Buenos_Aires\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Catamarca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Cordoba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Jujuy\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/La_Rioja\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Mendoza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Rio_Gallegos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Salta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Juan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Luis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Tucuman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Ushuaia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Asuncion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Atikokan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia_Banderas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Barbados\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belize\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Blanc-Sablon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boa_Vista\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bogota\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boise\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cambridge_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Campo_Grande\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cancun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Caracas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cayenne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chicago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chihuahua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Costa_Rica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Creston\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cuiaba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Curacao\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Danmarkshavn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson_Creek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Denver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Detroit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Edmonton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Eirunepe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/El_Salvador\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fort_Nelson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fortaleza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Glace_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Godthab\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Goose_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Grand_Turk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guatemala\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guayaquil\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guyana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Halifax\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Havana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Hermosillo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Indianapolis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Knox\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Marengo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Petersburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Tell_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vevay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vincennes\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Winamac\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Inuvik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Iqaluit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Jamaica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Juneau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Louisville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Monticello\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/La_Paz\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Lima\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Los_Angeles\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Maceio\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Managua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Manaus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Martinique\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Matamoros\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mazatlan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Menominee\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Merida\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Metlakatla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mexico_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Miquelon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Moncton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Monterrey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Montevideo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nassau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/New_York\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nipigon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Noronha\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Beulah\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Center\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/New_Salem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Ojinaga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Panama\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Pangnirtung\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Paramaribo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Phoenix\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port-au-Prince\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port_of_Spain\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Porto_Velho\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Puerto_Rico\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Punta_Arenas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rainy_River\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rankin_Inlet\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Recife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Regina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Resolute\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rio_Branco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santarem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santiago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santo_Domingo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sao_Paulo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Scoresbysund\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sitka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/St_Johns\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Swift_Current\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tegucigalpa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thule\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thunder_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tijuana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Toronto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Vancouver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Whitehorse\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Winnipeg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yakutat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yellowknife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Casey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Davis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/DumontDUrville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Macquarie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Mawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Palmer\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Rothera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Syowa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Troll\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Vostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Almaty\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Amman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Anadyr\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtobe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ashgabat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Atyrau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baghdad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baku\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bangkok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Barnaul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Beirut\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bishkek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Brunei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Chita\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Choibalsan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Colombo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Damascus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dhaka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dili\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dubai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dushanbe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Famagusta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Gaza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hebron\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ho_Chi_Minh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hong_Kong\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hovd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Irkutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jakarta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jayapura\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jerusalem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kabul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kamchatka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Karachi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kathmandu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Khandyga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kolkata\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Krasnoyarsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuala_Lumpur\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuching\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Macau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Magadan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Makassar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Manila\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Nicosia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novokuznetsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novosibirsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Omsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Oral\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pontianak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pyongyang\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qostanay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qyzylorda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Riyadh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Sakhalin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Samarkand\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Seoul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Shanghai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Singapore\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Srednekolymsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Taipei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tashkent\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tbilisi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tehran\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Thimphu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tokyo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tomsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ulaanbaatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Urumqi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ust-Nera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Vladivostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yakutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yangon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yekaterinburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yerevan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Azores\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Bermuda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Canary\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Cape_Verde\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Faroe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Madeira\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Reykjavik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/South_Georgia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Stanley\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Adelaide\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Brisbane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Broken_Hill\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Currie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Darwin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Eucla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Hobart\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lindeman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lord_Howe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Melbourne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Perth\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Sydney\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Amsterdam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Andorra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Astrakhan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Athens\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Belgrade\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Berlin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Brussels\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Bucharest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Budapest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Chisinau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Copenhagen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Dublin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Gibraltar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Helsinki\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Istanbul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kaliningrad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kiev\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kirov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Lisbon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/London\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Luxembourg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Madrid\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Malta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Minsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Monaco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Moscow\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Oslo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Paris\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Prague\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Riga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Rome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Samara\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Saratov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Simferopol\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Sofia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Stockholm\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tallinn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tirane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Ulyanovsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Uzhgorod\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vienna\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vilnius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Volgograd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Warsaw\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zaporozhye\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zurich\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Chagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Christmas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Cocos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Kerguelen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mahe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Maldives\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mauritius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Reunion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Apia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Auckland\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Bougainville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chatham\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chuuk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Easter\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Efate\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Enderbury\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fakaofo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fiji\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Funafuti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Galapagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Gambier\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guadalcanal\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Honolulu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kiritimati\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kosrae\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kwajalein\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Majuro\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Marquesas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Nauru\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Niue\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Norfolk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Noumea\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pago_Pago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Palau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pitcairn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pohnpei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Port_Moresby\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Rarotonga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tahiti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tarawa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tongatapu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wake\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wallis\"")]),_v("\n")])])]),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/54500197/5885921"}},[_v("https://stackoverflow.com/a/54500197/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"locale"}},[_c('span',{staticClass:"anchor",attrs:{"id":"locale"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("locale")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#locale","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Language by locale used for the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("English (United Kingdom)")]),_v("). "),_c('br'),_v("\nThe date format is thus: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<Day>, <Date> <Month> <Year>, <24-hour Time> <Time Zone Code>")]),_v(".")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Locale Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("af-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (Namibia)\"")]),_v(",\n")]),_c('span',[_v("af-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("af")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans\"")]),_v(",\n")]),_c('span',[_v("ak-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan (Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ak")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan\"")]),_v(",\n")]),_c('span',[_v("sq-AL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian (Albania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian\"")]),_v(",\n")]),_c('span',[_v("am-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("am")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic\"")]),_v(",\n")]),_c('span',[_v("ar-DZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Algeria)\"")]),_v(",\n")]),_c('span',[_v("ar-BH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Bahrain)\"")]),_v(",\n")]),_c('span',[_v("ar-EG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Egypt)\"")]),_v(",\n")]),_c('span',[_v("ar-IQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Iraq)\"")]),_v(",\n")]),_c('span',[_v("ar-JO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Jordan)\"")]),_v(",\n")]),_c('span',[_v("ar-KW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Kuwait)\"")]),_v(",\n")]),_c('span',[_v("ar-LB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Lebanon)\"")]),_v(",\n")]),_c('span',[_v("ar-LY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Libya)\"")]),_v(",\n")]),_c('span',[_v("ar-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Morocco)\"")]),_v(",\n")]),_c('span',[_v("ar-OM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Oman)\"")]),_v(",\n")]),_c('span',[_v("ar-QA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Qatar)\"")]),_v(",\n")]),_c('span',[_v("ar-SA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Saudi Arabia)\"")]),_v(",\n")]),_c('span',[_v("ar-SD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Sudan)\"")]),_v(",\n")]),_c('span',[_v("ar-SY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Syria)\"")]),_v(",\n")]),_c('span',[_v("ar-TN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Tunisia)\"")]),_v(",\n")]),_c('span',[_v("ar-AE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (United Arab Emirates)\"")]),_v(",\n")]),_c('span',[_v("ar-YE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Yemen)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic\"")]),_v(",\n")]),_c('span',[_v("hy-AM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian (Armenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("as")]),_v("-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("as")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese\"")]),_v(",\n")]),_c('span',[_v("asa-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("asa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu\"")]),_v(",\n")]),_c('span',[_v("az-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("az-Cyrl-AZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_v("az-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin)\"")]),_v(",\n")]),_c('span',[_v("az-Latn-AZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani\"")]),_v(",\n")]),_c('span',[_v("bm-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara\"")]),_v(",\n")]),_c('span',[_v("eu-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque\"")]),_v(",\n")]),_c('span',[_v("be-BY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian (Belarus)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("be")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian\"")]),_v(",\n")]),_c('span',[_v("bem-ZM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba (Zambia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bem")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba\"")]),_v(",\n")]),_c('span',[_v("bez-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bez")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena\"")]),_v(",\n")]),_c('span',[_v("bn-BD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (Bangladesh)\"")]),_v(",\n")]),_c('span',[_v("bn-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali\"")]),_v(",\n")]),_c('span',[_v("bs-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian (Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian\"")]),_v(",\n")]),_c('span',[_v("bg-BG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian (Bulgaria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian\"")]),_v(",\n")]),_c('span',[_v("my-MM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese (Myanmar [Burma])\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("my")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese\"")]),_v(",\n")]),_c('span',[_v("yue-Hant-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cantonese (Traditional, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("ca-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ca")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan\"")]),_v(",\n")]),_c('span',[_v("tzm-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin)\"")]),_v(",\n")]),_c('span',[_v("tzm-Latn-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight\"")]),_v(",\n")]),_c('span',[_v("chr-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("chr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee\"")]),_v(",\n")]),_c('span',[_v("cgg-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cgg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga\"")]),_v(",\n")]),_c('span',[_v("zh-Hans: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-MO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-SG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Singapore)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-MO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-TW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Taiwan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese\"")]),_v(",\n")]),_c('span',[_v("kw-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish\"")]),_v(",\n")]),_c('span',[_v("hr-HR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian (Croatia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian\"")]),_v(",\n")]),_c('span',[_v("cs-CZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech (Czech Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech\"")]),_v(",\n")]),_c('span',[_v("da-DK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish (Denmark)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("da")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish\"")]),_v(",\n")]),_c('span',[_v("nl-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Belgium)\"")]),_v(",\n")]),_c('span',[_v("nl-NL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Netherlands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch\"")]),_v(",\n")]),_c('span',[_v("ebu-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ebu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu\"")]),_v(",\n")]),_c('span',[_v("en-AS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (American Samoa)\"")]),_v(",\n")]),_c('span',[_v("en-AU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Australia)\"")]),_v(",\n")]),_c('span',[_v("en-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belgium)\"")]),_v(",\n")]),_c('span',[_v("en-BZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belize)\"")]),_v(",\n")]),_c('span',[_v("en-BW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Botswana)\"")]),_v(",\n")]),_c('span',[_v("en-CA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Canada)\"")]),_v(",\n")]),_c('span',[_v("en-GU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Guam)\"")]),_v(",\n")]),_c('span',[_v("en-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("en-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (India)\"")]),_v(",\n")]),_c('span',[_v("en-IE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Ireland)\"")]),_v(",\n")]),_c('span',[_v("en-IL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Israel)\"")]),_v(",\n")]),_c('span',[_v("en-JM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Jamaica)\"")]),_v(",\n")]),_c('span',[_v("en-MT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Malta)\"")]),_v(",\n")]),_c('span',[_v("en-MH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Marshall Islands)\"")]),_v(",\n")]),_c('span',[_v("en-MU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Mauritius)\"")]),_v(",\n")]),_c('span',[_v("en-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Namibia)\"")]),_v(",\n")]),_c('span',[_v("en-NZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (New Zealand)\"")]),_v(",\n")]),_c('span',[_v("en-MP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Northern Mariana Islands)\"")]),_v(",\n")]),_c('span',[_v("en-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Pakistan)\"")]),_v(",\n")]),_c('span',[_v("en-PH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Philippines)\"")]),_v(",\n")]),_c('span',[_v("en-SG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Singapore)\"")]),_v(",\n")]),_c('span',[_v("en-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (South Africa)\"")]),_v(",\n")]),_c('span',[_v("en-TT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Trinidad and Tobago)\"")]),_v(",\n")]),_c('span',[_v("en-UM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Minor Outlying Islands)\"")]),_v(",\n")]),_c('span',[_v("en-VI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Virgin Islands)\"")]),_v(",\n")]),_c('span',[_v("en-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United Kingdom)\"")]),_v(",\n")]),_c('span',[_v("en-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United States)\"")]),_v(",\n")]),_c('span',[_v("en-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Esperanto\"")]),_v(",\n")]),_c('span',[_v("et-EE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian (Estonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("et")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian\"")]),_v(",\n")]),_c('span',[_v("ee-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Ghana)\"")]),_v(",\n")]),_c('span',[_v("ee-TG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe\"")]),_v(",\n")]),_c('span',[_v("fo-FO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese (Faroe Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese\"")]),_v(",\n")]),_c('span',[_v("fil-PH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino (Philippines)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fil")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino\"")]),_v(",\n")]),_c('span',[_v("fi-FI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish (Finland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish\"")]),_v(",\n")]),_c('span',[_v("fr-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Belgium)\"")]),_v(",\n")]),_c('span',[_v("fr-BJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Benin)\"")]),_v(",\n")]),_c('span',[_v("fr-BF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burkina Faso)\"")]),_v(",\n")]),_c('span',[_v("fr-BI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burundi)\"")]),_v(",\n")]),_c('span',[_v("fr-CM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Cameroon)\"")]),_v(",\n")]),_c('span',[_v("fr-CA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Canada)\"")]),_v(",\n")]),_c('span',[_v("fr-CF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Central African Republic)\"")]),_v(",\n")]),_c('span',[_v("fr-TD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Chad)\"")]),_v(",\n")]),_c('span',[_v("fr-KM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Comoros)\"")]),_v(",\n")]),_c('span',[_v("fr-CG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Brazzaville)\"")]),_v(",\n")]),_c('span',[_v("fr-CD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Kinshasa)\"")]),_v(",\n")]),_c('span',[_v("fr-CI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Côte d’Ivoire)\"")]),_v(",\n")]),_c('span',[_v("fr-DJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Djibouti)\"")]),_v(",\n")]),_c('span',[_v("fr-GQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_v("fr-FR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (France)\"")]),_v(",\n")]),_c('span',[_v("fr-GA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Gabon)\"")]),_v(",\n")]),_c('span',[_v("fr-GP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guadeloupe)\"")]),_v(",\n")]),_c('span',[_v("fr-GN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guinea)\"")]),_v(",\n")]),_c('span',[_v("fr-LU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Luxembourg)\"")]),_v(",\n")]),_c('span',[_v("fr-MG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Madagascar)\"")]),_v(",\n")]),_c('span',[_v("fr-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Mali)\"")]),_v(",\n")]),_c('span',[_v("fr-MQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Martinique)\"")]),_v(",\n")]),_c('span',[_v("fr-MC: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Monaco)\"")]),_v(",\n")]),_c('span',[_v("fr-NE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Niger)\"")]),_v(",\n")]),_c('span',[_v("fr-RW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Rwanda)\"")]),_v(",\n")]),_c('span',[_v("fr-RE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Réunion)\"")]),_v(",\n")]),_c('span',[_v("fr-BL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Barthélemy)\"")]),_v(",\n")]),_c('span',[_v("fr-MF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Martin)\"")]),_v(",\n")]),_c('span',[_v("fr-SN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Senegal)\"")]),_v(",\n")]),_c('span',[_v("fr-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Switzerland)\"")]),_v(",\n")]),_c('span',[_v("fr-TG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French\"")]),_v(",\n")]),_c('span',[_v("ff-SN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah (Senegal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ff")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah\"")]),_v(",\n")]),_c('span',[_v("gl-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician\"")]),_v(",\n")]),_c('span',[_v("lg-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda\"")]),_v(",\n")]),_c('span',[_v("ka-GE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian (Georgia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ka")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian\"")]),_v(",\n")]),_c('span',[_v("de-AT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Austria)\"")]),_v(",\n")]),_c('span',[_v("de-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Belgium)\"")]),_v(",\n")]),_c('span',[_v("de-DE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Germany)\"")]),_v(",\n")]),_c('span',[_v("de-LI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Liechtenstein)\"")]),_v(",\n")]),_c('span',[_v("de-LU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Luxembourg)\"")]),_v(",\n")]),_c('span',[_v("de-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German\"")]),_v(",\n")]),_c('span',[_v("el-CY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Cyprus)\"")]),_v(",\n")]),_c('span',[_v("el-GR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Greece)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek\"")]),_v(",\n")]),_c('span',[_v("gu-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati\"")]),_v(",\n")]),_c('span',[_v("guz-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("guz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii\"")]),_v(",\n")]),_c('span',[_v("ha-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Ghana)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-NE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Niger)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa\"")]),_v(",\n")]),_c('span',[_v("haw-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("haw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian\"")]),_v(",\n")]),_c('span',[_v("he-IL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew (Israel)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("he")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew\"")]),_v(",\n")]),_c('span',[_v("hi-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi\"")]),_v(",\n")]),_c('span',[_v("hu-HU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian (Hungary)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian\"")]),_v(",\n")]),_c('span',[_v("is-IS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic (Iceland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("is")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic\"")]),_v(",\n")]),_c('span',[_v("ig-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ig")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo\"")]),_v(",\n")]),_c('span',[_v("id-ID: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian (Indonesia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian\"")]),_v(",\n")]),_c('span',[_v("ga-IE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish (Ireland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ga")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish\"")]),_v(",\n")]),_c('span',[_v("it-IT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Italy)\"")]),_v(",\n")]),_c('span',[_v("it-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian\"")]),_v(",\n")]),_c('span',[_v("ja-JP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese (Japan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ja")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese\"")]),_v(",\n")]),_c('span',[_v("kea-CV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu (Cape Verde)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kea")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu\"")]),_v(",\n")]),_c('span',[_v("kab-DZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle (Algeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle\"")]),_v(",\n")]),_c('span',[_v("kl-GL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut (Greenland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut\"")]),_v(",\n")]),_c('span',[_v("kln-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kln")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin\"")]),_v(",\n")]),_c('span',[_v("kam-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kam")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba\"")]),_v(",\n")]),_c('span',[_v("kn-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada\"")]),_v(",\n")]),_c('span',[_v("kk-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("kk-Cyrl-KZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic, Kazakhstan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh\"")]),_v(",\n")]),_c('span',[_v("km-KH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer (Cambodia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("km")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer\"")]),_v(",\n")]),_c('span',[_v("ki-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ki")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu\"")]),_v(",\n")]),_c('span',[_v("rw-RW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda (Rwanda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda\"")]),_v(",\n")]),_c('span',[_v("kok-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kok")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani\"")]),_v(",\n")]),_c('span',[_v("ko-KR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean (South Korea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ko")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean\"")]),_v(",\n")]),_c('span',[_v("khq-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("khq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini\"")]),_v(",\n")]),_c('span',[_v("ses-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ses")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni\"")]),_v(",\n")]),_c('span',[_v("lag-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lag")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi\"")]),_v(",\n")]),_c('span',[_v("lv-LV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian (Latvia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian\"")]),_v(",\n")]),_c('span',[_v("lt-LT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian (Lithuania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian\"")]),_v(",\n")]),_c('span',[_v("luo-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo\"")]),_v(",\n")]),_c('span',[_v("luy-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia\"")]),_v(",\n")]),_c('span',[_v("mk-MK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian (Macedonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian\"")]),_v(",\n")]),_c('span',[_v("jmc-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jmc")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame\"")]),_v(",\n")]),_c('span',[_v("kde-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kde")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde\"")]),_v(",\n")]),_c('span',[_v("mg-MG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy (Madagascar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy\"")]),_v(",\n")]),_c('span',[_v("ms-BN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Brunei)\"")]),_v(",\n")]),_c('span',[_v("ms-MY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Malaysia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay\"")]),_v(",\n")]),_c('span',[_v("ml-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ml")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam\"")]),_v(",\n")]),_c('span',[_v("mt-MT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese (Malta)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese\"")]),_v(",\n")]),_c('span',[_v("gv-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx\"")]),_v(",\n")]),_c('span',[_v("mr-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi\"")]),_v(",\n")]),_c('span',[_v("mas-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Kenya)\"")]),_v(",\n")]),_c('span',[_v("mas-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai\"")]),_v(",\n")]),_c('span',[_v("mer-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mer")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru\"")]),_v(",\n")]),_c('span',[_v("mfe-MU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen (Mauritius)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mfe")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen\"")]),_v(",\n")]),_c('span',[_v("naq-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("naq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama\"")]),_v(",\n")]),_c('span',[_v("ne-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (India)\"")]),_v(",\n")]),_c('span',[_v("ne-NP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (Nepal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali\"")]),_v(",\n")]),_c('span',[_v("nd-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nd")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele\"")]),_v(",\n")]),_c('span',[_v("nb-NO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nb")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål\"")]),_v(",\n")]),_c('span',[_v("nn-NO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk\"")]),_v(",\n")]),_c('span',[_v("nyn-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nyn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole\"")]),_v(",\n")]),_c('span',[_v("or-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("or")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya\"")]),_v(",\n")]),_c('span',[_v("om-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Ethiopia)\"")]),_v(",\n")]),_c('span',[_v("om-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo\"")]),_v(",\n")]),_c('span',[_v("ps-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto (Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto\"")]),_v(",\n")]),_c('span',[_v("fa-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Afghanistan)\"")]),_v(",\n")]),_c('span',[_v("fa-IR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Iran)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian\"")]),_v(",\n")]),_c('span',[_v("pl-PL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish (Poland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish\"")]),_v(",\n")]),_c('span',[_v("pt-BR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Brazil)\"")]),_v(",\n")]),_c('span',[_v("pt-GW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Guinea-Bissau)\"")]),_v(",\n")]),_c('span',[_v("pt-MZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Mozambique)\"")]),_v(",\n")]),_c('span',[_v("pt-PT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Portugal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese\"")]),_v(",\n")]),_c('span',[_v("pa-Arab: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic)\"")]),_v(",\n")]),_c('span',[_v("pa-Arab-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic, Pakistan)\"")]),_v(",\n")]),_c('span',[_v("pa-Guru: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi)\"")]),_v(",\n")]),_c('span',[_v("pa-Guru-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi, India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi\"")]),_v(",\n")]),_c('span',[_v("ro-MD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Moldova)\"")]),_v(",\n")]),_c('span',[_v("ro-RO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Romania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian\"")]),_v(",\n")]),_c('span',[_v("rm-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh\"")]),_v(",\n")]),_c('span',[_v("rof-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rof")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo\"")]),_v(",\n")]),_c('span',[_v("ru-MD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Moldova)\"")]),_v(",\n")]),_c('span',[_v("ru-RU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Russia)\"")]),_v(",\n")]),_c('span',[_v("ru-UA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian\"")]),_v(",\n")]),_c('span',[_v("rwk-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rwk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa\"")]),_v(",\n")]),_c('span',[_v("saq-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("saq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu\"")]),_v(",\n")]),_c('span',[_v("sg-CF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango (Central African Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango\"")]),_v(",\n")]),_c('span',[_v("seh-MZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena (Mozambique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-ME: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Montenegro)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-RS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Serbia)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-ME: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Montenegro)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-RS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Serbia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian\"")]),_v(",\n")]),_c('span',[_v("sn-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona\"")]),_v(",\n")]),_c('span',[_v("ii-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi (China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ii")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi\"")]),_v(",\n")]),_c('span',[_v("si-LK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("si")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala\"")]),_v(",\n")]),_c('span',[_v("sk-SK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak (Slovakia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak\"")]),_v(",\n")]),_c('span',[_v("sl-SI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian (Slovenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian\"")]),_v(",\n")]),_c('span',[_v("xog-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xog")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga\"")]),_v(",\n")]),_c('span',[_v("so-DJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Djibouti)\"")]),_v(",\n")]),_c('span',[_v("so-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Ethiopia)\"")]),_v(",\n")]),_c('span',[_v("so-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Kenya)\"")]),_v(",\n")]),_c('span',[_v("so-SO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Somalia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali\"")]),_v(",\n")]),_c('span',[_v("es-AR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Argentina)\"")]),_v(",\n")]),_c('span',[_v("es-BO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Bolivia)\"")]),_v(",\n")]),_c('span',[_v("es-CL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Chile)\"")]),_v(",\n")]),_c('span',[_v("es-CO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Colombia)\"")]),_v(",\n")]),_c('span',[_v("es-CR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Costa Rica)\"")]),_v(",\n")]),_c('span',[_v("es-DO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Dominican Republic)\"")]),_v(",\n")]),_c('span',[_v("es-EC: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Ecuador)\"")]),_v(",\n")]),_c('span',[_v("es-SV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (El Salvador)\"")]),_v(",\n")]),_c('span',[_v("es-GQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_v("es-GT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Guatemala)\"")]),_v(",\n")]),_c('span',[_v("es-HN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Honduras)\"")]),_v(",\n")]),_c('span',[_v("es-"),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("419")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Latin America)\"")]),_v(",\n")]),_c('span',[_v("es-MX: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Mexico)\"")]),_v(",\n")]),_c('span',[_v("es-NI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Nicaragua)\"")]),_v(",\n")]),_c('span',[_v("es-PA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Panama)\"")]),_v(",\n")]),_c('span',[_v("es-PY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Paraguay)\"")]),_v(",\n")]),_c('span',[_v("es-PE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Peru)\"")]),_v(",\n")]),_c('span',[_v("es-PR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Puerto Rico)\"")]),_v(",\n")]),_c('span',[_v("es-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Spain)\"")]),_v(",\n")]),_c('span',[_v("es-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (United States)\"")]),_v(",\n")]),_c('span',[_v("es-UY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Uruguay)\"")]),_v(",\n")]),_c('span',[_v("es-VE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Venezuela)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish\"")]),_v(",\n")]),_c('span',[_v("sw-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Kenya)\"")]),_v(",\n")]),_c('span',[_v("sw-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili\"")]),_v(",\n")]),_c('span',[_v("sv-FI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Finland)\"")]),_v(",\n")]),_c('span',[_v("sv-SE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Sweden)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish\"")]),_v(",\n")]),_c('span',[_v("gsw-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gsw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German\"")]),_v(",\n")]),_c('span',[_v("shi-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin)\"")]),_v(",\n")]),_c('span',[_v("shi-Latn-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_v("shi-Tfng: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh)\"")]),_v(",\n")]),_c('span',[_v("shi-Tfng-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit\"")]),_v(",\n")]),_c('span',[_v("dav-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dav")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita\"")]),_v(",\n")]),_c('span',[_v("ta-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (India)\"")]),_v(",\n")]),_c('span',[_v("ta-LK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil\"")]),_v(",\n")]),_c('span',[_v("te-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("te")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu\"")]),_v(",\n")]),_c('span',[_v("teo-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Kenya)\"")]),_v(",\n")]),_c('span',[_v("teo-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso\"")]),_v(",\n")]),_c('span',[_v("th-TH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai (Thailand)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("th")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai\"")]),_v(",\n")]),_c('span',[_v("bo-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (China)\"")]),_v(",\n")]),_c('span',[_v("bo-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan\"")]),_v(",\n")]),_c('span',[_v("ti-ER: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Eritrea)\"")]),_v(",\n")]),_c('span',[_v("ti-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya\"")]),_v(",\n")]),_c('span',[_v("to-TO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga (Tonga)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("to")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga\"")]),_v(",\n")]),_c('span',[_v("tr-TR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish (Turkey)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish\"")]),_v(",\n")]),_c('span',[_v("uk-UA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian\"")]),_v(",\n")]),_c('span',[_v("ur-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (India)\"")]),_v(",\n")]),_c('span',[_v("ur-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu\"")]),_v(",\n")]),_c('span',[_v("uz-Arab: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic)\"")]),_v(",\n")]),_c('span',[_v("uz-Arab-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic, Afghanistan)\"")]),_v(",\n")]),_c('span',[_v("uz-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("uz-Cyrl-UZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_v("uz-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin)\"")]),_v(",\n")]),_c('span',[_v("uz-Latn-UZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek\"")]),_v(",\n")]),_c('span',[_v("vi-VN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese (Vietnam)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese\"")]),_v(",\n")]),_c('span',[_v("vun-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vun")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo\"")]),_v(",\n")]),_c('span',[_v("cy-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh\"")]),_v(",\n")]),_c('span',[_v("yo-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba\"")]),_v(",\n")]),_c('span',[_v("zu-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu\"")]),_v("\n")])])]),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/28357857/5885921"}},[_v("https://stackoverflow.com/a/28357857/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"intrasitelinkvalidation"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intrasitelinkvalidation"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intrasiteLinkValidation")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intrasitelinkvalidation","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Toggle whether to validate intra-site links.")]),_v(" By default, MarkBind will validate all intra-site links and alert you of any potentially invalid ones.\nTo disable this validation "),_c('strong',[_v("entirely")]),_v(", you may add the following to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(":")]),_v(" "),_c('div',{attrs:{"id":"disable-global-intrasite-link-validation"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])])])]),_v(" "),_c('h4',{attrs:{"id":"plantumlcheck"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plantumlcheck"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plantumlCheck")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plantumlcheck","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Toggle whether to display a warning about PlantUML's prerequisite.")]),_v(" By default, MarkBind will check if you have Graphviz installed when you are using PlantUML diagrams.\nTo disable this validation and the display of the warning, you may add the following to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(":")]),_v(" "),_c('div',{attrs:{"id":"plantuml-check"}},[_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")])])])])],1)]),_v(" "),_m(5),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(6)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("While MarkBind uses "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" as the site config file by default, it is possible to specify a different config file when you build/serve/deploy a MarkBind site. This is particularly useful when you want to deploy slight variants of your site (e.g., one for users, one for developers).")])]),_v(" "),_m(4),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("References → "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]},proxy:true}])},[_v(" "),_c('div',[_c('h1',{attrs:{"id":"site-json-file"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-json-file","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"lead"},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(" is used to configure various aspects of a MarkBind website.")],1)]),_v(" "),_c('p',[_v("Here is a typical "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"baseUrl\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/myproduct\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"faviconPath\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"myfavicon.png\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titlePrefix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar Dev Docs\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titleSuffix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar\"")]),_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("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdn.plot.ly/plotly-latest.min.js\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"frontmatter\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"header\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header.md\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/**/*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/*/appendix/*.md\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subtopic\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pagesExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subsite/**/*.md\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"node_modules/*\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"deploy\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"message\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Site Update.\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"repo\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/myorg/myrepo.git\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"branch\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"gh-pages\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globalOverride\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"footer\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"my-footer.md\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"ignore\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_site/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.json\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\".git/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\".gitignore\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"node_modules/*\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag1\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag2\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"headingIndexingLevel\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("4")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plantumlCheck\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_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('h4',{attrs:{"id":"baseurl"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#baseurl","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The base URL relative to your domain.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"\"")]),_v("(empty).")]),_v(" "),_c('div',[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you are deploying the site to GitHub pages, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" setting in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" should be set to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/<repositoryName>\"")]),_v(" for the links in the deployed site to work correctly.")]),_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(" If you are using GitHub Pages to host your deployed website at repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorg/myproduct")]),_v(" (i.e., the website is published at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://myorg.github.io/myproduct")]),_v("), then your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/myproduct\"")]),_v(".")])])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" does not support "),_c('a',{attrs:{"href":"/userGuide/glossary.html#live-preview"}},[_v("live preview")]),_v(" as there is no use case for changing it in during "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(".")])]),_v(" "),_c('h4',{attrs:{"id":"faviconpath"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("faviconPath")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#faviconpath","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The location of the favicon.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("favicon.ico")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If the favicon was recently changed, you may need to force-refresh the Browser to see the new image.")])])]),_v(" "),_c('h4',{attrs:{"id":"titleprefix"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titlePrefix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titleprefix","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The prefix for all page titles.")]),_v(" The separator "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" will be inserted by MarkBind.")]),_v(" "),_c('h4',{attrs:{"id":"titlesuffix"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titleSuffix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titlesuffix","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The suffix for all page titles.")]),_v(" The separator "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" will be inserted by MarkBind.")]),_v(" "),_c('h4',{attrs:{"id":"style"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("style")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#style","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('em',[_v("(Optional)")]),_v(" "),_c('strong',[_v("The styling options to be applied to the site.")]),_v(" This includes:")]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootstrapTheme")])]),_v(" "),_c('em',[_v("(Optional)")]),_v(" The theme for the generated site."),_c('br'),_v("\nUses the default Bootstrap theme if not specified. See "),_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("User Guide: Themes")]),_v(" for more details.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeTheme")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v("]"),_c('br'),_v("\nThe theme used for fenced code blocks. Accepts either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"light\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeLineNumbers")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")]),_v("]"),_c('br'),_v("\nThe global setting to display or hide line numbers for code blocks. Accepts either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")]),_v(".")])])]),_v(" "),_c('h4',{attrs:{"id":"pages"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pages","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of pages to be rendered.")])]),_v(" "),_c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src/glob")])]),_v(" "),_c('ul',[_c('li',{staticClass:"my-1"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" can be used to specify a single file, or an array of files."),_c('br'),_v(" "),_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/index.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ 'docs/index.md', 'docs/userGuide.md' ]")])]),_v(" "),_c('li',{staticClass:"my-2"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(" can be used alternatively to define a file pattern in the "),_c('a',{attrs:{"href":"https://en.wikipedia.org/wiki/Glob_(programming)"}},[_c('em',[_v("glob syntax")])]),_v(", or an array of such file patterns."),_c('br'),_v(" "),_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("**/*.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ '**/*.md', '**/index.md' ]")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")])]),_v(": An array of file patterns to be excluded from rendering when using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(", also defined in the glob syntax.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")])]),_v(": The page "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<title>")]),_v(" for the generated web page. Titles specified here take priority over titles specified in the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#front-matter"}},[_v("frontmatter")]),_v(" of individual pages.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")])]),_v(": The "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-layouts"}},[_v("layout")]),_v(" to be used by the page. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(".")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchable")])]),_v(": Specifies that the page(s) should be excluded from searching. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("yes")]),_v(".")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_v(": An array of external scripts to be referenced on the page. Scripts referenced will be run before the layout script.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("frontmatter")])]),_v(": Specifies properties to add to the frontmatter of a page or glob of pages. Overrides any existing properties if they have the same name, and overrides any frontmatter properties specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"page-property-overriding"}},[_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',{attrs:{"id":"page-glob-overriding"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If multiple "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(" (pages) or "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")])]),_v(" (globs) attributes match a file, MarkBind will merge properties from all entries. If there are conflicting properties, pages are given priority over globs. If there are multiple matching glob entries, the last entry is given priority.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Multiple entries matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yes\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 following properties will apply to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from page")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from glob")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Page takes priority over glob")]),_v("\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('h4',{attrs:{"id":"pagesexclude"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pagesexclude","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of file patterns to be excluded from rendering.")]),_v(" The exclusion pattern follows the glob syntax.")]),_v(" "),_c('p',[_v("This property is the global variant to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")]),_v(" property and is functionally identical to it. If the two are used at once, the file patterns from both properties will be combined when excluding pages.")]),_v(" "),_c('h4',{attrs:{"id":"externalscripts"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#externalscripts","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of external scripts to be referenced on all pages.")]),_v(" To reference an external script only on specific pages, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")]),_v(" should be specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")]),_v(" instead. Scripts referenced will be run before the layout script.")]),_v(" "),_c('h4',{attrs:{"id":"globaloverride"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#globaloverride","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Globally overrides properties in the frontmatter of all pages.")]),_v(" Any property included in the global override will automatically be merged with the frontmatter of every single page, and override them if the property exists.")]),_v(" "),_c('h4',{attrs:{"id":"ignore"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#ignore","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("An array of file patterns to be ignored when copying files to the generated site.")]),_v(" By default, MarkBind will copy all the files as assets of the generated site.")]),_v(" "),_c('p',[_v("The ignore pattern follows the "),_c('a',{attrs:{"href":"https://git-scm.com/docs/gitignore#_pattern_format"}},[_v("glob pattern used in .gitignore")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*.md")]),_v(" ignores all markdown source files.")]),_v(" "),_c('div',{attrs:{"id":"site-json-deploy"}},[_c('h4',{attrs:{"id":"deploy"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The settings for "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("auto-deployment to GitHub pages")]),_v(".")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Site Update.\"")]),_v("]"),_c('br'),_v("\nThe commit message used for the deployment commit.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")])]),_v(" [Optional. Default: the current working project's repo]"),_c('br'),_v("\nThe repo you want to deploy to."),_c('br'),_v("\nFormat: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com/<org|username>/<repo>.git\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"git@github.com:<org|username>/<repo>.git\"")]),_v(" if you use SSH)"),_c('br'),_v(" "),_c('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("\"https://github.com/myorg/myrepo.git\"")])])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("branch")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"gh-pages\"")]),_v("]"),_c('br'),_v("\nThe branch that will be deployed to in the remote repo.")])])])]),_v(" "),_c('h4',{attrs:{"id":"plugins-pluginscontext"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plugins")])]),_v(", "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugins-pluginscontext","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A list of plugins to load.")]),_v(" Plugins are user-defined extensions that can add custom features to MarkBind. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(" contains settings to be applied to the loaded plugins. See "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("User Guide: Using Plugins")]),_v(" for more details.")]),_v(" "),_c('p',[_v("The example above uses tags as an example of configuring plugin settings, refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#filtertags-toggling-alternative-contents-in-a-page"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin")]),_v(" for more details.")]),_v(" "),_c('h4',{attrs:{"id":"headingindexinglevel"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headingindexinglevel","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The level of headings to be indexed for searching.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(" "),_c('span',{staticClass:"dimmed"},[_v("i.e., only headings of levels 1,2,3 will be indexed for searching")]),_v(".")]),_v(" "),_c('h4',{attrs:{"id":"enablesearch"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#enablesearch","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Specifies that the website should use MarkBind's search functionality.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(". See "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(" for more details.")]),_v(" "),_c('h4',{attrs:{"id":"timezone"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timeZone")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#timezone","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Time zone of the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(".")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Time Zone Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Abidjan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Accra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Algiers\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Bissau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Cairo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Casablanca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ceuta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/El_Aaiun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Johannesburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Juba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Khartoum\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Lagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Maputo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Monrovia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Nairobi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ndjamena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Sao_Tome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tripoli\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tunis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Windhoek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Adak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Anchorage\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Araguaina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Buenos_Aires\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Catamarca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Cordoba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Jujuy\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/La_Rioja\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Mendoza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Rio_Gallegos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Salta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Juan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Luis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Tucuman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Ushuaia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Asuncion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Atikokan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia_Banderas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Barbados\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belize\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Blanc-Sablon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boa_Vista\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bogota\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boise\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cambridge_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Campo_Grande\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cancun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Caracas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cayenne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chicago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chihuahua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Costa_Rica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Creston\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cuiaba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Curacao\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Danmarkshavn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson_Creek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Denver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Detroit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Edmonton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Eirunepe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/El_Salvador\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fort_Nelson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fortaleza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Glace_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Godthab\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Goose_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Grand_Turk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guatemala\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guayaquil\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guyana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Halifax\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Havana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Hermosillo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Indianapolis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Knox\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Marengo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Petersburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Tell_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vevay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vincennes\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Winamac\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Inuvik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Iqaluit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Jamaica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Juneau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Louisville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Monticello\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/La_Paz\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Lima\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Los_Angeles\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Maceio\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Managua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Manaus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Martinique\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Matamoros\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mazatlan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Menominee\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Merida\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Metlakatla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mexico_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Miquelon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Moncton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Monterrey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Montevideo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nassau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/New_York\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nipigon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Noronha\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Beulah\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Center\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/New_Salem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Ojinaga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Panama\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Pangnirtung\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Paramaribo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Phoenix\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port-au-Prince\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port_of_Spain\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Porto_Velho\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Puerto_Rico\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Punta_Arenas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rainy_River\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rankin_Inlet\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Recife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Regina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Resolute\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rio_Branco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santarem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santiago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santo_Domingo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sao_Paulo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Scoresbysund\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sitka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/St_Johns\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Swift_Current\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tegucigalpa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thule\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thunder_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tijuana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Toronto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Vancouver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Whitehorse\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Winnipeg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yakutat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yellowknife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Casey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Davis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/DumontDUrville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Macquarie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Mawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Palmer\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Rothera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Syowa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Troll\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Vostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Almaty\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Amman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Anadyr\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtobe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ashgabat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Atyrau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baghdad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baku\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bangkok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Barnaul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Beirut\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bishkek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Brunei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Chita\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Choibalsan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Colombo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Damascus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dhaka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dili\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dubai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dushanbe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Famagusta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Gaza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hebron\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ho_Chi_Minh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hong_Kong\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hovd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Irkutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jakarta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jayapura\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jerusalem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kabul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kamchatka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Karachi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kathmandu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Khandyga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kolkata\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Krasnoyarsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuala_Lumpur\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuching\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Macau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Magadan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Makassar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Manila\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Nicosia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novokuznetsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novosibirsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Omsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Oral\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pontianak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pyongyang\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qostanay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qyzylorda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Riyadh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Sakhalin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Samarkand\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Seoul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Shanghai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Singapore\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Srednekolymsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Taipei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tashkent\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tbilisi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tehran\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Thimphu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tokyo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tomsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ulaanbaatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Urumqi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ust-Nera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Vladivostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yakutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yangon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yekaterinburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yerevan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Azores\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Bermuda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Canary\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Cape_Verde\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Faroe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Madeira\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Reykjavik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/South_Georgia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Stanley\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Adelaide\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Brisbane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Broken_Hill\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Currie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Darwin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Eucla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Hobart\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lindeman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lord_Howe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Melbourne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Perth\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Sydney\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Amsterdam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Andorra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Astrakhan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Athens\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Belgrade\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Berlin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Brussels\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Bucharest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Budapest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Chisinau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Copenhagen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Dublin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Gibraltar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Helsinki\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Istanbul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kaliningrad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kiev\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kirov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Lisbon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/London\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Luxembourg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Madrid\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Malta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Minsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Monaco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Moscow\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Oslo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Paris\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Prague\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Riga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Rome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Samara\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Saratov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Simferopol\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Sofia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Stockholm\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tallinn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tirane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Ulyanovsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Uzhgorod\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vienna\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vilnius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Volgograd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Warsaw\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zaporozhye\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zurich\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Chagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Christmas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Cocos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Kerguelen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mahe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Maldives\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mauritius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Reunion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Apia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Auckland\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Bougainville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chatham\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chuuk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Easter\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Efate\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Enderbury\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fakaofo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fiji\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Funafuti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Galapagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Gambier\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guadalcanal\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Honolulu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kiritimati\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kosrae\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kwajalein\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Majuro\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Marquesas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Nauru\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Niue\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Norfolk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Noumea\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pago_Pago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Palau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pitcairn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pohnpei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Port_Moresby\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Rarotonga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tahiti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tarawa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tongatapu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wake\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wallis\"")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/54500197/5885921"}},[_v("https://stackoverflow.com/a/54500197/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"locale"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("locale")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#locale","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Language by locale used for the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("English (United Kingdom)")]),_v("). "),_c('br'),_v("\nThe date format is thus: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<Day>, <Date> <Month> <Year>, <24-hour Time> <Time Zone Code>")]),_v(".")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Locale Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("af-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (Namibia)\"")]),_v(",\n")]),_c('span',[_v("af-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("af")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans\"")]),_v(",\n")]),_c('span',[_v("ak-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan (Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ak")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan\"")]),_v(",\n")]),_c('span',[_v("sq-AL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian (Albania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian\"")]),_v(",\n")]),_c('span',[_v("am-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("am")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic\"")]),_v(",\n")]),_c('span',[_v("ar-DZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Algeria)\"")]),_v(",\n")]),_c('span',[_v("ar-BH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Bahrain)\"")]),_v(",\n")]),_c('span',[_v("ar-EG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Egypt)\"")]),_v(",\n")]),_c('span',[_v("ar-IQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Iraq)\"")]),_v(",\n")]),_c('span',[_v("ar-JO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Jordan)\"")]),_v(",\n")]),_c('span',[_v("ar-KW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Kuwait)\"")]),_v(",\n")]),_c('span',[_v("ar-LB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Lebanon)\"")]),_v(",\n")]),_c('span',[_v("ar-LY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Libya)\"")]),_v(",\n")]),_c('span',[_v("ar-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Morocco)\"")]),_v(",\n")]),_c('span',[_v("ar-OM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Oman)\"")]),_v(",\n")]),_c('span',[_v("ar-QA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Qatar)\"")]),_v(",\n")]),_c('span',[_v("ar-SA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Saudi Arabia)\"")]),_v(",\n")]),_c('span',[_v("ar-SD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Sudan)\"")]),_v(",\n")]),_c('span',[_v("ar-SY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Syria)\"")]),_v(",\n")]),_c('span',[_v("ar-TN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Tunisia)\"")]),_v(",\n")]),_c('span',[_v("ar-AE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (United Arab Emirates)\"")]),_v(",\n")]),_c('span',[_v("ar-YE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Yemen)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic\"")]),_v(",\n")]),_c('span',[_v("hy-AM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian (Armenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("as")]),_v("-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("as")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese\"")]),_v(",\n")]),_c('span',[_v("asa-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("asa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu\"")]),_v(",\n")]),_c('span',[_v("az-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("az-Cyrl-AZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_v("az-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin)\"")]),_v(",\n")]),_c('span',[_v("az-Latn-AZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani\"")]),_v(",\n")]),_c('span',[_v("bm-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara\"")]),_v(",\n")]),_c('span',[_v("eu-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque\"")]),_v(",\n")]),_c('span',[_v("be-BY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian (Belarus)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("be")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian\"")]),_v(",\n")]),_c('span',[_v("bem-ZM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba (Zambia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bem")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba\"")]),_v(",\n")]),_c('span',[_v("bez-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bez")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena\"")]),_v(",\n")]),_c('span',[_v("bn-BD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (Bangladesh)\"")]),_v(",\n")]),_c('span',[_v("bn-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali\"")]),_v(",\n")]),_c('span',[_v("bs-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian (Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian\"")]),_v(",\n")]),_c('span',[_v("bg-BG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian (Bulgaria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian\"")]),_v(",\n")]),_c('span',[_v("my-MM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese (Myanmar [Burma])\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("my")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese\"")]),_v(",\n")]),_c('span',[_v("yue-Hant-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cantonese (Traditional, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("ca-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ca")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan\"")]),_v(",\n")]),_c('span',[_v("tzm-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin)\"")]),_v(",\n")]),_c('span',[_v("tzm-Latn-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight\"")]),_v(",\n")]),_c('span',[_v("chr-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("chr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee\"")]),_v(",\n")]),_c('span',[_v("cgg-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cgg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga\"")]),_v(",\n")]),_c('span',[_v("zh-Hans: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-MO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-SG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Singapore)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-MO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-TW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Taiwan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese\"")]),_v(",\n")]),_c('span',[_v("kw-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish\"")]),_v(",\n")]),_c('span',[_v("hr-HR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian (Croatia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian\"")]),_v(",\n")]),_c('span',[_v("cs-CZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech (Czech Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech\"")]),_v(",\n")]),_c('span',[_v("da-DK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish (Denmark)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("da")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish\"")]),_v(",\n")]),_c('span',[_v("nl-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Belgium)\"")]),_v(",\n")]),_c('span',[_v("nl-NL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Netherlands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch\"")]),_v(",\n")]),_c('span',[_v("ebu-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ebu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu\"")]),_v(",\n")]),_c('span',[_v("en-AS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (American Samoa)\"")]),_v(",\n")]),_c('span',[_v("en-AU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Australia)\"")]),_v(",\n")]),_c('span',[_v("en-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belgium)\"")]),_v(",\n")]),_c('span',[_v("en-BZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belize)\"")]),_v(",\n")]),_c('span',[_v("en-BW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Botswana)\"")]),_v(",\n")]),_c('span',[_v("en-CA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Canada)\"")]),_v(",\n")]),_c('span',[_v("en-GU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Guam)\"")]),_v(",\n")]),_c('span',[_v("en-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("en-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (India)\"")]),_v(",\n")]),_c('span',[_v("en-IE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Ireland)\"")]),_v(",\n")]),_c('span',[_v("en-IL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Israel)\"")]),_v(",\n")]),_c('span',[_v("en-JM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Jamaica)\"")]),_v(",\n")]),_c('span',[_v("en-MT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Malta)\"")]),_v(",\n")]),_c('span',[_v("en-MH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Marshall Islands)\"")]),_v(",\n")]),_c('span',[_v("en-MU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Mauritius)\"")]),_v(",\n")]),_c('span',[_v("en-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Namibia)\"")]),_v(",\n")]),_c('span',[_v("en-NZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (New Zealand)\"")]),_v(",\n")]),_c('span',[_v("en-MP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Northern Mariana Islands)\"")]),_v(",\n")]),_c('span',[_v("en-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Pakistan)\"")]),_v(",\n")]),_c('span',[_v("en-PH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Philippines)\"")]),_v(",\n")]),_c('span',[_v("en-SG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Singapore)\"")]),_v(",\n")]),_c('span',[_v("en-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (South Africa)\"")]),_v(",\n")]),_c('span',[_v("en-TT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Trinidad and Tobago)\"")]),_v(",\n")]),_c('span',[_v("en-UM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Minor Outlying Islands)\"")]),_v(",\n")]),_c('span',[_v("en-VI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Virgin Islands)\"")]),_v(",\n")]),_c('span',[_v("en-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United Kingdom)\"")]),_v(",\n")]),_c('span',[_v("en-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United States)\"")]),_v(",\n")]),_c('span',[_v("en-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Esperanto\"")]),_v(",\n")]),_c('span',[_v("et-EE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian (Estonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("et")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian\"")]),_v(",\n")]),_c('span',[_v("ee-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Ghana)\"")]),_v(",\n")]),_c('span',[_v("ee-TG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe\"")]),_v(",\n")]),_c('span',[_v("fo-FO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese (Faroe Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese\"")]),_v(",\n")]),_c('span',[_v("fil-PH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino (Philippines)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fil")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino\"")]),_v(",\n")]),_c('span',[_v("fi-FI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish (Finland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish\"")]),_v(",\n")]),_c('span',[_v("fr-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Belgium)\"")]),_v(",\n")]),_c('span',[_v("fr-BJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Benin)\"")]),_v(",\n")]),_c('span',[_v("fr-BF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burkina Faso)\"")]),_v(",\n")]),_c('span',[_v("fr-BI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burundi)\"")]),_v(",\n")]),_c('span',[_v("fr-CM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Cameroon)\"")]),_v(",\n")]),_c('span',[_v("fr-CA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Canada)\"")]),_v(",\n")]),_c('span',[_v("fr-CF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Central African Republic)\"")]),_v(",\n")]),_c('span',[_v("fr-TD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Chad)\"")]),_v(",\n")]),_c('span',[_v("fr-KM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Comoros)\"")]),_v(",\n")]),_c('span',[_v("fr-CG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Brazzaville)\"")]),_v(",\n")]),_c('span',[_v("fr-CD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Kinshasa)\"")]),_v(",\n")]),_c('span',[_v("fr-CI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Côte d’Ivoire)\"")]),_v(",\n")]),_c('span',[_v("fr-DJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Djibouti)\"")]),_v(",\n")]),_c('span',[_v("fr-GQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_v("fr-FR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (France)\"")]),_v(",\n")]),_c('span',[_v("fr-GA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Gabon)\"")]),_v(",\n")]),_c('span',[_v("fr-GP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guadeloupe)\"")]),_v(",\n")]),_c('span',[_v("fr-GN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guinea)\"")]),_v(",\n")]),_c('span',[_v("fr-LU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Luxembourg)\"")]),_v(",\n")]),_c('span',[_v("fr-MG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Madagascar)\"")]),_v(",\n")]),_c('span',[_v("fr-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Mali)\"")]),_v(",\n")]),_c('span',[_v("fr-MQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Martinique)\"")]),_v(",\n")]),_c('span',[_v("fr-MC: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Monaco)\"")]),_v(",\n")]),_c('span',[_v("fr-NE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Niger)\"")]),_v(",\n")]),_c('span',[_v("fr-RW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Rwanda)\"")]),_v(",\n")]),_c('span',[_v("fr-RE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Réunion)\"")]),_v(",\n")]),_c('span',[_v("fr-BL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Barthélemy)\"")]),_v(",\n")]),_c('span',[_v("fr-MF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Martin)\"")]),_v(",\n")]),_c('span',[_v("fr-SN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Senegal)\"")]),_v(",\n")]),_c('span',[_v("fr-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Switzerland)\"")]),_v(",\n")]),_c('span',[_v("fr-TG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French\"")]),_v(",\n")]),_c('span',[_v("ff-SN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah (Senegal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ff")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah\"")]),_v(",\n")]),_c('span',[_v("gl-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician\"")]),_v(",\n")]),_c('span',[_v("lg-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda\"")]),_v(",\n")]),_c('span',[_v("ka-GE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian (Georgia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ka")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian\"")]),_v(",\n")]),_c('span',[_v("de-AT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Austria)\"")]),_v(",\n")]),_c('span',[_v("de-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Belgium)\"")]),_v(",\n")]),_c('span',[_v("de-DE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Germany)\"")]),_v(",\n")]),_c('span',[_v("de-LI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Liechtenstein)\"")]),_v(",\n")]),_c('span',[_v("de-LU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Luxembourg)\"")]),_v(",\n")]),_c('span',[_v("de-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German\"")]),_v(",\n")]),_c('span',[_v("el-CY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Cyprus)\"")]),_v(",\n")]),_c('span',[_v("el-GR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Greece)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek\"")]),_v(",\n")]),_c('span',[_v("gu-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati\"")]),_v(",\n")]),_c('span',[_v("guz-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("guz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii\"")]),_v(",\n")]),_c('span',[_v("ha-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Ghana)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-NE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Niger)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa\"")]),_v(",\n")]),_c('span',[_v("haw-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("haw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian\"")]),_v(",\n")]),_c('span',[_v("he-IL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew (Israel)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("he")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew\"")]),_v(",\n")]),_c('span',[_v("hi-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi\"")]),_v(",\n")]),_c('span',[_v("hu-HU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian (Hungary)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian\"")]),_v(",\n")]),_c('span',[_v("is-IS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic (Iceland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("is")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic\"")]),_v(",\n")]),_c('span',[_v("ig-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ig")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo\"")]),_v(",\n")]),_c('span',[_v("id-ID: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian (Indonesia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian\"")]),_v(",\n")]),_c('span',[_v("ga-IE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish (Ireland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ga")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish\"")]),_v(",\n")]),_c('span',[_v("it-IT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Italy)\"")]),_v(",\n")]),_c('span',[_v("it-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian\"")]),_v(",\n")]),_c('span',[_v("ja-JP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese (Japan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ja")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese\"")]),_v(",\n")]),_c('span',[_v("kea-CV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu (Cape Verde)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kea")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu\"")]),_v(",\n")]),_c('span',[_v("kab-DZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle (Algeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle\"")]),_v(",\n")]),_c('span',[_v("kl-GL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut (Greenland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut\"")]),_v(",\n")]),_c('span',[_v("kln-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kln")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin\"")]),_v(",\n")]),_c('span',[_v("kam-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kam")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba\"")]),_v(",\n")]),_c('span',[_v("kn-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada\"")]),_v(",\n")]),_c('span',[_v("kk-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("kk-Cyrl-KZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic, Kazakhstan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh\"")]),_v(",\n")]),_c('span',[_v("km-KH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer (Cambodia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("km")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer\"")]),_v(",\n")]),_c('span',[_v("ki-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ki")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu\"")]),_v(",\n")]),_c('span',[_v("rw-RW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda (Rwanda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda\"")]),_v(",\n")]),_c('span',[_v("kok-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kok")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani\"")]),_v(",\n")]),_c('span',[_v("ko-KR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean (South Korea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ko")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean\"")]),_v(",\n")]),_c('span',[_v("khq-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("khq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini\"")]),_v(",\n")]),_c('span',[_v("ses-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ses")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni\"")]),_v(",\n")]),_c('span',[_v("lag-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lag")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi\"")]),_v(",\n")]),_c('span',[_v("lv-LV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian (Latvia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian\"")]),_v(",\n")]),_c('span',[_v("lt-LT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian (Lithuania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian\"")]),_v(",\n")]),_c('span',[_v("luo-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo\"")]),_v(",\n")]),_c('span',[_v("luy-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia\"")]),_v(",\n")]),_c('span',[_v("mk-MK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian (Macedonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian\"")]),_v(",\n")]),_c('span',[_v("jmc-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jmc")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame\"")]),_v(",\n")]),_c('span',[_v("kde-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kde")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde\"")]),_v(",\n")]),_c('span',[_v("mg-MG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy (Madagascar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy\"")]),_v(",\n")]),_c('span',[_v("ms-BN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Brunei)\"")]),_v(",\n")]),_c('span',[_v("ms-MY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Malaysia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay\"")]),_v(",\n")]),_c('span',[_v("ml-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ml")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam\"")]),_v(",\n")]),_c('span',[_v("mt-MT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese (Malta)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese\"")]),_v(",\n")]),_c('span',[_v("gv-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx\"")]),_v(",\n")]),_c('span',[_v("mr-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi\"")]),_v(",\n")]),_c('span',[_v("mas-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Kenya)\"")]),_v(",\n")]),_c('span',[_v("mas-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai\"")]),_v(",\n")]),_c('span',[_v("mer-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mer")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru\"")]),_v(",\n")]),_c('span',[_v("mfe-MU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen (Mauritius)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mfe")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen\"")]),_v(",\n")]),_c('span',[_v("naq-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("naq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama\"")]),_v(",\n")]),_c('span',[_v("ne-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (India)\"")]),_v(",\n")]),_c('span',[_v("ne-NP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (Nepal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali\"")]),_v(",\n")]),_c('span',[_v("nd-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nd")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele\"")]),_v(",\n")]),_c('span',[_v("nb-NO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nb")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål\"")]),_v(",\n")]),_c('span',[_v("nn-NO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk\"")]),_v(",\n")]),_c('span',[_v("nyn-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nyn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole\"")]),_v(",\n")]),_c('span',[_v("or-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("or")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya\"")]),_v(",\n")]),_c('span',[_v("om-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Ethiopia)\"")]),_v(",\n")]),_c('span',[_v("om-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo\"")]),_v(",\n")]),_c('span',[_v("ps-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto (Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto\"")]),_v(",\n")]),_c('span',[_v("fa-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Afghanistan)\"")]),_v(",\n")]),_c('span',[_v("fa-IR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Iran)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian\"")]),_v(",\n")]),_c('span',[_v("pl-PL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish (Poland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish\"")]),_v(",\n")]),_c('span',[_v("pt-BR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Brazil)\"")]),_v(",\n")]),_c('span',[_v("pt-GW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Guinea-Bissau)\"")]),_v(",\n")]),_c('span',[_v("pt-MZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Mozambique)\"")]),_v(",\n")]),_c('span',[_v("pt-PT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Portugal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese\"")]),_v(",\n")]),_c('span',[_v("pa-Arab: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic)\"")]),_v(",\n")]),_c('span',[_v("pa-Arab-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic, Pakistan)\"")]),_v(",\n")]),_c('span',[_v("pa-Guru: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi)\"")]),_v(",\n")]),_c('span',[_v("pa-Guru-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi, India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi\"")]),_v(",\n")]),_c('span',[_v("ro-MD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Moldova)\"")]),_v(",\n")]),_c('span',[_v("ro-RO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Romania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian\"")]),_v(",\n")]),_c('span',[_v("rm-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh\"")]),_v(",\n")]),_c('span',[_v("rof-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rof")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo\"")]),_v(",\n")]),_c('span',[_v("ru-MD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Moldova)\"")]),_v(",\n")]),_c('span',[_v("ru-RU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Russia)\"")]),_v(",\n")]),_c('span',[_v("ru-UA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian\"")]),_v(",\n")]),_c('span',[_v("rwk-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rwk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa\"")]),_v(",\n")]),_c('span',[_v("saq-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("saq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu\"")]),_v(",\n")]),_c('span',[_v("sg-CF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango (Central African Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango\"")]),_v(",\n")]),_c('span',[_v("seh-MZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena (Mozambique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-ME: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Montenegro)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-RS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Serbia)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-ME: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Montenegro)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-RS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Serbia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian\"")]),_v(",\n")]),_c('span',[_v("sn-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona\"")]),_v(",\n")]),_c('span',[_v("ii-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi (China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ii")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi\"")]),_v(",\n")]),_c('span',[_v("si-LK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("si")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala\"")]),_v(",\n")]),_c('span',[_v("sk-SK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak (Slovakia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak\"")]),_v(",\n")]),_c('span',[_v("sl-SI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian (Slovenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian\"")]),_v(",\n")]),_c('span',[_v("xog-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xog")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga\"")]),_v(",\n")]),_c('span',[_v("so-DJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Djibouti)\"")]),_v(",\n")]),_c('span',[_v("so-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Ethiopia)\"")]),_v(",\n")]),_c('span',[_v("so-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Kenya)\"")]),_v(",\n")]),_c('span',[_v("so-SO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Somalia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali\"")]),_v(",\n")]),_c('span',[_v("es-AR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Argentina)\"")]),_v(",\n")]),_c('span',[_v("es-BO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Bolivia)\"")]),_v(",\n")]),_c('span',[_v("es-CL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Chile)\"")]),_v(",\n")]),_c('span',[_v("es-CO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Colombia)\"")]),_v(",\n")]),_c('span',[_v("es-CR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Costa Rica)\"")]),_v(",\n")]),_c('span',[_v("es-DO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Dominican Republic)\"")]),_v(",\n")]),_c('span',[_v("es-EC: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Ecuador)\"")]),_v(",\n")]),_c('span',[_v("es-SV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (El Salvador)\"")]),_v(",\n")]),_c('span',[_v("es-GQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_v("es-GT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Guatemala)\"")]),_v(",\n")]),_c('span',[_v("es-HN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Honduras)\"")]),_v(",\n")]),_c('span',[_v("es-"),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("419")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Latin America)\"")]),_v(",\n")]),_c('span',[_v("es-MX: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Mexico)\"")]),_v(",\n")]),_c('span',[_v("es-NI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Nicaragua)\"")]),_v(",\n")]),_c('span',[_v("es-PA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Panama)\"")]),_v(",\n")]),_c('span',[_v("es-PY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Paraguay)\"")]),_v(",\n")]),_c('span',[_v("es-PE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Peru)\"")]),_v(",\n")]),_c('span',[_v("es-PR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Puerto Rico)\"")]),_v(",\n")]),_c('span',[_v("es-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Spain)\"")]),_v(",\n")]),_c('span',[_v("es-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (United States)\"")]),_v(",\n")]),_c('span',[_v("es-UY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Uruguay)\"")]),_v(",\n")]),_c('span',[_v("es-VE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Venezuela)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish\"")]),_v(",\n")]),_c('span',[_v("sw-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Kenya)\"")]),_v(",\n")]),_c('span',[_v("sw-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili\"")]),_v(",\n")]),_c('span',[_v("sv-FI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Finland)\"")]),_v(",\n")]),_c('span',[_v("sv-SE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Sweden)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish\"")]),_v(",\n")]),_c('span',[_v("gsw-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gsw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German\"")]),_v(",\n")]),_c('span',[_v("shi-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin)\"")]),_v(",\n")]),_c('span',[_v("shi-Latn-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_v("shi-Tfng: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh)\"")]),_v(",\n")]),_c('span',[_v("shi-Tfng-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit\"")]),_v(",\n")]),_c('span',[_v("dav-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dav")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita\"")]),_v(",\n")]),_c('span',[_v("ta-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (India)\"")]),_v(",\n")]),_c('span',[_v("ta-LK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil\"")]),_v(",\n")]),_c('span',[_v("te-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("te")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu\"")]),_v(",\n")]),_c('span',[_v("teo-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Kenya)\"")]),_v(",\n")]),_c('span',[_v("teo-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso\"")]),_v(",\n")]),_c('span',[_v("th-TH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai (Thailand)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("th")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai\"")]),_v(",\n")]),_c('span',[_v("bo-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (China)\"")]),_v(",\n")]),_c('span',[_v("bo-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan\"")]),_v(",\n")]),_c('span',[_v("ti-ER: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Eritrea)\"")]),_v(",\n")]),_c('span',[_v("ti-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya\"")]),_v(",\n")]),_c('span',[_v("to-TO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga (Tonga)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("to")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga\"")]),_v(",\n")]),_c('span',[_v("tr-TR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish (Turkey)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish\"")]),_v(",\n")]),_c('span',[_v("uk-UA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian\"")]),_v(",\n")]),_c('span',[_v("ur-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (India)\"")]),_v(",\n")]),_c('span',[_v("ur-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu\"")]),_v(",\n")]),_c('span',[_v("uz-Arab: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic)\"")]),_v(",\n")]),_c('span',[_v("uz-Arab-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic, Afghanistan)\"")]),_v(",\n")]),_c('span',[_v("uz-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("uz-Cyrl-UZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_v("uz-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin)\"")]),_v(",\n")]),_c('span',[_v("uz-Latn-UZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek\"")]),_v(",\n")]),_c('span',[_v("vi-VN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese (Vietnam)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese\"")]),_v(",\n")]),_c('span',[_v("vun-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vun")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo\"")]),_v(",\n")]),_c('span',[_v("cy-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh\"")]),_v(",\n")]),_c('span',[_v("yo-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba\"")]),_v(",\n")]),_c('span',[_v("zu-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu\"")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/28357857/5885921"}},[_v("https://stackoverflow.com/a/28357857/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"intrasitelinkvalidation"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intrasiteLinkValidation")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intrasitelinkvalidation","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Toggle whether to validate intra-site links.")]),_v(" By default, MarkBind will validate all intra-site links and alert you of any potentially invalid ones.\nTo disable this validation "),_c('strong',[_v("entirely")]),_v(", you may add the following to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(":")]),_v(" "),_c('div',{attrs:{"id":"disable-global-intrasite-link-validation"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('h4',{attrs:{"id":"plantumlcheck"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plantumlCheck")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plantumlcheck","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Toggle whether to display a warning about PlantUML's prerequisite.")]),_v(" By default, MarkBind will check if you have Graphviz installed when you are using PlantUML diagrams.\nTo disable this validation and the display of the warning, you may add the following to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(":")]),_v(" "),_c('div',{attrs:{"id":"plantuml-check"}},[_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 ")])])])])],1)]),_v(" "),_m(5),_v(" "),_c('br')],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(6)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,7 +11,7 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('em',[_v("User Guide → Setting Site Properties")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"setting-site-properties"}},[_c('span',{staticClass:"anchor",attrs:{"id":"setting-site-properties"}}),_v("Setting Site Properties"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#setting-site-properties","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"setting-site-properties"}},[_v("Setting Site Properties"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#setting-site-properties","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("Setting site-wide properties of a MarkBind site is done by updating the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file found and the project root. For example, it can be used to set the deploy destination, themes to apply, plugins to use etc.")])])} @@ -23,6 +23,6 @@ with(this){return _c('p',[_v("More info about the "),_c('code',{pre:true,attrs:{ with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/workingWithSites.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Working with Sites")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingPlugins.html"}},[_c('span',[_c('span',[_v("Using Plugins")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/siteJsonFile.html b/userGuide/siteJsonFile.html index 909f47c..6465ab8 100644 --- a/userGuide/siteJsonFile.html +++ b/userGuide/siteJsonFile.html @@ -3,10 +3,8 @@ <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="generator" content="MarkBind 4.1.0"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>MarkBind - site.json File - + + MarkBind - site.json File @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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",
   "faviconPath": "myfavicon.png",
   "titlePrefix": "FooBar Dev Docs",
@@ -71,6 +78,7 @@
     "*.json",
     "*.md",
     ".git/*",
+    ".gitignore",
     "node_modules/*"
   ],
   "plugins" : [
@@ -87,58 +95,185 @@
   },
   "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:

                                        • bootstrapTheme (Optional) The theme for the generated site.
                                          +

                                          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:

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

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

                                          • codeLineNumbers [Optional. Default: false]
                                            -The global setting to display or hide line numbers for code blocks. Accepts either true or false.

                                          pages

                                          An array of pages to be rendered.

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

                                          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",
-    }
-  ],
-}
-

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

                                          pagesExclude

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

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

                                          externalScripts

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

                                          globalOverride

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

                                          ignore

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

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

                                          deploy

                                          The settings for auto-deployment to GitHub pages.

                                          • message [Optional. Default: "Site Update."]
                                            +The global setting to display or hide line numbers for code blocks. Accepts either true or false.

                                          pages

                                          An array of pages to be rendered.

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

                                          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",
+    }
+  ],
+}
+

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

                                          pagesExclude

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

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

                                          externalScripts

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

                                          globalOverride

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

                                          ignore

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

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

                                          deploy

                                          The settings for auto-deployment to GitHub pages.

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

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

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

                                          plugins, pluginsContext

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

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

                                          headingIndexingLevel

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

                                          enableSearch

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

                                          timeZone

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

                                          Time Zone Options


                                          locale

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

                                          Locale Options


                                          intrasiteLinkValidation

                                          Toggle whether to validate intra-site links. By default, MarkBind will validate all intra-site links and alert you of any potentially invalid ones. +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:

                                        plantumlCheck

                                        Toggle whether to display a warning about PlantUML's prerequisite. By default, MarkBind will check if you have Graphviz installed when you are using PlantUML diagrams. +

                                        plantumlCheck

                                        Toggle whether to display a warning about PlantUML's prerequisite. By default, MarkBind will check if you have Graphviz installed when you are using PlantUML diagrams. To disable this validation and the display of the warning, you may add the following to site.json:

                                        ...
 "plantumlCheck": false,
 ...
-
                                        +

                                        + diff --git a/userGuide/siteJsonFile.page-vue-render.js b/userGuide/siteJsonFile.page-vue-render.js index c292dc5..7a5daa7 100644 --- a/userGuide/siteJsonFile.page-vue-render.js +++ b/userGuide/siteJsonFile.page-vue-render.js @@ -1,26 +1,26 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_c('div',{staticClass:"lead"},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(" is used to configure various aspects of a MarkBind website.")],1)]),_v(" "),_m(1),_v(" "),_m(2),_m(3),_v(" "),_m(4),_v(" "),_c('div',[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you are deploying the site to GitHub pages, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" setting in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" should be set to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/\"")]),_v(" for the links in the deployed site to work correctly.")]),_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(" If you are using GitHub Pages to host your deployed website at repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorg/myproduct")]),_v(" (i.e., the website is published at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://myorg.github.io/myproduct")]),_v("), then your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/myproduct\"")]),_v(".")])])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" does not support "),_c('a',{attrs:{"href":"/userGuide/glossary.html#live-preview"}},[_v("live preview")]),_v(" as there is no use case for changing it in during "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(".")])]),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_c('div',{attrs:{"id":"page-property-overriding"}},[_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("")]),_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('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',{attrs:{"id":"page-glob-overriding"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If multiple "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(" (pages) or "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")])]),_v(" (globs) attributes match a file, MarkBind will merge properties from all entries. If there are conflicting properties, pages are given priority over globs. If there are multiple matching glob entries, the last entry is given priority.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Multiple entries matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yes\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("The following properties will apply to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from page")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from glob")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Page takes priority over glob")]),_v("\n")]),_c('span',[_v("}\n")])])])])])],1),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_m(33),_v(" "),_m(34),_v(" "),_m(35),_v(" "),_m(36),_v(" "),_m(37),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Time Zone Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Abidjan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Accra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Algiers\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Bissau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Cairo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Casablanca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ceuta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/El_Aaiun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Johannesburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Juba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Khartoum\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Lagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Maputo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Monrovia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Nairobi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ndjamena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Sao_Tome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tripoli\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tunis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Windhoek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Adak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Anchorage\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Araguaina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Buenos_Aires\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Catamarca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Cordoba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Jujuy\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/La_Rioja\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Mendoza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Rio_Gallegos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Salta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Juan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Luis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Tucuman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Ushuaia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Asuncion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Atikokan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia_Banderas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Barbados\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belize\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Blanc-Sablon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boa_Vista\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bogota\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boise\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cambridge_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Campo_Grande\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cancun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Caracas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cayenne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chicago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chihuahua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Costa_Rica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Creston\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cuiaba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Curacao\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Danmarkshavn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson_Creek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Denver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Detroit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Edmonton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Eirunepe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/El_Salvador\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fort_Nelson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fortaleza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Glace_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Godthab\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Goose_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Grand_Turk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guatemala\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guayaquil\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guyana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Halifax\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Havana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Hermosillo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Indianapolis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Knox\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Marengo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Petersburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Tell_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vevay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vincennes\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Winamac\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Inuvik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Iqaluit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Jamaica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Juneau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Louisville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Monticello\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/La_Paz\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Lima\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Los_Angeles\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Maceio\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Managua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Manaus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Martinique\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Matamoros\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mazatlan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Menominee\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Merida\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Metlakatla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mexico_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Miquelon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Moncton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Monterrey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Montevideo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nassau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/New_York\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nipigon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Noronha\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Beulah\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Center\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/New_Salem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Ojinaga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Panama\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Pangnirtung\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Paramaribo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Phoenix\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port-au-Prince\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port_of_Spain\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Porto_Velho\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Puerto_Rico\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Punta_Arenas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rainy_River\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rankin_Inlet\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Recife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Regina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Resolute\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rio_Branco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santarem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santiago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santo_Domingo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sao_Paulo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Scoresbysund\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sitka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/St_Johns\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Swift_Current\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tegucigalpa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thule\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thunder_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tijuana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Toronto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Vancouver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Whitehorse\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Winnipeg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yakutat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yellowknife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Casey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Davis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/DumontDUrville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Macquarie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Mawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Palmer\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Rothera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Syowa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Troll\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Vostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Almaty\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Amman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Anadyr\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtobe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ashgabat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Atyrau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baghdad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baku\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bangkok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Barnaul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Beirut\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bishkek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Brunei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Chita\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Choibalsan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Colombo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Damascus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dhaka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dili\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dubai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dushanbe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Famagusta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Gaza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hebron\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ho_Chi_Minh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hong_Kong\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hovd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Irkutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jakarta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jayapura\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jerusalem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kabul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kamchatka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Karachi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kathmandu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Khandyga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kolkata\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Krasnoyarsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuala_Lumpur\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuching\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Macau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Magadan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Makassar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Manila\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Nicosia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novokuznetsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novosibirsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Omsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Oral\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pontianak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pyongyang\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qostanay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qyzylorda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Riyadh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Sakhalin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Samarkand\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Seoul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Shanghai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Singapore\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Srednekolymsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Taipei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tashkent\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tbilisi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tehran\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Thimphu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tokyo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tomsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ulaanbaatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Urumqi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ust-Nera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Vladivostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yakutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yangon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yekaterinburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yerevan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Azores\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Bermuda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Canary\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Cape_Verde\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Faroe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Madeira\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Reykjavik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/South_Georgia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Stanley\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Adelaide\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Brisbane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Broken_Hill\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Currie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Darwin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Eucla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Hobart\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lindeman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lord_Howe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Melbourne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Perth\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Sydney\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Amsterdam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Andorra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Astrakhan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Athens\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Belgrade\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Berlin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Brussels\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Bucharest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Budapest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Chisinau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Copenhagen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Dublin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Gibraltar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Helsinki\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Istanbul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kaliningrad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kiev\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kirov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Lisbon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/London\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Luxembourg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Madrid\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Malta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Minsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Monaco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Moscow\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Oslo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Paris\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Prague\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Riga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Rome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Samara\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Saratov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Simferopol\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Sofia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Stockholm\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tallinn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tirane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Ulyanovsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Uzhgorod\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vienna\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vilnius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Volgograd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Warsaw\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zaporozhye\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zurich\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Chagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Christmas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Cocos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Kerguelen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mahe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Maldives\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mauritius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Reunion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Apia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Auckland\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Bougainville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chatham\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chuuk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Easter\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Efate\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Enderbury\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fakaofo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fiji\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Funafuti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Galapagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Gambier\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guadalcanal\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Honolulu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kiritimati\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kosrae\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kwajalein\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Majuro\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Marquesas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Nauru\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Niue\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Norfolk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Noumea\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pago_Pago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Palau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pitcairn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pohnpei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Port_Moresby\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Rarotonga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tahiti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tarawa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tongatapu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wake\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wallis\"")]),_v("\n")])])]),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/54500197/5885921"}},[_v("https://stackoverflow.com/a/54500197/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_m(38),_v(" "),_m(39),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Locale Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("af-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (Namibia)\"")]),_v(",\n")]),_c('span',[_v("af-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("af")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans\"")]),_v(",\n")]),_c('span',[_v("ak-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan (Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ak")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan\"")]),_v(",\n")]),_c('span',[_v("sq-AL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian (Albania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian\"")]),_v(",\n")]),_c('span',[_v("am-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("am")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic\"")]),_v(",\n")]),_c('span',[_v("ar-DZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Algeria)\"")]),_v(",\n")]),_c('span',[_v("ar-BH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Bahrain)\"")]),_v(",\n")]),_c('span',[_v("ar-EG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Egypt)\"")]),_v(",\n")]),_c('span',[_v("ar-IQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Iraq)\"")]),_v(",\n")]),_c('span',[_v("ar-JO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Jordan)\"")]),_v(",\n")]),_c('span',[_v("ar-KW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Kuwait)\"")]),_v(",\n")]),_c('span',[_v("ar-LB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Lebanon)\"")]),_v(",\n")]),_c('span',[_v("ar-LY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Libya)\"")]),_v(",\n")]),_c('span',[_v("ar-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Morocco)\"")]),_v(",\n")]),_c('span',[_v("ar-OM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Oman)\"")]),_v(",\n")]),_c('span',[_v("ar-QA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Qatar)\"")]),_v(",\n")]),_c('span',[_v("ar-SA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Saudi Arabia)\"")]),_v(",\n")]),_c('span',[_v("ar-SD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Sudan)\"")]),_v(",\n")]),_c('span',[_v("ar-SY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Syria)\"")]),_v(",\n")]),_c('span',[_v("ar-TN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Tunisia)\"")]),_v(",\n")]),_c('span',[_v("ar-AE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (United Arab Emirates)\"")]),_v(",\n")]),_c('span',[_v("ar-YE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Yemen)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic\"")]),_v(",\n")]),_c('span',[_v("hy-AM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian (Armenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("as")]),_v("-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("as")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese\"")]),_v(",\n")]),_c('span',[_v("asa-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("asa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu\"")]),_v(",\n")]),_c('span',[_v("az-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("az-Cyrl-AZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_v("az-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin)\"")]),_v(",\n")]),_c('span',[_v("az-Latn-AZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani\"")]),_v(",\n")]),_c('span',[_v("bm-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara\"")]),_v(",\n")]),_c('span',[_v("eu-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque\"")]),_v(",\n")]),_c('span',[_v("be-BY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian (Belarus)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("be")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian\"")]),_v(",\n")]),_c('span',[_v("bem-ZM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba (Zambia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bem")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba\"")]),_v(",\n")]),_c('span',[_v("bez-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bez")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena\"")]),_v(",\n")]),_c('span',[_v("bn-BD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (Bangladesh)\"")]),_v(",\n")]),_c('span',[_v("bn-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali\"")]),_v(",\n")]),_c('span',[_v("bs-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian (Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian\"")]),_v(",\n")]),_c('span',[_v("bg-BG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian (Bulgaria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian\"")]),_v(",\n")]),_c('span',[_v("my-MM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese (Myanmar [Burma])\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("my")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese\"")]),_v(",\n")]),_c('span',[_v("yue-Hant-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cantonese (Traditional, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("ca-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ca")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan\"")]),_v(",\n")]),_c('span',[_v("tzm-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin)\"")]),_v(",\n")]),_c('span',[_v("tzm-Latn-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight\"")]),_v(",\n")]),_c('span',[_v("chr-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("chr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee\"")]),_v(",\n")]),_c('span',[_v("cgg-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cgg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga\"")]),_v(",\n")]),_c('span',[_v("zh-Hans: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-MO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-SG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Singapore)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-MO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-TW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Taiwan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese\"")]),_v(",\n")]),_c('span',[_v("kw-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish\"")]),_v(",\n")]),_c('span',[_v("hr-HR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian (Croatia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian\"")]),_v(",\n")]),_c('span',[_v("cs-CZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech (Czech Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech\"")]),_v(",\n")]),_c('span',[_v("da-DK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish (Denmark)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("da")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish\"")]),_v(",\n")]),_c('span',[_v("nl-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Belgium)\"")]),_v(",\n")]),_c('span',[_v("nl-NL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Netherlands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch\"")]),_v(",\n")]),_c('span',[_v("ebu-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ebu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu\"")]),_v(",\n")]),_c('span',[_v("en-AS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (American Samoa)\"")]),_v(",\n")]),_c('span',[_v("en-AU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Australia)\"")]),_v(",\n")]),_c('span',[_v("en-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belgium)\"")]),_v(",\n")]),_c('span',[_v("en-BZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belize)\"")]),_v(",\n")]),_c('span',[_v("en-BW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Botswana)\"")]),_v(",\n")]),_c('span',[_v("en-CA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Canada)\"")]),_v(",\n")]),_c('span',[_v("en-GU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Guam)\"")]),_v(",\n")]),_c('span',[_v("en-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("en-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (India)\"")]),_v(",\n")]),_c('span',[_v("en-IE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Ireland)\"")]),_v(",\n")]),_c('span',[_v("en-IL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Israel)\"")]),_v(",\n")]),_c('span',[_v("en-JM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Jamaica)\"")]),_v(",\n")]),_c('span',[_v("en-MT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Malta)\"")]),_v(",\n")]),_c('span',[_v("en-MH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Marshall Islands)\"")]),_v(",\n")]),_c('span',[_v("en-MU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Mauritius)\"")]),_v(",\n")]),_c('span',[_v("en-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Namibia)\"")]),_v(",\n")]),_c('span',[_v("en-NZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (New Zealand)\"")]),_v(",\n")]),_c('span',[_v("en-MP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Northern Mariana Islands)\"")]),_v(",\n")]),_c('span',[_v("en-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Pakistan)\"")]),_v(",\n")]),_c('span',[_v("en-PH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Philippines)\"")]),_v(",\n")]),_c('span',[_v("en-SG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Singapore)\"")]),_v(",\n")]),_c('span',[_v("en-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (South Africa)\"")]),_v(",\n")]),_c('span',[_v("en-TT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Trinidad and Tobago)\"")]),_v(",\n")]),_c('span',[_v("en-UM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Minor Outlying Islands)\"")]),_v(",\n")]),_c('span',[_v("en-VI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Virgin Islands)\"")]),_v(",\n")]),_c('span',[_v("en-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United Kingdom)\"")]),_v(",\n")]),_c('span',[_v("en-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United States)\"")]),_v(",\n")]),_c('span',[_v("en-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Esperanto\"")]),_v(",\n")]),_c('span',[_v("et-EE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian (Estonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("et")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian\"")]),_v(",\n")]),_c('span',[_v("ee-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Ghana)\"")]),_v(",\n")]),_c('span',[_v("ee-TG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe\"")]),_v(",\n")]),_c('span',[_v("fo-FO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese (Faroe Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese\"")]),_v(",\n")]),_c('span',[_v("fil-PH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino (Philippines)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fil")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino\"")]),_v(",\n")]),_c('span',[_v("fi-FI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish (Finland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish\"")]),_v(",\n")]),_c('span',[_v("fr-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Belgium)\"")]),_v(",\n")]),_c('span',[_v("fr-BJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Benin)\"")]),_v(",\n")]),_c('span',[_v("fr-BF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burkina Faso)\"")]),_v(",\n")]),_c('span',[_v("fr-BI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burundi)\"")]),_v(",\n")]),_c('span',[_v("fr-CM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Cameroon)\"")]),_v(",\n")]),_c('span',[_v("fr-CA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Canada)\"")]),_v(",\n")]),_c('span',[_v("fr-CF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Central African Republic)\"")]),_v(",\n")]),_c('span',[_v("fr-TD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Chad)\"")]),_v(",\n")]),_c('span',[_v("fr-KM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Comoros)\"")]),_v(",\n")]),_c('span',[_v("fr-CG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Brazzaville)\"")]),_v(",\n")]),_c('span',[_v("fr-CD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Kinshasa)\"")]),_v(",\n")]),_c('span',[_v("fr-CI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Côte d’Ivoire)\"")]),_v(",\n")]),_c('span',[_v("fr-DJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Djibouti)\"")]),_v(",\n")]),_c('span',[_v("fr-GQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_v("fr-FR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (France)\"")]),_v(",\n")]),_c('span',[_v("fr-GA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Gabon)\"")]),_v(",\n")]),_c('span',[_v("fr-GP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guadeloupe)\"")]),_v(",\n")]),_c('span',[_v("fr-GN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guinea)\"")]),_v(",\n")]),_c('span',[_v("fr-LU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Luxembourg)\"")]),_v(",\n")]),_c('span',[_v("fr-MG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Madagascar)\"")]),_v(",\n")]),_c('span',[_v("fr-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Mali)\"")]),_v(",\n")]),_c('span',[_v("fr-MQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Martinique)\"")]),_v(",\n")]),_c('span',[_v("fr-MC: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Monaco)\"")]),_v(",\n")]),_c('span',[_v("fr-NE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Niger)\"")]),_v(",\n")]),_c('span',[_v("fr-RW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Rwanda)\"")]),_v(",\n")]),_c('span',[_v("fr-RE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Réunion)\"")]),_v(",\n")]),_c('span',[_v("fr-BL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Barthélemy)\"")]),_v(",\n")]),_c('span',[_v("fr-MF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Martin)\"")]),_v(",\n")]),_c('span',[_v("fr-SN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Senegal)\"")]),_v(",\n")]),_c('span',[_v("fr-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Switzerland)\"")]),_v(",\n")]),_c('span',[_v("fr-TG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French\"")]),_v(",\n")]),_c('span',[_v("ff-SN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah (Senegal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ff")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah\"")]),_v(",\n")]),_c('span',[_v("gl-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician\"")]),_v(",\n")]),_c('span',[_v("lg-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda\"")]),_v(",\n")]),_c('span',[_v("ka-GE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian (Georgia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ka")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian\"")]),_v(",\n")]),_c('span',[_v("de-AT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Austria)\"")]),_v(",\n")]),_c('span',[_v("de-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Belgium)\"")]),_v(",\n")]),_c('span',[_v("de-DE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Germany)\"")]),_v(",\n")]),_c('span',[_v("de-LI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Liechtenstein)\"")]),_v(",\n")]),_c('span',[_v("de-LU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Luxembourg)\"")]),_v(",\n")]),_c('span',[_v("de-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German\"")]),_v(",\n")]),_c('span',[_v("el-CY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Cyprus)\"")]),_v(",\n")]),_c('span',[_v("el-GR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Greece)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek\"")]),_v(",\n")]),_c('span',[_v("gu-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati\"")]),_v(",\n")]),_c('span',[_v("guz-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("guz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii\"")]),_v(",\n")]),_c('span',[_v("ha-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Ghana)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-NE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Niger)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa\"")]),_v(",\n")]),_c('span',[_v("haw-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("haw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian\"")]),_v(",\n")]),_c('span',[_v("he-IL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew (Israel)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("he")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew\"")]),_v(",\n")]),_c('span',[_v("hi-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi\"")]),_v(",\n")]),_c('span',[_v("hu-HU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian (Hungary)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian\"")]),_v(",\n")]),_c('span',[_v("is-IS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic (Iceland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("is")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic\"")]),_v(",\n")]),_c('span',[_v("ig-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ig")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo\"")]),_v(",\n")]),_c('span',[_v("id-ID: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian (Indonesia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian\"")]),_v(",\n")]),_c('span',[_v("ga-IE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish (Ireland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ga")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish\"")]),_v(",\n")]),_c('span',[_v("it-IT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Italy)\"")]),_v(",\n")]),_c('span',[_v("it-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian\"")]),_v(",\n")]),_c('span',[_v("ja-JP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese (Japan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ja")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese\"")]),_v(",\n")]),_c('span',[_v("kea-CV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu (Cape Verde)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kea")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu\"")]),_v(",\n")]),_c('span',[_v("kab-DZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle (Algeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle\"")]),_v(",\n")]),_c('span',[_v("kl-GL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut (Greenland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut\"")]),_v(",\n")]),_c('span',[_v("kln-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kln")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin\"")]),_v(",\n")]),_c('span',[_v("kam-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kam")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba\"")]),_v(",\n")]),_c('span',[_v("kn-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada\"")]),_v(",\n")]),_c('span',[_v("kk-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("kk-Cyrl-KZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic, Kazakhstan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh\"")]),_v(",\n")]),_c('span',[_v("km-KH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer (Cambodia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("km")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer\"")]),_v(",\n")]),_c('span',[_v("ki-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ki")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu\"")]),_v(",\n")]),_c('span',[_v("rw-RW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda (Rwanda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda\"")]),_v(",\n")]),_c('span',[_v("kok-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kok")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani\"")]),_v(",\n")]),_c('span',[_v("ko-KR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean (South Korea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ko")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean\"")]),_v(",\n")]),_c('span',[_v("khq-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("khq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini\"")]),_v(",\n")]),_c('span',[_v("ses-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ses")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni\"")]),_v(",\n")]),_c('span',[_v("lag-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lag")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi\"")]),_v(",\n")]),_c('span',[_v("lv-LV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian (Latvia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian\"")]),_v(",\n")]),_c('span',[_v("lt-LT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian (Lithuania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian\"")]),_v(",\n")]),_c('span',[_v("luo-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo\"")]),_v(",\n")]),_c('span',[_v("luy-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia\"")]),_v(",\n")]),_c('span',[_v("mk-MK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian (Macedonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian\"")]),_v(",\n")]),_c('span',[_v("jmc-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jmc")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame\"")]),_v(",\n")]),_c('span',[_v("kde-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kde")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde\"")]),_v(",\n")]),_c('span',[_v("mg-MG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy (Madagascar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy\"")]),_v(",\n")]),_c('span',[_v("ms-BN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Brunei)\"")]),_v(",\n")]),_c('span',[_v("ms-MY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Malaysia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay\"")]),_v(",\n")]),_c('span',[_v("ml-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ml")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam\"")]),_v(",\n")]),_c('span',[_v("mt-MT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese (Malta)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese\"")]),_v(",\n")]),_c('span',[_v("gv-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx\"")]),_v(",\n")]),_c('span',[_v("mr-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi\"")]),_v(",\n")]),_c('span',[_v("mas-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Kenya)\"")]),_v(",\n")]),_c('span',[_v("mas-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai\"")]),_v(",\n")]),_c('span',[_v("mer-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mer")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru\"")]),_v(",\n")]),_c('span',[_v("mfe-MU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen (Mauritius)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mfe")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen\"")]),_v(",\n")]),_c('span',[_v("naq-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("naq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama\"")]),_v(",\n")]),_c('span',[_v("ne-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (India)\"")]),_v(",\n")]),_c('span',[_v("ne-NP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (Nepal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali\"")]),_v(",\n")]),_c('span',[_v("nd-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nd")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele\"")]),_v(",\n")]),_c('span',[_v("nb-NO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nb")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål\"")]),_v(",\n")]),_c('span',[_v("nn-NO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk\"")]),_v(",\n")]),_c('span',[_v("nyn-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nyn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole\"")]),_v(",\n")]),_c('span',[_v("or-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("or")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya\"")]),_v(",\n")]),_c('span',[_v("om-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Ethiopia)\"")]),_v(",\n")]),_c('span',[_v("om-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo\"")]),_v(",\n")]),_c('span',[_v("ps-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto (Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto\"")]),_v(",\n")]),_c('span',[_v("fa-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Afghanistan)\"")]),_v(",\n")]),_c('span',[_v("fa-IR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Iran)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian\"")]),_v(",\n")]),_c('span',[_v("pl-PL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish (Poland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish\"")]),_v(",\n")]),_c('span',[_v("pt-BR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Brazil)\"")]),_v(",\n")]),_c('span',[_v("pt-GW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Guinea-Bissau)\"")]),_v(",\n")]),_c('span',[_v("pt-MZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Mozambique)\"")]),_v(",\n")]),_c('span',[_v("pt-PT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Portugal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese\"")]),_v(",\n")]),_c('span',[_v("pa-Arab: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic)\"")]),_v(",\n")]),_c('span',[_v("pa-Arab-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic, Pakistan)\"")]),_v(",\n")]),_c('span',[_v("pa-Guru: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi)\"")]),_v(",\n")]),_c('span',[_v("pa-Guru-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi, India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi\"")]),_v(",\n")]),_c('span',[_v("ro-MD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Moldova)\"")]),_v(",\n")]),_c('span',[_v("ro-RO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Romania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian\"")]),_v(",\n")]),_c('span',[_v("rm-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh\"")]),_v(",\n")]),_c('span',[_v("rof-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rof")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo\"")]),_v(",\n")]),_c('span',[_v("ru-MD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Moldova)\"")]),_v(",\n")]),_c('span',[_v("ru-RU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Russia)\"")]),_v(",\n")]),_c('span',[_v("ru-UA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian\"")]),_v(",\n")]),_c('span',[_v("rwk-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rwk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa\"")]),_v(",\n")]),_c('span',[_v("saq-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("saq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu\"")]),_v(",\n")]),_c('span',[_v("sg-CF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango (Central African Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango\"")]),_v(",\n")]),_c('span',[_v("seh-MZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena (Mozambique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-ME: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Montenegro)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-RS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Serbia)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-ME: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Montenegro)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-RS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Serbia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian\"")]),_v(",\n")]),_c('span',[_v("sn-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona\"")]),_v(",\n")]),_c('span',[_v("ii-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi (China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ii")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi\"")]),_v(",\n")]),_c('span',[_v("si-LK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("si")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala\"")]),_v(",\n")]),_c('span',[_v("sk-SK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak (Slovakia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak\"")]),_v(",\n")]),_c('span',[_v("sl-SI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian (Slovenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian\"")]),_v(",\n")]),_c('span',[_v("xog-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xog")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga\"")]),_v(",\n")]),_c('span',[_v("so-DJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Djibouti)\"")]),_v(",\n")]),_c('span',[_v("so-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Ethiopia)\"")]),_v(",\n")]),_c('span',[_v("so-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Kenya)\"")]),_v(",\n")]),_c('span',[_v("so-SO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Somalia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali\"")]),_v(",\n")]),_c('span',[_v("es-AR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Argentina)\"")]),_v(",\n")]),_c('span',[_v("es-BO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Bolivia)\"")]),_v(",\n")]),_c('span',[_v("es-CL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Chile)\"")]),_v(",\n")]),_c('span',[_v("es-CO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Colombia)\"")]),_v(",\n")]),_c('span',[_v("es-CR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Costa Rica)\"")]),_v(",\n")]),_c('span',[_v("es-DO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Dominican Republic)\"")]),_v(",\n")]),_c('span',[_v("es-EC: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Ecuador)\"")]),_v(",\n")]),_c('span',[_v("es-SV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (El Salvador)\"")]),_v(",\n")]),_c('span',[_v("es-GQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_v("es-GT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Guatemala)\"")]),_v(",\n")]),_c('span',[_v("es-HN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Honduras)\"")]),_v(",\n")]),_c('span',[_v("es-"),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("419")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Latin America)\"")]),_v(",\n")]),_c('span',[_v("es-MX: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Mexico)\"")]),_v(",\n")]),_c('span',[_v("es-NI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Nicaragua)\"")]),_v(",\n")]),_c('span',[_v("es-PA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Panama)\"")]),_v(",\n")]),_c('span',[_v("es-PY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Paraguay)\"")]),_v(",\n")]),_c('span',[_v("es-PE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Peru)\"")]),_v(",\n")]),_c('span',[_v("es-PR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Puerto Rico)\"")]),_v(",\n")]),_c('span',[_v("es-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Spain)\"")]),_v(",\n")]),_c('span',[_v("es-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (United States)\"")]),_v(",\n")]),_c('span',[_v("es-UY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Uruguay)\"")]),_v(",\n")]),_c('span',[_v("es-VE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Venezuela)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish\"")]),_v(",\n")]),_c('span',[_v("sw-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Kenya)\"")]),_v(",\n")]),_c('span',[_v("sw-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili\"")]),_v(",\n")]),_c('span',[_v("sv-FI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Finland)\"")]),_v(",\n")]),_c('span',[_v("sv-SE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Sweden)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish\"")]),_v(",\n")]),_c('span',[_v("gsw-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gsw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German\"")]),_v(",\n")]),_c('span',[_v("shi-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin)\"")]),_v(",\n")]),_c('span',[_v("shi-Latn-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_v("shi-Tfng: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh)\"")]),_v(",\n")]),_c('span',[_v("shi-Tfng-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit\"")]),_v(",\n")]),_c('span',[_v("dav-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dav")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita\"")]),_v(",\n")]),_c('span',[_v("ta-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (India)\"")]),_v(",\n")]),_c('span',[_v("ta-LK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil\"")]),_v(",\n")]),_c('span',[_v("te-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("te")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu\"")]),_v(",\n")]),_c('span',[_v("teo-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Kenya)\"")]),_v(",\n")]),_c('span',[_v("teo-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso\"")]),_v(",\n")]),_c('span',[_v("th-TH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai (Thailand)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("th")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai\"")]),_v(",\n")]),_c('span',[_v("bo-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (China)\"")]),_v(",\n")]),_c('span',[_v("bo-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan\"")]),_v(",\n")]),_c('span',[_v("ti-ER: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Eritrea)\"")]),_v(",\n")]),_c('span',[_v("ti-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya\"")]),_v(",\n")]),_c('span',[_v("to-TO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga (Tonga)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("to")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga\"")]),_v(",\n")]),_c('span',[_v("tr-TR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish (Turkey)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish\"")]),_v(",\n")]),_c('span',[_v("uk-UA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian\"")]),_v(",\n")]),_c('span',[_v("ur-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (India)\"")]),_v(",\n")]),_c('span',[_v("ur-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu\"")]),_v(",\n")]),_c('span',[_v("uz-Arab: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic)\"")]),_v(",\n")]),_c('span',[_v("uz-Arab-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic, Afghanistan)\"")]),_v(",\n")]),_c('span',[_v("uz-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("uz-Cyrl-UZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_v("uz-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin)\"")]),_v(",\n")]),_c('span',[_v("uz-Latn-UZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek\"")]),_v(",\n")]),_c('span',[_v("vi-VN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese (Vietnam)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese\"")]),_v(",\n")]),_c('span',[_v("vun-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vun")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo\"")]),_v(",\n")]),_c('span',[_v("cy-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh\"")]),_v(",\n")]),_c('span',[_v("yo-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba\"")]),_v(",\n")]),_c('span',[_v("zu-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu\"")]),_v("\n")])])]),_c('p',[_c('span',{staticClass:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/28357857/5885921"}},[_v("https://stackoverflow.com/a/28357857/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_m(40),_v(" "),_m(41),_v(" "),_m(42),_v(" "),_m(43),_v(" "),_m(44),_v(" "),_m(45),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{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":"#site-json-file"}},[_v("site.json File‎")]),_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":"#baseurl"}},[_v("baseUrl‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#faviconpath"}},[_v("faviconPath‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#titleprefix"}},[_v("titlePrefix‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#titlesuffix"}},[_v("titleSuffix‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#style"}},[_v("style‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#pages"}},[_v("pages‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#pagesexclude"}},[_v("pagesExclude‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#externalscripts"}},[_v("externalScripts‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#globaloverride"}},[_v("globalOverride‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#ignore"}},[_v("ignore‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploy"}},[_v("deploy‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugins-pluginscontext"}},[_v("plugins, pluginsContext‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#headingindexinglevel"}},[_v("headingIndexingLevel‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#enablesearch"}},[_v("enableSearch‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#timezone"}},[_v("timeZone‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#locale"}},[_v("locale‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#intrasitelinkvalidation"}},[_v("intrasiteLinkValidation‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plantumlcheck"}},[_v("plantumlCheck‎")])])])],1)])],1),_v(" "),_m(46)])} +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('div',{staticClass:"lead"},[_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file "),_c('tooltip',{scopedSlots:_u([{key:"content",fn:function(){return [_v("The directory that contains all the project files. It is also the directory in which the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file is located.")]},proxy:true}])},[_v("root directory")]),_v(" is used to configure various aspects of a MarkBind website.")],1)]),_v(" "),_m(1),_v(" "),_c('pre',[_m(2),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(3),_v(" "),_m(4),_v(" "),_c('div',[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("If you are deploying the site to GitHub pages, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" setting in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" should be set to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/\"")]),_v(" for the links in the deployed site to work correctly.")]),_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(" If you are using GitHub Pages to host your deployed website at repo "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("myorg/myproduct")]),_v(" (i.e., the website is published at "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("https://myorg.github.io/myproduct")]),_v("), then your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"/myproduct\"")]),_v(".")])])],1),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")]),_v(" does not support "),_c('a',{attrs:{"href":"/userGuide/glossary.html#live-preview"}},[_v("live preview")]),_v(" as there is no use case for changing it in during "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind serve")]),_v(".")])]),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_c('div',{attrs:{"id":"page-property-overriding"}},[_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',{attrs:{"id":"page-glob-overriding"}},[_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If multiple "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")])]),_v(" (pages) or "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")])]),_v(" (globs) attributes match a file, MarkBind will merge properties from all entries. If there are conflicting properties, pages are given priority over globs. If there are multiple matching glob entries, the last entry is given priority.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" Multiple entries matching "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"yes\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 following properties will apply to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from page")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Inherited from glob")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Page takes priority over glob")]),_v("\n")]),_c('span',[_v("}\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_m(33),_v(" "),_m(34),_v(" "),_m(35),_v(" "),_m(36),_v(" "),_m(37),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Time Zone Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Abidjan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Accra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Algiers\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Bissau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Cairo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Casablanca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ceuta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/El_Aaiun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Johannesburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Juba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Khartoum\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Lagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Maputo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Monrovia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Nairobi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Ndjamena\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Sao_Tome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tripoli\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Tunis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Africa/Windhoek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Adak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Anchorage\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Araguaina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Buenos_Aires\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Catamarca\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Cordoba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Jujuy\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/La_Rioja\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Mendoza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Rio_Gallegos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Salta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Juan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/San_Luis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Tucuman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Argentina/Ushuaia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Asuncion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Atikokan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bahia_Banderas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Barbados\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Belize\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Blanc-Sablon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boa_Vista\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Bogota\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Boise\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cambridge_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Campo_Grande\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cancun\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Caracas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cayenne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chicago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Chihuahua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Costa_Rica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Creston\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Cuiaba\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Curacao\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Danmarkshavn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Dawson_Creek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Denver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Detroit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Edmonton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Eirunepe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/El_Salvador\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fort_Nelson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Fortaleza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Glace_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Godthab\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Goose_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Grand_Turk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guatemala\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guayaquil\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Guyana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Halifax\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Havana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Hermosillo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Indianapolis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Knox\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Marengo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Petersburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Tell_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vevay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Vincennes\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Indiana/Winamac\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Inuvik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Iqaluit\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Jamaica\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Juneau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Louisville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Kentucky/Monticello\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/La_Paz\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Lima\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Los_Angeles\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Maceio\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Managua\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Manaus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Martinique\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Matamoros\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mazatlan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Menominee\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Merida\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Metlakatla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Mexico_City\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Miquelon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Moncton\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Monterrey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Montevideo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nassau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/New_York\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nipigon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Nome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Noronha\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Beulah\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/Center\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/North_Dakota/New_Salem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Ojinaga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Panama\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Pangnirtung\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Paramaribo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Phoenix\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port-au-Prince\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Port_of_Spain\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Porto_Velho\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Puerto_Rico\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Punta_Arenas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rainy_River\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rankin_Inlet\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Recife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Regina\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Resolute\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Rio_Branco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santarem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santiago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Santo_Domingo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sao_Paulo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Scoresbysund\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Sitka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/St_Johns\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Swift_Current\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tegucigalpa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thule\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Thunder_Bay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Tijuana\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Toronto\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Vancouver\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Whitehorse\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Winnipeg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yakutat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"America/Yellowknife\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Casey\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Davis\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/DumontDUrville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Macquarie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Mawson\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Palmer\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Rothera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Syowa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Troll\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Antarctica/Vostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Almaty\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Amman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Anadyr\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Aqtobe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ashgabat\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Atyrau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baghdad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Baku\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bangkok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Barnaul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Beirut\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Bishkek\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Brunei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Chita\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Choibalsan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Colombo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Damascus\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dhaka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dili\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dubai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Dushanbe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Famagusta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Gaza\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hebron\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ho_Chi_Minh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hong_Kong\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Hovd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Irkutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jakarta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jayapura\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Jerusalem\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kabul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kamchatka\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Karachi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kathmandu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Khandyga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kolkata\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Krasnoyarsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuala_Lumpur\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Kuching\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Macau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Magadan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Makassar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Manila\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Nicosia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novokuznetsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Novosibirsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Omsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Oral\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pontianak\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Pyongyang\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qostanay\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Qyzylorda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Riyadh\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Sakhalin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Samarkand\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Seoul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Shanghai\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Singapore\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Srednekolymsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Taipei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tashkent\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tbilisi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tehran\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Thimphu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tokyo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Tomsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ulaanbaatar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Urumqi\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Ust-Nera\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Vladivostok\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yakutsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yangon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yekaterinburg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asia/Yerevan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Azores\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Bermuda\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Canary\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Cape_Verde\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Faroe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Madeira\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Reykjavik\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/South_Georgia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Atlantic/Stanley\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Adelaide\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Brisbane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Broken_Hill\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Currie\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Darwin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Eucla\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Hobart\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lindeman\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Lord_Howe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Melbourne\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Perth\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Australia/Sydney\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Amsterdam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Andorra\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Astrakhan\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Athens\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Belgrade\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Berlin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Brussels\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Bucharest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Budapest\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Chisinau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Copenhagen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Dublin\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Gibraltar\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Helsinki\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Istanbul\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kaliningrad\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kiev\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Kirov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Lisbon\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/London\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Luxembourg\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Madrid\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Malta\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Minsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Monaco\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Moscow\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Oslo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Paris\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Prague\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Riga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Rome\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Samara\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Saratov\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Simferopol\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Sofia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Stockholm\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tallinn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Tirane\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Ulyanovsk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Uzhgorod\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vienna\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Vilnius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Volgograd\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Warsaw\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zaporozhye\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Europe/Zurich\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Chagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Christmas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Cocos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Kerguelen\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mahe\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Maldives\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Mauritius\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indian/Reunion\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Apia\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Auckland\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Bougainville\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chatham\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Chuuk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Easter\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Efate\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Enderbury\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fakaofo\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Fiji\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Funafuti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Galapagos\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Gambier\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guadalcanal\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Guam\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Honolulu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kiritimati\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kosrae\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Kwajalein\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Majuro\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Marquesas\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Nauru\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Niue\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Norfolk\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Noumea\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pago_Pago\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Palau\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pitcairn\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Pohnpei\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Port_Moresby\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Rarotonga\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tahiti\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tarawa\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Tongatapu\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wake\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pacific/Wallis\"")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/54500197/5885921"}},[_v("https://stackoverflow.com/a/54500197/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_m(38),_v(" "),_m(39),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Locale Options")])]},proxy:true}])},[_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("af-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (Namibia)\"")]),_v(",\n")]),_c('span',[_v("af-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("af")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Afrikaans\"")]),_v(",\n")]),_c('span',[_v("ak-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan (Ghana)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ak")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Akan\"")]),_v(",\n")]),_c('span',[_v("sq-AL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian (Albania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Albanian\"")]),_v(",\n")]),_c('span',[_v("am-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("am")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Amharic\"")]),_v(",\n")]),_c('span',[_v("ar-DZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Algeria)\"")]),_v(",\n")]),_c('span',[_v("ar-BH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Bahrain)\"")]),_v(",\n")]),_c('span',[_v("ar-EG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Egypt)\"")]),_v(",\n")]),_c('span',[_v("ar-IQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Iraq)\"")]),_v(",\n")]),_c('span',[_v("ar-JO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Jordan)\"")]),_v(",\n")]),_c('span',[_v("ar-KW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Kuwait)\"")]),_v(",\n")]),_c('span',[_v("ar-LB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Lebanon)\"")]),_v(",\n")]),_c('span',[_v("ar-LY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Libya)\"")]),_v(",\n")]),_c('span',[_v("ar-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Morocco)\"")]),_v(",\n")]),_c('span',[_v("ar-OM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Oman)\"")]),_v(",\n")]),_c('span',[_v("ar-QA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Qatar)\"")]),_v(",\n")]),_c('span',[_v("ar-SA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Saudi Arabia)\"")]),_v(",\n")]),_c('span',[_v("ar-SD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Sudan)\"")]),_v(",\n")]),_c('span',[_v("ar-SY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Syria)\"")]),_v(",\n")]),_c('span',[_v("ar-TN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Tunisia)\"")]),_v(",\n")]),_c('span',[_v("ar-AE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (United Arab Emirates)\"")]),_v(",\n")]),_c('span',[_v("ar-YE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic (Yemen)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ar")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Arabic\"")]),_v(",\n")]),_c('span',[_v("hy-AM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian (Armenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Armenian\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("as")]),_v("-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("as")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Assamese\"")]),_v(",\n")]),_c('span',[_v("asa-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("asa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Asu\"")]),_v(",\n")]),_c('span',[_v("az-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("az-Cyrl-AZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Cyrillic, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_v("az-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin)\"")]),_v(",\n")]),_c('span',[_v("az-Latn-AZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani (Latin, Azerbaijan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("az")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Azerbaijani\"")]),_v(",\n")]),_c('span',[_v("bm-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bambara\"")]),_v(",\n")]),_c('span',[_v("eu-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Basque\"")]),_v(",\n")]),_c('span',[_v("be-BY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian (Belarus)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("be")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Belarusian\"")]),_v(",\n")]),_c('span',[_v("bem-ZM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba (Zambia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bem")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bemba\"")]),_v(",\n")]),_c('span',[_v("bez-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bez")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bena\"")]),_v(",\n")]),_c('span',[_v("bn-BD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (Bangladesh)\"")]),_v(",\n")]),_c('span',[_v("bn-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bengali\"")]),_v(",\n")]),_c('span',[_v("bs-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian (Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bosnian\"")]),_v(",\n")]),_c('span',[_v("bg-BG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian (Bulgaria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Bulgarian\"")]),_v(",\n")]),_c('span',[_v("my-MM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese (Myanmar [Burma])\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("my")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Burmese\"")]),_v(",\n")]),_c('span',[_v("yue-Hant-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cantonese (Traditional, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("ca-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ca")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Catalan\"")]),_v(",\n")]),_c('span',[_v("tzm-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin)\"")]),_v(",\n")]),_c('span',[_v("tzm-Latn-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tzm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Central Morocco Tamazight\"")]),_v(",\n")]),_c('span',[_v("chr-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("chr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cherokee\"")]),_v(",\n")]),_c('span',[_v("cgg-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cgg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chiga\"")]),_v(",\n")]),_c('span',[_v("zh-Hans: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-MO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hans-SG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Simplified Han, Singapore)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-MO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Macau SAR China)\"")]),_v(",\n")]),_c('span',[_v("zh-Hant-TW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese (Traditional Han, Taiwan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Chinese\"")]),_v(",\n")]),_c('span',[_v("kw-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Cornish\"")]),_v(",\n")]),_c('span',[_v("hr-HR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian (Croatia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Croatian\"")]),_v(",\n")]),_c('span',[_v("cs-CZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech (Czech Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cs")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Czech\"")]),_v(",\n")]),_c('span',[_v("da-DK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish (Denmark)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("da")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Danish\"")]),_v(",\n")]),_c('span',[_v("nl-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Belgium)\"")]),_v(",\n")]),_c('span',[_v("nl-NL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch (Netherlands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dutch\"")]),_v(",\n")]),_c('span',[_v("ebu-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ebu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Embu\"")]),_v(",\n")]),_c('span',[_v("en-AS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (American Samoa)\"")]),_v(",\n")]),_c('span',[_v("en-AU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Australia)\"")]),_v(",\n")]),_c('span',[_v("en-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belgium)\"")]),_v(",\n")]),_c('span',[_v("en-BZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Belize)\"")]),_v(",\n")]),_c('span',[_v("en-BW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Botswana)\"")]),_v(",\n")]),_c('span',[_v("en-CA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Canada)\"")]),_v(",\n")]),_c('span',[_v("en-GU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Guam)\"")]),_v(",\n")]),_c('span',[_v("en-HK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Hong Kong SAR China)\"")]),_v(",\n")]),_c('span',[_v("en-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (India)\"")]),_v(",\n")]),_c('span',[_v("en-IE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Ireland)\"")]),_v(",\n")]),_c('span',[_v("en-IL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Israel)\"")]),_v(",\n")]),_c('span',[_v("en-JM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Jamaica)\"")]),_v(",\n")]),_c('span',[_v("en-MT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Malta)\"")]),_v(",\n")]),_c('span',[_v("en-MH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Marshall Islands)\"")]),_v(",\n")]),_c('span',[_v("en-MU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Mauritius)\"")]),_v(",\n")]),_c('span',[_v("en-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Namibia)\"")]),_v(",\n")]),_c('span',[_v("en-NZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (New Zealand)\"")]),_v(",\n")]),_c('span',[_v("en-MP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Northern Mariana Islands)\"")]),_v(",\n")]),_c('span',[_v("en-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Pakistan)\"")]),_v(",\n")]),_c('span',[_v("en-PH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Philippines)\"")]),_v(",\n")]),_c('span',[_v("en-SG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Singapore)\"")]),_v(",\n")]),_c('span',[_v("en-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (South Africa)\"")]),_v(",\n")]),_c('span',[_v("en-TT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Trinidad and Tobago)\"")]),_v(",\n")]),_c('span',[_v("en-UM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Minor Outlying Islands)\"")]),_v(",\n")]),_c('span',[_v("en-VI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (U.S. Virgin Islands)\"")]),_v(",\n")]),_c('span',[_v("en-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United Kingdom)\"")]),_v(",\n")]),_c('span',[_v("en-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (United States)\"")]),_v(",\n")]),_c('span',[_v("en-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("en")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"English\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Esperanto\"")]),_v(",\n")]),_c('span',[_v("et-EE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian (Estonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("et")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Estonian\"")]),_v(",\n")]),_c('span',[_v("ee-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Ghana)\"")]),_v(",\n")]),_c('span',[_v("ee-TG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ee")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ewe\"")]),_v(",\n")]),_c('span',[_v("fo-FO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese (Faroe Islands)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Faroese\"")]),_v(",\n")]),_c('span',[_v("fil-PH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino (Philippines)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fil")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Filipino\"")]),_v(",\n")]),_c('span',[_v("fi-FI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish (Finland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Finnish\"")]),_v(",\n")]),_c('span',[_v("fr-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Belgium)\"")]),_v(",\n")]),_c('span',[_v("fr-BJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Benin)\"")]),_v(",\n")]),_c('span',[_v("fr-BF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burkina Faso)\"")]),_v(",\n")]),_c('span',[_v("fr-BI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Burundi)\"")]),_v(",\n")]),_c('span',[_v("fr-CM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Cameroon)\"")]),_v(",\n")]),_c('span',[_v("fr-CA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Canada)\"")]),_v(",\n")]),_c('span',[_v("fr-CF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Central African Republic)\"")]),_v(",\n")]),_c('span',[_v("fr-TD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Chad)\"")]),_v(",\n")]),_c('span',[_v("fr-KM: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Comoros)\"")]),_v(",\n")]),_c('span',[_v("fr-CG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Brazzaville)\"")]),_v(",\n")]),_c('span',[_v("fr-CD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Congo - Kinshasa)\"")]),_v(",\n")]),_c('span',[_v("fr-CI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Côte d’Ivoire)\"")]),_v(",\n")]),_c('span',[_v("fr-DJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Djibouti)\"")]),_v(",\n")]),_c('span',[_v("fr-GQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_v("fr-FR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (France)\"")]),_v(",\n")]),_c('span',[_v("fr-GA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Gabon)\"")]),_v(",\n")]),_c('span',[_v("fr-GP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guadeloupe)\"")]),_v(",\n")]),_c('span',[_v("fr-GN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Guinea)\"")]),_v(",\n")]),_c('span',[_v("fr-LU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Luxembourg)\"")]),_v(",\n")]),_c('span',[_v("fr-MG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Madagascar)\"")]),_v(",\n")]),_c('span',[_v("fr-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Mali)\"")]),_v(",\n")]),_c('span',[_v("fr-MQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Martinique)\"")]),_v(",\n")]),_c('span',[_v("fr-MC: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Monaco)\"")]),_v(",\n")]),_c('span',[_v("fr-NE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Niger)\"")]),_v(",\n")]),_c('span',[_v("fr-RW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Rwanda)\"")]),_v(",\n")]),_c('span',[_v("fr-RE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Réunion)\"")]),_v(",\n")]),_c('span',[_v("fr-BL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Barthélemy)\"")]),_v(",\n")]),_c('span',[_v("fr-MF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Saint Martin)\"")]),_v(",\n")]),_c('span',[_v("fr-SN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Senegal)\"")]),_v(",\n")]),_c('span',[_v("fr-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Switzerland)\"")]),_v(",\n")]),_c('span',[_v("fr-TG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French (Togo)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"French\"")]),_v(",\n")]),_c('span',[_v("ff-SN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah (Senegal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ff")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Fulah\"")]),_v(",\n")]),_c('span',[_v("gl-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician (Spain)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Galician\"")]),_v(",\n")]),_c('span',[_v("lg-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ganda\"")]),_v(",\n")]),_c('span',[_v("ka-GE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian (Georgia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ka")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Georgian\"")]),_v(",\n")]),_c('span',[_v("de-AT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Austria)\"")]),_v(",\n")]),_c('span',[_v("de-BE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Belgium)\"")]),_v(",\n")]),_c('span',[_v("de-DE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Germany)\"")]),_v(",\n")]),_c('span',[_v("de-LI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Liechtenstein)\"")]),_v(",\n")]),_c('span',[_v("de-LU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Luxembourg)\"")]),_v(",\n")]),_c('span',[_v("de-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("de")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"German\"")]),_v(",\n")]),_c('span',[_v("el-CY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Cyprus)\"")]),_v(",\n")]),_c('span',[_v("el-GR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek (Greece)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("el")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Greek\"")]),_v(",\n")]),_c('span',[_v("gu-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gujarati\"")]),_v(",\n")]),_c('span',[_v("guz-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("guz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Gusii\"")]),_v(",\n")]),_c('span',[_v("ha-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-GH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Ghana)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-NE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Niger)\"")]),_v(",\n")]),_c('span',[_v("ha-Latn-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa (Latin, Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ha")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hausa\"")]),_v(",\n")]),_c('span',[_v("haw-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian (United States)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("haw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hawaiian\"")]),_v(",\n")]),_c('span',[_v("he-IL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew (Israel)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("he")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hebrew\"")]),_v(",\n")]),_c('span',[_v("hi-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hindi\"")]),_v(",\n")]),_c('span',[_v("hu-HU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian (Hungary)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("hu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hungarian\"")]),_v(",\n")]),_c('span',[_v("is-IS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic (Iceland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("is")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Icelandic\"")]),_v(",\n")]),_c('span',[_v("ig-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ig")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Igbo\"")]),_v(",\n")]),_c('span',[_v("id-ID: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian (Indonesia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Indonesian\"")]),_v(",\n")]),_c('span',[_v("ga-IE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish (Ireland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ga")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Irish\"")]),_v(",\n")]),_c('span',[_v("it-IT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Italy)\"")]),_v(",\n")]),_c('span',[_v("it-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("it")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Italian\"")]),_v(",\n")]),_c('span',[_v("ja-JP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese (Japan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ja")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Japanese\"")]),_v(",\n")]),_c('span',[_v("kea-CV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu (Cape Verde)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kea")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabuverdianu\"")]),_v(",\n")]),_c('span',[_v("kab-DZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle (Algeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kab")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kabyle\"")]),_v(",\n")]),_c('span',[_v("kl-GL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut (Greenland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalaallisut\"")]),_v(",\n")]),_c('span',[_v("kln-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kln")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kalenjin\"")]),_v(",\n")]),_c('span',[_v("kam-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kam")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kamba\"")]),_v(",\n")]),_c('span',[_v("kn-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kannada\"")]),_v(",\n")]),_c('span',[_v("kk-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("kk-Cyrl-KZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh (Cyrillic, Kazakhstan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kazakh\"")]),_v(",\n")]),_c('span',[_v("km-KH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer (Cambodia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("km")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Khmer\"")]),_v(",\n")]),_c('span',[_v("ki-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ki")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kikuyu\"")]),_v(",\n")]),_c('span',[_v("rw-RW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda (Rwanda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Kinyarwanda\"")]),_v(",\n")]),_c('span',[_v("kok-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kok")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Konkani\"")]),_v(",\n")]),_c('span',[_v("ko-KR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean (South Korea)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ko")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Korean\"")]),_v(",\n")]),_c('span',[_v("khq-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("khq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyra Chiini\"")]),_v(",\n")]),_c('span',[_v("ses-ML: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni (Mali)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ses")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Koyraboro Senni\"")]),_v(",\n")]),_c('span',[_v("lag-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lag")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Langi\"")]),_v(",\n")]),_c('span',[_v("lv-LV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian (Latvia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Latvian\"")]),_v(",\n")]),_c('span',[_v("lt-LT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian (Lithuania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("lt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Lithuanian\"")]),_v(",\n")]),_c('span',[_v("luo-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luo\"")]),_v(",\n")]),_c('span',[_v("luy-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("luy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Luyia\"")]),_v(",\n")]),_c('span',[_v("mk-MK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian (Macedonia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Macedonian\"")]),_v(",\n")]),_c('span',[_v("jmc-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("jmc")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Machame\"")]),_v(",\n")]),_c('span',[_v("kde-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("kde")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Makonde\"")]),_v(",\n")]),_c('span',[_v("mg-MG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy (Madagascar)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malagasy\"")]),_v(",\n")]),_c('span',[_v("ms-BN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Brunei)\"")]),_v(",\n")]),_c('span',[_v("ms-MY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay (Malaysia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ms")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malay\"")]),_v(",\n")]),_c('span',[_v("ml-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ml")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Malayalam\"")]),_v(",\n")]),_c('span',[_v("mt-MT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese (Malta)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Maltese\"")]),_v(",\n")]),_c('span',[_v("gv-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Manx\"")]),_v(",\n")]),_c('span',[_v("mr-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Marathi\"")]),_v(",\n")]),_c('span',[_v("mas-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Kenya)\"")]),_v(",\n")]),_c('span',[_v("mas-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mas")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Masai\"")]),_v(",\n")]),_c('span',[_v("mer-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mer")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Meru\"")]),_v(",\n")]),_c('span',[_v("mfe-MU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen (Mauritius)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("mfe")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Morisyen\"")]),_v(",\n")]),_c('span',[_v("naq-NA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama (Namibia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("naq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nama\"")]),_v(",\n")]),_c('span',[_v("ne-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (India)\"")]),_v(",\n")]),_c('span',[_v("ne-NP: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali (Nepal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ne")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nepali\"")]),_v(",\n")]),_c('span',[_v("nd-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nd")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"North Ndebele\"")]),_v(",\n")]),_c('span',[_v("nb-NO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nb")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Bokmål\"")]),_v(",\n")]),_c('span',[_v("nn-NO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk (Norway)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Norwegian Nynorsk\"")]),_v(",\n")]),_c('span',[_v("nyn-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("nyn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Nyankole\"")]),_v(",\n")]),_c('span',[_v("or-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("or")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oriya\"")]),_v(",\n")]),_c('span',[_v("om-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Ethiopia)\"")]),_v(",\n")]),_c('span',[_v("om-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("om")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Oromo\"")]),_v(",\n")]),_c('span',[_v("ps-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto (Afghanistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ps")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Pashto\"")]),_v(",\n")]),_c('span',[_v("fa-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Afghanistan)\"")]),_v(",\n")]),_c('span',[_v("fa-IR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian (Iran)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("fa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Persian\"")]),_v(",\n")]),_c('span',[_v("pl-PL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish (Poland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Polish\"")]),_v(",\n")]),_c('span',[_v("pt-BR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Brazil)\"")]),_v(",\n")]),_c('span',[_v("pt-GW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Guinea-Bissau)\"")]),_v(",\n")]),_c('span',[_v("pt-MZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Mozambique)\"")]),_v(",\n")]),_c('span',[_v("pt-PT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese (Portugal)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pt")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Portuguese\"")]),_v(",\n")]),_c('span',[_v("pa-Arab: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic)\"")]),_v(",\n")]),_c('span',[_v("pa-Arab-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Arabic, Pakistan)\"")]),_v(",\n")]),_c('span',[_v("pa-Guru: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi)\"")]),_v(",\n")]),_c('span',[_v("pa-Guru-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi (Gurmukhi, India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("pa")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Punjabi\"")]),_v(",\n")]),_c('span',[_v("ro-MD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Moldova)\"")]),_v(",\n")]),_c('span',[_v("ro-RO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian (Romania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ro")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romanian\"")]),_v(",\n")]),_c('span',[_v("rm-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rm")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Romansh\"")]),_v(",\n")]),_c('span',[_v("rof-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rof")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rombo\"")]),_v(",\n")]),_c('span',[_v("ru-MD: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Moldova)\"")]),_v(",\n")]),_c('span',[_v("ru-RU: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Russia)\"")]),_v(",\n")]),_c('span',[_v("ru-UA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ru")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Russian\"")]),_v(",\n")]),_c('span',[_v("rwk-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rwk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Rwa\"")]),_v(",\n")]),_c('span',[_v("saq-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("saq")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Samburu\"")]),_v(",\n")]),_c('span',[_v("sg-CF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango (Central African Republic)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sg")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sango\"")]),_v(",\n")]),_c('span',[_v("seh-MZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena (Mozambique)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seh")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sena\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-ME: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Montenegro)\"")]),_v(",\n")]),_c('span',[_v("sr-Cyrl-RS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Cyrillic, Serbia)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-BA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Bosnia and Herzegovina)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-ME: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Montenegro)\"")]),_v(",\n")]),_c('span',[_v("sr-Latn-RS: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian (Latin, Serbia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Serbian\"")]),_v(",\n")]),_c('span',[_v("sn-ZW: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona (Zimbabwe)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sn")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Shona\"")]),_v(",\n")]),_c('span',[_v("ii-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi (China)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ii")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sichuan Yi\"")]),_v(",\n")]),_c('span',[_v("si-LK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("si")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Sinhala\"")]),_v(",\n")]),_c('span',[_v("sk-SK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak (Slovakia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovak\"")]),_v(",\n")]),_c('span',[_v("sl-SI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian (Slovenia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sl")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Slovenian\"")]),_v(",\n")]),_c('span',[_v("xog-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xog")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Soga\"")]),_v(",\n")]),_c('span',[_v("so-DJ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Djibouti)\"")]),_v(",\n")]),_c('span',[_v("so-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Ethiopia)\"")]),_v(",\n")]),_c('span',[_v("so-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Kenya)\"")]),_v(",\n")]),_c('span',[_v("so-SO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali (Somalia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("so")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Somali\"")]),_v(",\n")]),_c('span',[_v("es-AR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Argentina)\"")]),_v(",\n")]),_c('span',[_v("es-BO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Bolivia)\"")]),_v(",\n")]),_c('span',[_v("es-CL: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Chile)\"")]),_v(",\n")]),_c('span',[_v("es-CO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Colombia)\"")]),_v(",\n")]),_c('span',[_v("es-CR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Costa Rica)\"")]),_v(",\n")]),_c('span',[_v("es-DO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Dominican Republic)\"")]),_v(",\n")]),_c('span',[_v("es-EC: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Ecuador)\"")]),_v(",\n")]),_c('span',[_v("es-SV: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (El Salvador)\"")]),_v(",\n")]),_c('span',[_v("es-GQ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Equatorial Guinea)\"")]),_v(",\n")]),_c('span',[_v("es-GT: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Guatemala)\"")]),_v(",\n")]),_c('span',[_v("es-HN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Honduras)\"")]),_v(",\n")]),_c('span',[_v("es-"),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("419")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Latin America)\"")]),_v(",\n")]),_c('span',[_v("es-MX: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Mexico)\"")]),_v(",\n")]),_c('span',[_v("es-NI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Nicaragua)\"")]),_v(",\n")]),_c('span',[_v("es-PA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Panama)\"")]),_v(",\n")]),_c('span',[_v("es-PY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Paraguay)\"")]),_v(",\n")]),_c('span',[_v("es-PE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Peru)\"")]),_v(",\n")]),_c('span',[_v("es-PR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Puerto Rico)\"")]),_v(",\n")]),_c('span',[_v("es-ES: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Spain)\"")]),_v(",\n")]),_c('span',[_v("es-US: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (United States)\"")]),_v(",\n")]),_c('span',[_v("es-UY: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Uruguay)\"")]),_v(",\n")]),_c('span',[_v("es-VE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish (Venezuela)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("es")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Spanish\"")]),_v(",\n")]),_c('span',[_v("sw-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Kenya)\"")]),_v(",\n")]),_c('span',[_v("sw-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swahili\"")]),_v(",\n")]),_c('span',[_v("sv-FI: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Finland)\"")]),_v(",\n")]),_c('span',[_v("sv-SE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish (Sweden)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("sv")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swedish\"")]),_v(",\n")]),_c('span',[_v("gsw-CH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German (Switzerland)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("gsw")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Swiss German\"")]),_v(",\n")]),_c('span',[_v("shi-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin)\"")]),_v(",\n")]),_c('span',[_v("shi-Latn-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Latin, Morocco)\"")]),_v(",\n")]),_c('span',[_v("shi-Tfng: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh)\"")]),_v(",\n")]),_c('span',[_v("shi-Tfng-MA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit (Tifinagh, Morocco)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("shi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tachelhit\"")]),_v(",\n")]),_c('span',[_v("dav-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita (Kenya)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dav")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Taita\"")]),_v(",\n")]),_c('span',[_v("ta-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (India)\"")]),_v(",\n")]),_c('span',[_v("ta-LK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil (Sri Lanka)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ta")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tamil\"")]),_v(",\n")]),_c('span',[_v("te-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("te")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Telugu\"")]),_v(",\n")]),_c('span',[_v("teo-KE: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Kenya)\"")]),_v(",\n")]),_c('span',[_v("teo-UG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso (Uganda)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("teo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Teso\"")]),_v(",\n")]),_c('span',[_v("th-TH: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai (Thailand)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("th")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Thai\"")]),_v(",\n")]),_c('span',[_v("bo-CN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (China)\"")]),_v(",\n")]),_c('span',[_v("bo-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan (India)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("bo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tibetan\"")]),_v(",\n")]),_c('span',[_v("ti-ER: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Eritrea)\"")]),_v(",\n")]),_c('span',[_v("ti-ET: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya (Ethiopia)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ti")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tigrinya\"")]),_v(",\n")]),_c('span',[_v("to-TO: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga (Tonga)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("to")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tonga\"")]),_v(",\n")]),_c('span',[_v("tr-TR: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish (Turkey)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tr")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Turkish\"")]),_v(",\n")]),_c('span',[_v("uk-UA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian (Ukraine)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uk")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Ukrainian\"")]),_v(",\n")]),_c('span',[_v("ur-IN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (India)\"")]),_v(",\n")]),_c('span',[_v("ur-PK: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu (Pakistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ur")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Urdu\"")]),_v(",\n")]),_c('span',[_v("uz-Arab: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic)\"")]),_v(",\n")]),_c('span',[_v("uz-Arab-AF: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Arabic, Afghanistan)\"")]),_v(",\n")]),_c('span',[_v("uz-Cyrl: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic)\"")]),_v(",\n")]),_c('span',[_v("uz-Cyrl-UZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Cyrillic, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_v("uz-Latn: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin)\"")]),_v(",\n")]),_c('span',[_v("uz-Latn-UZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek (Latin, Uzbekistan)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("uz")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Uzbek\"")]),_v(",\n")]),_c('span',[_v("vi-VN: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese (Vietnam)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vi")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vietnamese\"")]),_v(",\n")]),_c('span',[_v("vun-TZ: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo (Tanzania)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("vun")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Vunjo\"")]),_v(",\n")]),_c('span',[_v("cy-GB: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh (United Kingdom)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("cy")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Welsh\"")]),_v(",\n")]),_c('span',[_v("yo-NG: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba (Nigeria)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yo")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Yoruba\"")]),_v(",\n")]),_c('span',[_v("zu-ZA: "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu (South Africa)\"")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("zu")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Zulu\"")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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:"dimmed"},[_c('sub',[_v("[source: "),_c('a',{attrs:{"href":"https://stackoverflow.com/a/28357857/5885921"}},[_v("https://stackoverflow.com/a/28357857/5885921")]),_v(" ]")])])])])]),_v(" "),_c('br'),_v(" "),_m(40),_v(" "),_m(41),_v(" "),_c('div',{attrs:{"id":"disable-global-intrasite-link-validation"}},[_c('pre',[_m(42),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(43),_v(" "),_m(44),_v(" "),_c('div',{attrs:{"id":"plantuml-check"}},[_c('pre',[_m(45),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('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":"#site-json-file"}},[_v("site.json File‎")]),_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":"#baseurl"}},[_v("baseUrl‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#faviconpath"}},[_v("faviconPath‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#titleprefix"}},[_v("titlePrefix‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#titlesuffix"}},[_v("titleSuffix‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#style"}},[_v("style‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#pages"}},[_v("pages‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#pagesexclude"}},[_v("pagesExclude‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#externalscripts"}},[_v("externalScripts‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#globaloverride"}},[_v("globalOverride‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#ignore"}},[_v("ignore‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#deploy"}},[_v("deploy‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugins-pluginscontext"}},[_v("plugins, pluginsContext‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#headingindexinglevel"}},[_v("headingIndexingLevel‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#enablesearch"}},[_v("enableSearch‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#timezone"}},[_v("timeZone‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#locale"}},[_v("locale‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#intrasitelinkvalidation"}},[_v("intrasiteLinkValidation‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plantumlcheck"}},[_v("plantumlCheck‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(46)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"site-json-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-json-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-json-file","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"site-json-file"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-json-file","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Here is a typical "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file:")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"baseUrl\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/myproduct\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"faviconPath\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"myfavicon.png\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titlePrefix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar Dev Docs\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titleSuffix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar\"")]),_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("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdn.plot.ly/plotly-latest.min.js\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"frontmatter\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"header\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header.md\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/**/*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/*/appendix/*.md\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subtopic\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pagesExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subsite/**/*.md\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"node_modules/*\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"deploy\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"message\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Site Update.\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"repo\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/myorg/myrepo.git\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"branch\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"gh-pages\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globalOverride\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"footer\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"my-footer.md\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"ignore\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_site/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.json\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\".git/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"node_modules/*\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag1\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag2\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"headingIndexingLevel\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("4")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plantumlCheck\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_v("\n")]),_c('span',[_v("}\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"baseUrl\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/myproduct\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"faviconPath\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"myfavicon.png\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titlePrefix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar Dev Docs\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"titleSuffix\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"FooBar\"")]),_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("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pages\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"src\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"index.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"title\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hello World\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"normal\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"searchable\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"no\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdn.plot.ly/plotly-latest.min.js\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"frontmatter\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"header\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"header.md\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"glob\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/**/*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"topics/*/appendix/*.md\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"layout\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subtopic\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pagesExclude\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"subsite/**/*.md\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"node_modules/*\"")]),_v("],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"externalScripts\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"deploy\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"message\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Site Update.\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"repo\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/myorg/myrepo.git\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"branch\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"gh-pages\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"globalOverride\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"footer\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"my-footer.md\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"ignore\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_site/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.json\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*.md\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\".git/*\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\".gitignore\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"node_modules/*\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag1\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tag2\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"headingIndexingLevel\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("4")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plantumlCheck\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("true")]),_v("\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"baseurl"}},[_c('span',{staticClass:"anchor",attrs:{"id":"baseurl"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#baseurl","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"baseurl"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("baseUrl")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#baseurl","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("The base URL relative to your domain.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"\"")]),_v("(empty).")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"faviconpath"}},[_c('span',{staticClass:"anchor",attrs:{"id":"faviconpath"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("faviconPath")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#faviconpath","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"faviconpath"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("faviconPath")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#faviconpath","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("The location of the favicon.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("favicon.ico")]),_v(".")])} @@ -29,19 +29,19 @@ with(this){return _c('p',[_c('strong',[_v("The location of the favicon.")]),_v(" with(this){return _c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" If the favicon was recently changed, you may need to force-refresh the Browser to see the new image.")])])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"titleprefix"}},[_c('span',{staticClass:"anchor",attrs:{"id":"titleprefix"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titlePrefix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titleprefix","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"titleprefix"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titlePrefix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titleprefix","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("The prefix for all page titles.")]),_v(" The separator "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" will be inserted by MarkBind.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"titlesuffix"}},[_c('span',{staticClass:"anchor",attrs:{"id":"titlesuffix"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titleSuffix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titlesuffix","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"titlesuffix"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("titleSuffix")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#titlesuffix","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("The suffix for all page titles.")]),_v(" The separator "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" will be inserted by MarkBind.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"style"}},[_c('span',{staticClass:"anchor",attrs:{"id":"style"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("style")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#style","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"style"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("style")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#style","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('em',[_v("(Optional)")]),_v(" "),_c('strong',[_v("The styling options to be applied to the site.")]),_v(" This includes:")])} @@ -50,7 +50,7 @@ with(this){return _c('p',[_c('em',[_v("(Optional)")]),_v(" "),_c('strong',[_v("T with(this){return _c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootstrapTheme")])]),_v(" "),_c('em',[_v("(Optional)")]),_v(" The theme for the generated site."),_c('br'),_v("\nUses the default Bootstrap theme if not specified. See "),_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("User Guide: Themes")]),_v(" for more details.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeTheme")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v("]"),_c('br'),_v("\nThe theme used for fenced code blocks. Accepts either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"light\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"dark\"")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeLineNumbers")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")]),_v("]"),_c('br'),_v("\nThe global setting to display or hide line numbers for code blocks. Accepts either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")]),_v(".")])])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"pages"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pages"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pages","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"pages"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pages","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("An array of pages to be rendered.")])])} @@ -59,7 +59,7 @@ with(this){return _c('p',[_c('strong',[_v("An array of pages to be rendered.")]) with(this){return _c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src/glob")])]),_v(" "),_c('ul',[_c('li',{staticClass:"my-1"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" can be used to specify a single file, or an array of files."),_c('br'),_v(" "),_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/index.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ 'docs/index.md', 'docs/userGuide.md' ]")])]),_v(" "),_c('li',{staticClass:"my-2"},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(" can be used alternatively to define a file pattern in the "),_c('a',{attrs:{"href":"https://en.wikipedia.org/wiki/Glob_(programming)"}},[_c('em',[_v("glob syntax")])]),_v(", or an array of such file patterns."),_c('br'),_v(" "),_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px"}},[_v("Examples")])]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("**/*.md")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[ '**/*.md', '**/index.md' ]")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")])]),_v(": An array of file patterns to be excluded from rendering when using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("glob")]),_v(", also defined in the glob syntax.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")])]),_v(": The page "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" for the generated web page. Titles specified here take priority over titles specified in the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#front-matter"}},[_v("frontmatter")]),_v(" of individual pages.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")])]),_v(": The "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-layouts"}},[_v("layout")]),_v(" to be used by the page. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(".")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchable")])]),_v(": Specifies that the page(s) should be excluded from searching. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("yes")]),_v(".")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_v(": An array of external scripts to be referenced on the page. Scripts referenced will be run before the layout script.")]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("frontmatter")])]),_v(": Specifies properties to add to the frontmatter of a page or glob of pages. Overrides any existing properties if they have the same name, and overrides any frontmatter properties specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")]),_v(".")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"pagesexclude"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pagesexclude"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pagesexclude","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"pagesexclude"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pagesExclude")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pagesexclude","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("An array of file patterns to be excluded from rendering.")]),_v(" The exclusion pattern follows the glob syntax.")])} @@ -68,19 +68,19 @@ with(this){return _c('p',[_c('strong',[_v("An array of file patterns to be exclu with(this){return _c('p',[_v("This property is the global variant to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globExclude")]),_v(" property and is functionally identical to it. If the two are used at once, the file patterns from both properties will be combined when excluding pages.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"externalscripts"}},[_c('span',{staticClass:"anchor",attrs:{"id":"externalscripts"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#externalscripts","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"externalscripts"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#externalscripts","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("An array of external scripts to be referenced on all pages.")]),_v(" To reference an external script only on specific pages, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("externalScripts")]),_v(" should be specified in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pages")]),_v(" instead. Scripts referenced will be run before the layout script.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"globaloverride"}},[_c('span',{staticClass:"anchor",attrs:{"id":"globaloverride"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#globaloverride","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"globaloverride"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("globalOverride")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#globaloverride","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Globally overrides properties in the frontmatter of all pages.")]),_v(" Any property included in the global override will automatically be merged with the frontmatter of every single page, and override them if the property exists.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"ignore"}},[_c('span',{staticClass:"anchor",attrs:{"id":"ignore"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#ignore","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"ignore"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#ignore","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("An array of file patterns to be ignored when copying files to the generated site.")]),_v(" By default, MarkBind will copy all the files as assets of the generated site.")])} @@ -89,10 +89,10 @@ with(this){return _c('p',[_c('strong',[_v("An array of file patterns to be ignor with(this){return _c('p',[_v("The ignore pattern follows the "),_c('a',{attrs:{"href":"https://git-scm.com/docs/gitignore#_pattern_format"}},[_v("glob pattern used in .gitignore")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*.md")]),_v(" ignores all markdown source files.")])} },function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"site-json-deploy"}},[_c('h4',{attrs:{"id":"deploy"}},[_c('span',{staticClass:"anchor",attrs:{"id":"deploy"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The settings for "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("auto-deployment to GitHub pages")]),_v(".")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Site Update.\"")]),_v("]"),_c('br'),_v("\nThe commit message used for the deployment commit.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")])]),_v(" [Optional. Default: the current working project's repo]"),_c('br'),_v("\nThe repo you want to deploy to."),_c('br'),_v("\nFormat: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com/<org|username>/<repo>.git\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"git@github.com:<org|username>/<repo>.git\"")]),_v(" if you use SSH)"),_c('br'),_v(" "),_c('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("\"https://github.com/myorg/myrepo.git\"")])])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("branch")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"gh-pages\"")]),_v("]"),_c('br'),_v("\nThe branch that will be deployed to in the remote repo.")])])])])} +with(this){return _c('div',{attrs:{"id":"site-json-deploy"}},[_c('h4',{attrs:{"id":"deploy"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("deploy")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#deploy","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("The settings for "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("auto-deployment to GitHub pages")]),_v(".")])]),_v(" "),_c('ul',[_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"Site Update.\"")]),_v("]"),_c('br'),_v("\nThe commit message used for the deployment commit.")])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("repo")])]),_v(" [Optional. Default: the current working project's repo]"),_c('br'),_v("\nThe repo you want to deploy to."),_c('br'),_v("\nFormat: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"https://github.com/<org|username>/<repo>.git\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"git@github.com:<org|username>/<repo>.git\"")]),_v(" if you use SSH)"),_c('br'),_v(" "),_c('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("\"https://github.com/myorg/myrepo.git\"")])])]),_v(" "),_c('li',[_c('p',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("branch")])]),_v(" [Optional. Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"gh-pages\"")]),_v("]"),_c('br'),_v("\nThe branch that will be deployed to in the remote repo.")])])])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"plugins-pluginscontext"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugins-pluginscontext"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plugins")])]),_v(", "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugins-pluginscontext","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"plugins-pluginscontext"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plugins")])]),_v(", "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugins-pluginscontext","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("A list of plugins to load.")]),_v(" Plugins are user-defined extensions that can add custom features to MarkBind. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(" contains settings to be applied to the loaded plugins. See "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("User Guide: Using Plugins")]),_v(" for more details.")])} @@ -101,48 +101,48 @@ with(this){return _c('p',[_c('strong',[_v("A list of plugins to load.")]),_v(" P with(this){return _c('p',[_v("The example above uses tags as an example of configuring plugin settings, refer to the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#filtertags-toggling-alternative-contents-in-a-page"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin")]),_v(" for more details.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"headingindexinglevel"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headingindexinglevel"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headingindexinglevel","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"headingindexinglevel"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("headingIndexingLevel")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headingindexinglevel","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("The level of headings to be indexed for searching.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(" "),_c('span',{staticClass:"dimmed"},[_v("i.e., only headings of levels 1,2,3 will be indexed for searching")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"enablesearch"}},[_c('span',{staticClass:"anchor",attrs:{"id":"enablesearch"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#enablesearch","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"enablesearch"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#enablesearch","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Specifies that the website should use MarkBind's search functionality.")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(". See "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(" for more details.")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"timezone"}},[_c('span',{staticClass:"anchor",attrs:{"id":"timezone"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timeZone")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#timezone","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"timezone"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("timeZone")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#timezone","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Time zone of the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"UTC\"")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"locale"}},[_c('span',{staticClass:"anchor",attrs:{"id":"locale"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("locale")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#locale","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"locale"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("locale")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#locale","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Language by locale used for the "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#built-in-global-variables"}},[_v("time stamp")]),_v(".")]),_v(" Default: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"en-GB\"")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("English (United Kingdom)")]),_v("). "),_c('br'),_v("\nThe date format is thus: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<Day>, <Date> <Month> <Year>, <24-hour Time> <Time Zone Code>")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"intrasitelinkvalidation"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intrasitelinkvalidation"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intrasiteLinkValidation")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intrasitelinkvalidation","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"intrasitelinkvalidation"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("intrasiteLinkValidation")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intrasitelinkvalidation","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Toggle whether to validate intra-site links.")]),_v(" By default, MarkBind will validate all intra-site links and alert you of any potentially invalid ones.\nTo disable this validation "),_c('strong',[_v("entirely")]),_v(", you may add the following to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(":")])} },function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"disable-global-intrasite-link-validation"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"intrasiteLinkValidation\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"enabled\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-literal"}},[_v("false")]),_v("\n")]),_c('span',[_v("},\n")]),_c('span',[_v("...\n")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"plantumlcheck"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plantumlcheck"}}),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plantumlCheck")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plantumlcheck","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"plantumlcheck"}},[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plantumlCheck")])]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plantumlcheck","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Toggle whether to display a warning about PlantUML's prerequisite.")]),_v(" By default, MarkBind will check if you have Graphviz installed when you are using PlantUML diagrams.\nTo disable this validation and the display of the warning, you may add the following to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(":")])} },function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"plantuml-check"}},[_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")])])])])} +with(this){return _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")])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/syntaxCheatSheet.html b/userGuide/syntaxCheatSheet.html index ad35e68..d18c5b7 100644 --- a/userGuide/syntaxCheatSheet.html +++ b/userGuide/syntaxCheatSheet.html @@ -3,10 +3,8 @@ <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="generator" content="MarkBind 4.1.0"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>MarkBind - User Guide: Syntax Cheat Sheet - + + MarkBind - User Guide: Syntax Cheat Sheet @@ -14,8 +12,7 @@ - - + @@ -23,254 +20,1038 @@ const baseUrl = '' -

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

                                        +note.

                                        + diff --git a/userGuide/syntaxCheatSheet.page-vue-render.js b/userGuide/syntaxCheatSheet.page-vue-render.js index c44da68..b6c8469 100644 --- a/userGuide/syntaxCheatSheet.page-vue-render.js +++ b/userGuide/syntaxCheatSheet.page-vue-render.js @@ -1,22 +1,22 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"annotations"}},[_c('span',{staticClass:"anchor",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("\"33%\"")]),_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 33% 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("\"66%\"")]),_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 66% 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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('annotate',{attrs:{"src":"../../images/annotateSampleImage.png","width":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"25%","y":"25%","content":"This point is 25% from the left and 25% from the top"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"This point is 50% from the left and 25% from the top","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"This point is 75% from the left and 25% from the top","header":"This has a header"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"This point is 33% from the left and 50% from the top","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"This point is 66% from the left and 50% from the top","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"This point is 25% from the left and 75% from the top","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"This point is 50% from the left and 75% from the top","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"This point is 75% from the left and 75% from the top","fontSize":"30","label":"3"}})],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")])])])]),_v(" "),_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%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Popover on the left","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Popover on the right","placement":"right"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom","trigger":"hover focus"}})],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")])])])]),_v(" "),_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%","content":"There is only text when you click me","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Clicking on this does nothing","label":"2","legend":"bottom","header":"Headers are displayed as well"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"There is text at both locations","label":"3","legend":"both","header":"Headers are displayed at both positions"}})],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("\"https://markbind.org/userGuide/diagrams/object.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")])])])]),_v(" "),_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":"https://markbind.org/userGuide/diagrams/object.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"6%","y":"50%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"Class inheritance","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"Aggregation","color":"blue","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow","legend":"both"}})],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("\"https://markbind.org/userGuide/diagrams/sequence.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")])])])]),_v(" "),_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":"https://markbind.org/userGuide/diagrams/sequence.png","height":"500","alt":"Sample Image"}},[_c('a-point',{attrs:{"x":"35%","y":"18.5%","content":"Operation is invoked","header":"Operation","opacity":"0.2","size":"30"}}),_v(" "),_c('a-point',{attrs:{"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"}}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","content":"Return control and possibly some return value","header":"Return Value","opacity":"0.2","size":"30","color":"blue"}})],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.")])]),_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.")])]),_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(".")])]),_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("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_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")])])])]),_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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],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('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"classes-attributes-and-amp-identifiers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"classes-attributes-and-amp-identifiers"}}),_v("Classes, Attributes & Identifiers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#classes-attributes-and-amp-identifiers","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Most markdown syntax above this section supports adding classes, attributes and identifiers\nusing "),_c('a',{attrs:{"href":"https://pandoc.org/MANUAL.html"}},[_v("pandoc")]),_v(" syntax without the need for a wrapper HTML element.")]),_v(" "),_c('p',[_v("The syntax is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{.class-name attribute=\"value\" attribute=value #id}")]),_v(", which is placed at different locations depending\non the type of markdown.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\n")]),_c('span',[_v("by leaving a space before '{' {.text-success #attribute-example}\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("#### heading {.text-info}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("Apply the same to inline markdown (eg. bold text) by\n")]),_c('span',[_v("omitting the "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**space**")]),_v("{.text-primary .bg-light header=\"attributes example\"}\n")]),_c('span',[_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',{staticClass:"text-success",attrs:{"id":"attribute-example"}},[_v("Apply classes, attributes, identifiers to block level markdown (eg. paragraphs, headings)\nby leaving a space before '{'")]),_v(" "),_c('h4',{staticClass:"text-info",attrs:{"id":"heading"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading"}}),_v("heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading","onclick":"event.stopPropagation()"}})]),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('p',[_v("Apply the same to inline markdown (eg. bold text) by\nomitting the "),_c('strong',{staticClass:"text-primary bg-light",attrs:{"header":"attributes example"}},[_v("space")])])])],1)]),_v(" "),_c('p',{staticClass:"mb-4"},[_v("Some other types of markdown have "),_c('strong',[_v("different placements")]),_v(" of the curly group "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{...}")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered and Ordered lists")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Apply to the list item itself like so {.text-success #list-item-id}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Curly groups after newlines apply to the closest nested list {.text-danger}\n")]),_c('span',[_v("{.bg-light}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Curly groups two lines after the last line apply to the top most list\n")]),_c('span',[_v("\n")]),_c('span',[_v("{.alert-info}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',{staticClass:"alert-info"},[_c('li',{staticClass:"text-success",attrs:{"id":"list-item-id"}},[_v("Apply to the list item itself like so\n"),_c('ul',{staticClass:"bg-light"},[_c('li',{staticClass:"text-danger"},[_v("Curly groups after newlines apply to the closest nested list")])])]),_v(" "),_c('li',[_v("Curly groups two lines after the last line apply to the top most list")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Fenced code blocks")])])]),_v(" "),_c('p',[_v("Refer to the above "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#line-numbering"}},[_v("section")]),_v("!")]),_v(" "),_c('p',[_c('small',[_v("For a more detailed guide, see: "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/markdown-it-attrs"}},[_v("https://www.npmjs.com/package/markdown-it-attrs")])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nFormatting features listed above this section support this syntax for attributes, classes and identifiers.\nThose below this section do not.\n")]),_v(" "),_c('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('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('div',[_v("\n* Apply to the list item itself like so {.text-success #list-item-id}\n * Curly groups after newlines apply to the closest nested list {.text-danger}\n{.bg-light}\n* Curly groups two lines after the last line apply to the top most list\n\n{.alert-info}\n")])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Badges")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"badge 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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"badges"}},[_c('span',{staticClass:"anchor",attrs:{"id":"badges"}}),_v("Badges"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#badges","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_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',[_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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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")])])])]),_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"}},[_c('span',{staticClass:"anchor",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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"blockquotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"blockquotes"}}),_v("Blockquotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#blockquotes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("Normal text\n")]),_c('span',[_v("> Blockquote, first paragraph\n")]),_c('span',[_v(">\n")]),_c('span',[_v("> Second paragraph\n")]),_c('span',[_v(">> Nested quoteblock\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_c('p',[_v("Blockquote, first paragraph")]),_v(" "),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_c('p',[_v("Nested quoteblock")])])])])],1)]),_v(" "),_c('p',[_v("Alternatively, you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("
                                        ")]),_v(" tags:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Normal text\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Blockquote, first paragraph\n")]),_c('span',[_v("\n")]),_c('span',[_v("Second paragraph\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_v(">")])]),_v("\n")]),_c('span',[_v("Nested blockquote\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Normal text")]),_v(" "),_c('blockquote',[_v("\nBlockquote, first paragraph\n"),_c('p',[_v("Second paragraph")]),_v(" "),_c('blockquote',[_v("\nNested blockquote\n")])])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#blockquotes-1"}},[_v("https://www.markdownguide.org/basic-syntax#blockquotes-1")])])]),_v(" "),_c('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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"boxes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"boxes"}}),_v("Boxes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#boxes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Boxes come with different built-in types.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" important\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#### Header :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"You can use **markdown** here! :pizza:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header"}}),_v("Header 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v(" "),_c('p',[_v("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.")]),_v(" "),_c('box',{attrs:{"type":"warning","dismissible":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("You can use "),_c('strong',[_v("markdown")]),_v(" here! 🍕")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("The built in types can be colored.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")]),_c('span',[_v(" default\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" primary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" secondary\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" danger\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" info\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("theme")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" dark\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a light color scheme for boxes")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" default light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" info light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" success light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" important light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition light with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"light":""}},[_v("\n default light\n")]),_v(" "),_c('box',{attrs:{"type":"info","light":""}},[_v("\n info light\n")]),_v(" "),_c('box',{attrs:{"type":"warning","light":""}},[_v("\n warning light\n")]),_v(" "),_c('box',{attrs:{"type":"success","light":""}},[_v("\n success light\n")]),_v(" "),_c('box',{attrs:{"type":"important","light":""}},[_v("\n important light\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","light":""}},[_v("\n wrong light\n")]),_v(" "),_c('box',{attrs:{"type":"tip","light":""}},[_v("\n tip light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""}},[_v("\n definition light\n")]),_v(" "),_c('box',{attrs:{"type":"definition","light":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n definition light with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a seamless style of boxes")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("As "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(" are mutually exclusive styles, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" takes priority over "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("seamless")]),_v(".")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" default seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" info seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" warning seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"important\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" important seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"wrong\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" wrong seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" tip seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_v(" dismissible definition seamless\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"##### Header markdown :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("seamless")]),_v(">")]),_v("\n")]),_c('span',[_v(" success seamless with header markdown\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"seamless":""}},[_v("\n default seamless\n")]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_v("\n info seamless\n")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\n warning seamless\n")]),_v(" "),_c('box',{attrs:{"type":"success","seamless":""}},[_v("\n success seamless\n")]),_v(" "),_c('box',{attrs:{"type":"important","seamless":""}},[_v("\n important seamless\n")]),_v(" "),_c('box',{attrs:{"type":"wrong","seamless":""}},[_v("\n wrong seamless\n")]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\n tip seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":"","dismissible":""}},[_v("\n dismissible definition seamless\n")]),_v(" "),_c('box',{attrs:{"type":"definition","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('h5',{attrs:{"id":"header-markdown-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-markdown-2"}}),_v("Header markdown 🚀"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-markdown-2","onclick":"event.stopPropagation()"}})])]},proxy:true}])},[_v("\n success seamless with header markdown\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can further customize the Box's appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#ffca6a\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"grey\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border-left-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#8b5a01\"")]),_v(">")]),_v("\n")]),_c('span',[_v("default type, styled as an orange box with a brown left border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":rocket:\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("info, with a custom markdown rocket icon and `red` colored text.\n")]),_c('span',[_v("\n")]),_c('span',[_v("You can use any inline markdown in the `icon` property.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"background-color":"#ffca6a","border-color":"grey","border-left-color":"#8b5a01"}},[_v("\ndefault type, styled as an orange box with a brown left border\n")]),_v(" "),_c('box',{attrs:{"type":"info","color":"red"},scopedSlots:_u([{key:"icon",fn:function(){return [_v("🚀")]},proxy:true}])},[_v(" "),_c('p',[_v("info, with a custom markdown rocket icon and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("red")]),_v(" colored text.")]),_v(" "),_c('p',[_v("You can use any inline markdown in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" property.")])])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("You can remove the background, icon and borders of preset styles.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-icon")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-background")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" success box without a tick icon and backgound\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("no-border")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("light")]),_v(">")]),_v("\n")]),_c('span',[_v(" definition type box, light style without border\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"no-icon":"","no-background":"","type":"success"}},[_v("\n success box without a tick icon and backgound\n")]),_v(" "),_c('box',{attrs:{"no-border":"","type":"definition","light":""}},[_v("\n definition type box, light style without border\n")])],1)],1)]),_v(" "),_c('box',{attrs:{"type":"info","seamless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Note")])]},proxy:true}])},[_v(" "),_c('p',[_v("Custom styles "),_c('strong',[_v("(")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("background-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("icon")]),_v(" "),_c('strong',[_v(")")]),_v(" as introduced in the previous section, takes precedence over the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-background")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-border")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-icon")]),_v(" attributes.")])]),_v(" "),_c('p',[_c('strong',[_v("You can also use icons, resize them and change their color accordingly.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"2x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"definition\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-camera:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"red\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("icon-size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3x\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',{attrs:{"type":"success"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit\n")]),_v(" "),_c('box',{attrs:{"type":"warning","icon-size":"2x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n")]),_v(" "),_c('box',{attrs:{"type":"definition","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")]),_v(" "),_c('box',{attrs:{"type":"info","icon-color":"red","icon-size":"3x"},scopedSlots:_u([{key:"icon",fn:function(){return [_c('span',{staticClass:"fas fa-camera",attrs:{"aria-hidden":"true"}})]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("background-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',[_v("border-left-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Overrides border-color for the left border.")])]),_v(" "),_c('tr',[_c('td',[_v("color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the text.")])]),_v(" "),_c('tr',[_c('td',[_v("dismissible")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Adds a button to close the box to the top right corner.")])]),_v(" "),_c('tr',[_c('td',[_v("icon"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Inline MarkDown text of the icon displayed on the left.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Resizes the icon. Supports integer-scaling of the icon dimensions e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3x")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4x")]),_v(", etc.")])]),_v(" "),_c('tr',[_c('td',[_v("icon-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Color of the icon.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Markdown text of the box header.")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("important")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("wrong")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("definition")]),_v(", or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("theme")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("secondary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tip")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(" or empty for default.")])]),_v(" "),_c('tr',[_c('td',[_v("light")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a light color scheme for the box.")])]),_v(" "),_c('tr',[_c('td',[_v("seamless")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Uses a seamless style for the box. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(" is specified, this style will not be activated.")])]),_v(" "),_c('tr',[_c('td',[_v("no-border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Removes border, except if styled by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-color")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("border-left-color")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("no-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")])])])]),_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("Code")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("```xml\n")]),_c('span',[_v("\n")]),_c('span',[_v(" goo\n")]),_c('span',[_v("\n")]),_c('span',[_v("```\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"code"}}),_v("Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h4',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can present formatted code blocks, be it fenced or inline, with either "),_c('strong',[_v("light")]),_v(" or "),_c('strong',[_v("dark")]),_v(" themes. The default is dark "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"fenced-code"}}),_v("Fenced Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#fenced-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind provides several features, some of which are added on top of the existing functionality of Markdown's "),_c('em',[_v("fenced code blocks")]),_v(".")]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#fenced-code-blocks"}},[_v("https://www.markdownguide.org/extended-syntax#fenced-code-blocks")])])]),_v(" "),_c('p',[_v("Features:")]),_v(" "),_c('ul',[_c('li',[_v("Syntax coloring")]),_v(" "),_c('li',[_v("Line numbering")]),_v(" "),_c('li',[_v("Line highlighting")]),_v(" "),_c('li',[_v("Code block headers")])]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To enable syntax coloring, specify a language next to the backticks before the fenced code block.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)])]),_v(" "),_c('h5',{attrs:{"id":"line-numbering"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-numbering"}}),_v("Line numbering"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-numbering","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Line numbers are "),_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('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")])])])]),_v(" "),_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")])])])])],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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"no-line-numbers hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])],1)]),_v(" "),_c('p',[_v("You can have your line numbers start with a value other than "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1")]),_v(" with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(" attribute.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```js {start-from=6}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("function add(a, b) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return a + b;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"style":"counter-reset: line 5;","class":"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")])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"line-highlighting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-highlighting"}}),_v("Line highlighting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-highlighting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" attribute to add highlighting to your code block. Refer to the example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List items;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public int getItemCount(){")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.size();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public bool isEmpty() {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.isEmpty();")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public Item getItem(idx: int) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.get(idx);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void addItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.add(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" public void removeItem(item: Item) {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" return items.remove(item);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")]),_c('span',[_v("\n")])])])])],1)]),_v(" "),_c('p',[_v("The value of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("highlight-lines")]),_v(" is composed of "),_c('em',[_v("highlight rules")]),_v(", separated by commas.\nThese rules dictate where and how MarkBind should highlight your code block.")]),_v(" "),_c('p',[_v("You can specify the highlight rules in many different ways, each is detailed as follows:")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Full text highlight")]),_c('br'),_v("Highlights the entirety of the text portion of the line")]),_v(" "),_c('td',[_v("The line numbers as-is (subject to the starting line number set in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start-from")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Substring highlight")]),_c('br'),_v("Highlights "),_c('em',[_v("all")]),_v(" occurrences of a substring in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[part]")]),_c('br'),_c('br'),_c('em',[_v("Limitations")]),_v(": "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" must be wrapped in quotes. If "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("part")]),_v(" contains a quote, escape it with a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(").")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3['Inventory']")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4['It\\'s designed']")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Character-bounded highlight")]),_c('br'),_v("Highlights a specific range of characters in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start:end]")]),_v(", highlights from character position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Character positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first non-whitespace character, upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("19[1:5]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("30[10:]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("35[:20]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Word-bounded highlight")]),_c('br'),_v("Highlights a specific range of words in the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[start::end]")]),_v(", highlights from word position "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v(" up to (but not including) "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v("."),_c('br'),_c('br'),_v("Word positions start from "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")]),_v(" as the first word (sequence of non-whitespace characters), upwards."),_c('br'),_c('br'),_v("Omit either "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("start")]),_v("/"),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("end")]),_v(" to highlight from the start / up to the end, respectively.")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("5[2::4]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("9[1::]")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("11[::5]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Full line highlight")]),_c('br'),_v("Highlights the entirety of the line")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineNumber[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("7[:]")])])])])])]),_c('p',[_v("Not only a single line, MarkBind is also capable of highlighting ranges of lines in various ways. In general, the syntax\nfor range highlighting consists of two single line highlight rules as listed above joined by a dash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Format")]),_v(" "),_c('th',[_v("Example")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('strong',[_v("Ranged full text highlight")]),_c('br'),_v("Highlights from the first non-whitespace character to the last non-whitespace character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2-4")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged full line highlight")]),_c('br'),_v("Like ranged full text highlight, but highlights the entirety of the lines")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("1[:]-5")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("10-12[:]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged character-bounded highlight")]),_c('br'),_v("Highlights the text portion of the lines within the range, but starts/ends at an arbitrary character")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start:]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[:end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("3[2:]-7")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("4-9[:17]")])])]),_v(" "),_c('tr',[_c('td',[_c('strong',[_v("Ranged word-bounded highlight")]),_c('br'),_v("Like ranged character-bounded highlight, but starts/ends at an arbitrary word")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart[start::]-lineEnd")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("lineStart-lineEnd[::end]")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("16[1::]-20")]),_v(","),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("22-24[::3]")])])])])])]),_c('h5',{attrs:{"id":"heading-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-2"}}),_v("Heading"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("To add a heading, add the attribute "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("heading")]),_v(" with the heading text as the value, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('p',[_v("Headings support inline Markdown, except for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Inline Code")]),_v(" and "),_c('span',{staticClass:"dimmed"},[_v("Dim")]),_v(" text styles.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```{heading=\"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
                                        We support page breaks\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading inline-markdown-heading"},[_c('span',[_c('strong',[_v("Bold")]),_v(", "),_c('em',[_v("Italic")]),_v(", "),_c('em',[_c('strong',[_v("Bold and Italic")])]),_v(", "),_c('s',[_v("Strike through")]),_v(", "),_c('strong',[_c('strong',[_v("Super Bold")])]),_v(", "),_c('span',{staticClass:"underline"},[_v("Underline")]),_v(", "),_c('mark',[_v("Highlight")]),_v(", 👍 ❗️ ❌ 🚧"),_c('br'),_v("We support page breaks")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"**Bold**, _Italic_, ___Bold and Italic___, ~~Strike through~~, ****Super Bold****, !!Underline!!, ==Highlight==, :+1: :exclamation: :x: :construction:
                                        We support page breaks","class":"hljs"}},[_c('span',[_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"using-multiple-features"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-multiple-features"}}),_v("Using multiple features"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-multiple-features","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also use multiple features together, as shown below.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```xml {highlight-lines=\"2\" heading=\"Heading title\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" goo")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Heading title")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Heading title","class":"hljs xml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("foo")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])])])],1)]),_v(" "),_c('h5',{attrs:{"id":"copy-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"copy-button"}}),_v("Copy button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#copy-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("copy")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockcopybuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h5',{attrs:{"id":"wrap-text-button"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text-button"}}),_v("Wrap text button"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text-button","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("A "),_c('em',[_v("wrap text")]),_v(" button can be added to code blocks using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" plugin:")]),_v(" "),_c('panel',{attrs:{"type":"seamless","popup-url":"usingPlugins.html#plugin-codeblockwrapbuttons"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("User Guide: Using Plugins → Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")])])])]},proxy:true}])},[_v(" "),_c('div',[_c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")]),_v(" "),_c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")]),_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1)]),_v(" "),_c('br'),_v(" "),_c('h4',{attrs:{"id":"inline-code"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inline-code"}}),_v("Inline Code"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inline-code","onclick":"event.stopPropagation()"}})]),_v(" "),_c('h5',{attrs:{"id":"syntax-coloring-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-coloring-2"}}),_v("Syntax coloring"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-coloring-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind can apply syntax-coloring on inline code too.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("Consider the XML code `goo`{.xml},
                                        \n")]),_c('span',[_v("or the java code `public static void main(String[] args)`{.java}.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Consider the XML code "),_c('code',{pre:true,attrs:{"class":"hljs inline xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("goo"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v(","),_c('br'),_v("\nor the java code "),_c('code',{pre:true,attrs:{"class":"hljs inline java"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("static")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("main")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(String[] args)")])])]),_v(".")])])],1)]),_v(" "),_c('h5',{attrs:{"id":"displaying-content-within-curly-braces-content"}},[_c('span',{staticClass:"anchor",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:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("```xml\n")]),_c('span',[_v("\n")]),_c('span',[_v(" goo\n")]),_c('span',[_v("\n")]),_c('span',[_v("```\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("`goo`{.xml}\n")])])])]),_v(" "),_c('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('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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dates"}}),_v("Dates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dates","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("MarkBind supports date formatting and simple calculations")]),_v(" as a Nunjucks "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#filters"}},[_v("filter")]),_v(".")]),_v(" "),_c('p',[_c('strong',[_v("Syntax:")]),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ baseDate | date(format, daysToAdd) }}")])]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('p',[_v("20 days after 1st Jan 2020:")]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ \"2020-01-01\" | date(\"ddd, Do MMM, YYYY\", 20) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Tue, 21st Jan, 2020")])]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("The baseDate follows the format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("YYYY-MM-DD")])]),_v(" "),_c('p',[_v("The default output format is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")])]),_v(" "),_c('h3',{attrs:{"id":"using-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-variables"}}),_v("Using variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("% set base1 = \"2020-01-01\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format1 = \"DD MM YYYY\" %}")]),_v(" "),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("% set format2 = \"ddd Do MMM (DD/MM/YYYY)\" %}")])]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1 Jan"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"custom-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"custom-formatting"}}),_v("Custom formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#custom-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format1) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" 01 01 2020"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"adding-days"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-days"}}),_v("Adding days"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-days","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 0) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Wed 1st Jan (01/01/2020)"),_c('br'),_v(" "),_c('code',{pre:true},[_v("{"),_c('a'),_v("{ base1 | date(format2, 10) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Sat 11th Jan (11/01/2020)"),_c('br')]),_v(" "),_c('h4',{attrs:{"id":"page-variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-variables"}}),_v("Page variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Dates can be supplied using "),_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_v("page variables")]),_v(" for convenience.")]),_v(" "),_c('p',[_v("Inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("variables.md")]),_v(" or referencing page:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% set date_pagevar = \"2020-03-06\" %}\n")])])]),_c('p',[_c('code',{pre:true},[_v("{"),_c('a'),_v("{ date_pagevar | date(format2) }}")]),_v(" "),_c('span',{staticClass:"glyphicon glyphicon-arrow-right",attrs:{"aria-hidden":"true"}}),_v(" Fri 6th Mar (06/03/2020) "),_c('br')]),_v(" "),_c('h3',{attrs:{"id":"advanced-formatting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-formatting"}}),_v("Advanced Formatting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-formatting","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The output date can be formatted to suit your needs by specifying a format string as an argument to the date filter.")]),_v(" "),_c('p',[_v("Default format: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"ddd D MMM\"")]),_v(" e.g. Fri 6 Mar")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("Brief reference")])])]},proxy:true}])},[_v(" "),_c('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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"diagrams"}},[_c('span',{staticClass:"anchor",attrs:{"id":"diagrams"}}),_v("Diagrams"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#diagrams","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use the "),_c('a',{attrs:{"href":"http://plantuml.com/"}},[_v("PlantUML")]),_v(" syntax to add diagrams.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_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 later (required - to run the PlantUML JAR executable)")]),_v(" "),_c('li',[_c('a',{attrs:{"href":"https://www.graphviz.org/download/"}},[_v("Graphviz")]),_v(" v2.38 or later (optional - you don't need this if you 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 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('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")])])])])]),_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('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")])])])]),_v(" "),_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('p',[_v("Alternatively, a PlantUML diagram can be specified in a separate "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file and inserted into a page using a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("diagrams/sequence.puml")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("@startuml\n")]),_c('span',[_v("alice -> bob ++ : hello\n")]),_c('span',[_v("bob -> bob ++ : self call\n")]),_c('span',[_v("bob -> bib ++ #005500 : hello\n")]),_c('span',[_v("bob -> george ** : create\n")]),_c('span',[_v("return done\n")]),_c('span',[_v("return rc\n")]),_c('span',[_v("bob -> george !! : delete\n")]),_c('span',[_v("return success\n")]),_c('span',[_v("@enduml\n")])])]),_c('p',[_v("in another file:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("puml")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"diagrams/sequence.puml\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("300")]),_v(" />")]),_v("\n")])])])]),_v(" "),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])]),_c('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")])])])]),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Dropdowns")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Action\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")])]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"dropdowns"}},[_c('span',{staticClass:"anchor",attrs:{"id":"dropdowns"}}),_v("Dropdowns"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#dropdowns","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("While the main use case for dropdowns is under navbars, they can also be used as top-level components.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Action*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"before\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-info\"")]),_v(">")]),_v("Segmented"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Right aligned list\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn-group d-flex mt-3\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"group\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-danger w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Left"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("button")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-warning dropdown-toggle w-100\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Action\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"caret\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("ul")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-menu\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another action"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Something else here"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"separator\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-divider\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Separated link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"btn btn-success w-100\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("role")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"button\"")]),_v(">")]),_v("Right"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Action")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])]),_v(" "),_c('dropdown',{attrs:{"type":"info"},scopedSlots:_u([{key:"before",fn:function(){return [_c('button',{staticClass:"btn btn-info",attrs:{"type":"button"}},[_v("Segmented")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("...")])])]),_v(" "),_c('dropdown',{attrs:{"type":"primary","menu-align-right":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Right aligned list")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])])]),_v(" "),_c('div',{staticClass:"btn-group d-flex mt-3",attrs:{"role":"group"}},[_c('a',{staticClass:"btn btn-danger w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Left")]),_v(" "),_c('dropdown',{staticClass:"w-100",scopedSlots:_u([{key:"button",fn:function(){return [_c('button',{staticClass:"btn btn-warning dropdown-toggle w-100",attrs:{"type":"button"}},[_v("\n Action\n "),_c('span',{staticClass:"caret"})])]},proxy:true},{key:"dropdown-menu",fn:function(){return [_c('ul',{staticClass:"dropdown-menu"},[_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another action")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Something else here")])]),_v(" "),_c('li',{staticClass:"dropdown-divider",attrs:{"role":"separator"}}),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Separated link")])])])]},proxy:true}])}),_v(" "),_c('a',{staticClass:"btn btn-success w-100",attrs:{"href":"#dropdown","role":"button"}},[_v("Right")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Dropdowns can also be nested within each other to create multi-level submenus.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Multi-Level Dropdown*\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"*Submenu*\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Another item"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('dropdown',{attrs:{"type":"primary"},scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Multi-Level Dropdown")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])]),_v(" "),_c('dropdown',{scopedSlots:_u([{key:"header",fn:function(){return [_c('em',[_v("Submenu")])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Item")])]),_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#dropdown"}},[_v("Another item")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Dropdown can be opened.")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("header"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Dropdown button header text. (Supports inline MarkDown syntax)")])]),_v(" "),_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("danger")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("info")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("warning")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("success")]),_v(".")])])])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" You may refer to "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"embeds"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embeds"}}),_v("Embeds"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embeds","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("There are easy ways to embed media content such as YouTube videos and PowerPoint slides")]),_v(".")]),_v(" "),_c('h6',{attrs:{"id":"embedding-youtube-videos"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-youtube-videos"}}),_v("Embedding YouTube Videos"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-youtube-videos","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here are three ways of embedding YouTube videos and one example of how it will look in the page.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://www.youtube.com/watch?v=v40b3ExbM0c")]),_v(")\n")]),_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("youtube")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("http://youtu.be/v40b3ExbM0c")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed block-embed-service-youtube",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online"}}),_v("Embedding PowerPoint Slides (using the embed URL from PowerPoint online)"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#embedding-powerpoint-slides-using-the-embed-url-from-powerpoint-online","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Here is an example of embedding a PowerPoint slide deck:")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("@["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("powerpoint")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://onedrive.live.com/embed?cid=A5AF047C4CAD67AB&resid=A5AF047C4CAD67AB%212070&authkey=&em=2")]),_v(")\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"block-embed-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")])])])]),_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:\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"emoji"}},[_c('span',{staticClass:"anchor",attrs:{"id":"emoji"}}),_v("Emoji"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#emoji","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])])])]),_v(" "),_c('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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"footnotes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"footnotes"}}),_v("Footnotes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#footnotes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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")])])])]),_v(" "),_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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"frontmatter"}},[_c('span',{staticClass:"anchor",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(" To 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.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('div',{staticClass:"indented"},[_c('p',[_c('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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Should you need more expressive formatting, or encounter any issues when formatting the frontmatter, note that the frontmatter follows the "),_c('a',{attrs:{"href":"https://yaml.org/refcard.html"}},[_v("YAML")]),_v(" spec.")])]),_v(" "),_c('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('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('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")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Headings")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"headings"}},[_c('span',{staticClass:"anchor",attrs:{"id":"headings"}}),_v("Headings"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#headings","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can prepend the heading text with 1-6 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("#")]),_v(" characters to indicate headings of levels 1-6.")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("### Heading level 3")]),_v("\n")]),_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("###### Heading level 6")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('h3',{attrs:{"id":"heading-level-3"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6","onclick":"event.stopPropagation()"}})])])],1)])]),_v(" "),_c('p',[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('strong',[_v("MarkBind auto-generates anchors for all headings.")]),_c('br'),_v("\nIf the heading text is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Foo Bar (Goo)")]),_v(", the ID of the generated anchor will be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo-bar-goo")]),_v(" (all lower case, special characters omitted, joined by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(").")]),_v(" "),_c('p',[_c('small',[_v("Alternative syntax, more info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#headings"}},[_v("https://www.markdownguide.org/basic-syntax#headings")])])]),_v(" "),_c('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")])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('h3',{attrs:{"id":"heading-level-3-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-3-2"}}),_v("Heading level 3"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-3-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("...")]),_v(" "),_c('h6',{attrs:{"id":"heading-level-6-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"heading-level-6-2"}}),_v("Heading level 6"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#heading-level-6-2","onclick":"event.stopPropagation()"}})])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Horizontal Rules")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"horizontal-rules"}}),_v("Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#horizontal-rules","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use three or more asterisks ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("***")]),_v("), dashes ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("---")]),_v("), or underscores ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("___")]),_v(") to indicate a horizontal line.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("-----")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("____")]),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__")])])]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr'),_v(" "),_c('hr'),_v(" "),_c('hr')])],1)]),_v(" "),_c('h3',{attrs:{"id":"different-types-of-horizontal-rules"}},[_c('span',{staticClass:"anchor",attrs:{"id":"different-types-of-horizontal-rules"}}),_v("Different Types Of Horizontal Rules"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#different-types-of-horizontal-rules","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Add additional classes to modify the style, thickness, and color of a horizontal line.")]),_v(" "),_c('p',[_v("Available style classes:")]),_v(" "),_c('ul',[_c('li',[_v("dotted")]),_v(" "),_c('li',[_v("dashed")]),_v(" "),_c('li',[_v("double")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.dotted}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.dashed}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.double}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"dotted"}),_v(" "),_c('hr',{staticClass:"dashed"}),_v(" "),_c('hr',{staticClass:"double"})])],1)]),_v(" "),_c('p',[_v("Available size classes:")]),_v(" "),_c('ul',[_c('li',[_v("thick")]),_v(" "),_c('li',[_v("thick-1")]),_v(" "),_c('li',[_v("thick-2")]),_v(" "),_c('li',[_v("thick-3")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.thick}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-1}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-2}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.thick-3}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"thick"}),_v(" "),_c('hr',{staticClass:"thick-1"}),_v(" "),_c('hr',{staticClass:"thick-2"}),_v(" "),_c('hr',{staticClass:"thick-3"})])],1)]),_v(" "),_c('p',[_v("Available color classes (use any of the available Bootstrap border color classes):")]),_v(" "),_c('ul',[_c('li',[_v("border-info")]),_v(" "),_c('li',[_v("border-primary")]),_v(" "),_c('li',[_v("etc")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("--- {.border-primary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-secondary}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-danger}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-info}\n")]),_c('span',[_v("\n")]),_c('span',[_v("--- {.border-success}\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('hr',{staticClass:"border-primary"}),_v(" "),_c('hr',{staticClass:"border-secondary"}),_v(" "),_c('hr',{staticClass:"border-danger"}),_v(" "),_c('hr',{staticClass:"border-info"}),_v(" "),_c('hr',{staticClass:"border-success"})])],1)]),_v(" "),_c('p',[_v("Add a 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")])])])]),_v(" "),_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")])])])]),_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("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-home:")])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"icons"}}),_v("Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('small',[_c('span',{staticClass:"dimmed"},[_v("Acknowledgement: Font Awesome icons are provided by "),_c('a',{attrs:{"href":"https://fontawesome.com/"}},[_v("Font Awesome")]),_v(" under their "),_c('a',{attrs:{"href":"https://fontawesome.com/license"}},[_v("free license")]),_v(", Glyphicons are provided by "),_c('a',{attrs:{"href":"https://glyphicons.com/"}},[_v("Glyphicons")]),_v(" via "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/"}},[_v("Bootstrap 3")]),_v(", "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("Octicons")]),_v(" are copyright of GitHub, and Material icons are provided by "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("Google Fonts")]),_v(" via "),_c('a',{attrs:{"href":"https://www.npmjs.com/package/material-icons"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("material-icons")]),_v(" by Ravindra Marella")]),_v(" under the "),_c('a',{attrs:{"href":"https://www.apache.org/licenses/LICENSE-2.0.html"}},[_v("Apache license 2.0")]),_v(".")])])]),_v(" "),_c('p',[_v("MarkBind supports using Font Icons provided by Font Awesome, Glyphicons and GitHub's Octicons.")]),_v(" "),_c('div',[_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v("\nThe advantage of font icons over emojis is font icons can be "),_c('em',[_v("styled")]),_v(" to fit your needs. e.g.,")]),_v(" "),_c('ul',[_c('li',[_v("emoji: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the 📖 by its cover! 👎")])]),_v(" "),_c('li',[_v("font icons: "),_c('span',{staticStyle:{"color":"purple"}},[_v("Don't judge the "),_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}}),_v(" by its cover! "),_c('span',{staticClass:"fas fa-thumbs-down",attrs:{"aria-hidden":"true"}})])])])])],1),_v(" "),_c('box',{attrs:{"type":"important"}},[_c('p',[_v("The syntax for icons has changed, and the earlier "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ prefix_name }}")]),_v(" syntax has been deprecated. "),_c('br'),_v("\nPlease use the new "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":prefix-name:")]),_v(" syntax instead.")])]),_v(" "),_c('h6',{attrs:{"id":"using-font-awesome-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-font-awesome-icons"}}),_v("Using Font Awesome Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-font-awesome-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from the "),_c('a',{attrs:{"href":"https://fontawesome.com/icons?d=gallery&m=free"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Font Awesome has three different styles for their icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Solid")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-")]),_v(") e.g., "),_c('span',{staticClass:"fas fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fas-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Regular")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-")]),_v(") e.g., "),_c('span',{staticClass:"far fa-file-code",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("file-code")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("far-file-code")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Brands")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-")]),_v("): e.g., "),_c('span',{staticClass:"fab fa-github-alt",attrs:{"aria-hidden":"true"}}),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("github-alt")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fab-github-alt")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert MarkBind name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Create a **branch**")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-code-branch: now!")]),_v(" → Create a "),_c('strong',[_v("branch")]),_v(" "),_c('span',{staticClass:"fas fa-code-branch",attrs:{"aria-hidden":"true"}}),_v(" now!")])])]),_v(" "),_c('h6',{attrs:{"id":"using-glyphicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-glyphicons"}}),_v("Using Glyphicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-glyphicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/3.3/components/#glyphicons"}},[_v("list of provided glyphicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Move to the right!")]),_c('code',{pre:true},[_v(":"),_c('span'),_v("glyphicon-hand-right:")]),_v(" → Move to the right! "),_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}})])]),_v(" "),_c('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("fab-github:")]),_v(" "),_c('code',{pre:true},[_v(":"),_c('span'),_v("fas-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:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('span',{staticStyle:{"color":"red"}},[_c('span',{staticClass:"glyphicon glyphicon-hand-right",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fab fa-github",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',{staticClass:"fas fa-home",attrs:{"aria-hidden":"true"}})])])]),_v(" "),_c('h6',{attrs:{"id":"using-octicons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-octicons"}}),_v("Using Octicons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-octicons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://octicons.github.com"}},[_v("list of available Octicons")]),_v(".")]),_v(" "),_c('li',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Merge a **pull request** :octicon-git-pull-request:")]),_v(" → Merge a "),_c('strong',[_v("pull request")]),_v(" "),_c('svg',{staticClass:"octicon octicon-git-pull-request",attrs:{"version":"1.1","width":"16","height":"16","viewBox":"0 0 16 16","aria-hidden":"true"}},[_c('path',{attrs:{"fill-rule":"evenodd","d":"M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"}})])]),_v(" "),_c('li',[_v("You may also append "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("~class-name")]),_v(" to the end of the octicon name to add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"class-name\"")]),_v(" property to your Octicon (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octicon-git-pull-request~icon-large-red:")]),_v(" will generate an Octicon of class "),_c('em',[_v("icon-large-red")]),_v("). You may then add corresponding CSS to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{root}/_markbind/layouts/{layout-name}/styles.css")]),_v(" to customize the style of your Octicon.")]),_v(" "),_c('li',[_v("If your background is dark, you may use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":octiconlight-*:")]),_v(" to render the icon as white.")])]),_v(" "),_c('h6',{attrs:{"id":"using-material-icons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-material-icons"}}),_v("Using Material Icons"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-material-icons","onclick":"event.stopPropagation()"}})]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Decide which icon you want to use from "),_c('a',{attrs:{"href":"https://fonts.google.com/icons"}},[_v("list of available icons")]),_v(".")])]),_v(" "),_c('li',[_c('p',[_v("Construct the MarkBind name for the selected icon by writing the icon name in "),_c('em',[_v("lowercase letters only")]),_v(", replacing any spaces between the words in the name with "),_c('em',[_v("dashes")]),_v(" ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v("), then adding the "),_c('em',[_v("type prefix")]),_v(".\nNote: Google has five different styles for their Material icons, each with their own type prefix. Here is an example from each type:")]),_v(" "),_c('ul',[_c('li',[_c('em',[_v("Filled")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-")]),_v(") e.g. "),_c('span',{staticClass:"material-icons align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mif-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Outlined")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-")]),_v(") e.g., "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mio-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Rounded")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-round align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mir-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Sharp")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-sharp align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mis-perm-media")]),_v(")")]),_v(" "),_c('li',[_c('em',[_v("Two tone")]),_v(" (prefix: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-")]),_v("): e.g., "),_c('span',{staticClass:"material-icons-two-tone align-middle",attrs:{"aria-hidden":"true"}},[_v("perm_media")]),_v(" (actual name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Perm Media")]),_v(", MarkBind name "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mit-perm-media")]),_v(")")])])]),_v(" "),_c('li',[_c('p',[_v("Insert the name for the icon enclosed within colons to get the icon in your page."),_c('br'),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Download from Cloud :mio-cloud-download:")]),_v(" → Download from Cloud "),_c('span',{staticClass:"material-icons-outlined align-middle",attrs:{"aria-hidden":"true"}},[_v("cloud_download")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Images")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("!["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("alt text here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org/images/logo-lightbackground.png \"title here\"")]),_v(")\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"images"}},[_c('span',{staticClass:"anchor",attrs:{"id":"images"}}),_v("Images"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#images","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("![](https://markbind.org/images/logo-lightbackground.png)\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_c('a',{attrs:{"href":"https://markbind.org/images/logo-lightbackground.png","target":"_self"}},[_c('img',{staticClass:"img-fluid",attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","alt":""}})])])])],1)]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n URLs can be specified as relative references. More info in: "),_c('i',[_c('a',{attrs:{"href":"#intraSiteLinks"}},[_v("Intra-Site Links")])])]),_v(" "),_c('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")])])])]),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#includes"}},[_c('em',[_v("User Guide → Reusing Contents → Includes")])])])]),_v(" "),_c('h2',{attrs:{"id":"includes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"includes"}}),_v("Includes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#includes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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")])])])]),_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('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("docs/tips.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tip-1\"")]),_v(" />")]),_v("\n")]),_c('span',[_v(" Tip 1. ...\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("Tip 2. ...\n")])])])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("When setting the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("id")]),_v(" of a fragment, be careful not to clash with heading anchor IDs auto-generated by MarkBind. For example, if you have a heading "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("## Some Useful Tips")]),_v(", MarkBind will auto-generate an ID "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("some-useful-tips")]),_v(" for that heading.")])]),_v(" "),_c('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")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("optional")])]),_v(" (optional): include the file/fragment only if it exists i.e., there will be no error message if the file/fragment does not exist. e.g.,"),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("optional")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trim")])]),_v(" (optional): remove leading and trailing whitespace and newlines from the document before including."),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"UserStories.md#epic\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("trim")]),_v(" />")]),_v("\n")])])])]),_v(" "),_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("omitFrontmatter")])]),_v(" (optional): omit the 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")])])])])]),_v(" "),_c('h5',{attrs:{"id":"include-inside-an-included-file"}},[_c('span',{staticClass:"anchor",attrs:{"id":"include-inside-an-included-file"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" Inside an Included File"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#include-inside-an-included-file","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Although the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" attribute of an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" is given "),_c('em',[_v("relative")]),_v(" to the current directory, it is converted to an "),_c('em',[_v("absolute")]),_v(" value "),_c('em',[_v("before")]),_v(" the "),_c('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('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("# My Review")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../bookFiles/book.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_v("...\n")])])]),_c('p',[_v("The content of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" will be included in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("review.md")]),_v(" (via "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"../bookFiles/book.md\" />")]),_v(") although "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1.md")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2.md")]),_v(" are not in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("reviewFiles")]),_v(" directory. i.e., "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter1.md\" />")]),_v(" will be interpreted as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"c:/mySite/bookFiles/chapter1.md\" />")])])]),_v(" "),_c('p',[_v("In other words, "),_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" interprets the reused code relative to the original location of the file, not the location in which it is reused.")])]),_v(" "),_c('hr'),_v(" "),_c('h5',{attrs:{"id":"specifying-variables-in-an-include"}},[_c('span',{staticClass:"anchor",attrs:{"id":"specifying-variables-in-an-include"}}),_v("Specifying Variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-variables-in-an-include","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("It is possible to include variables in an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(".")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("In "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("article.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# {{ title }}"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("Author: {{ author }}\n")])])])]),_v(" "),_c('p',[_v("These variables work the same way as variables in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(", except that they only apply to the included file. They allow the included file to be reused as a template, for different source files using different variable values.")]),_v(" "),_c('p',[_v("You can also specify include variables within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag itself by adding a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("var-")]),_v(" prefix.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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")])])])]),_v(" "),_c('p',[_v("If the same variable is defined in a chain of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v("s (e.g. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("a.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("b.md")]),_v(" includes "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("c.md")]),_v("...), variables defined in the top-most "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" will take precedence. Global variables ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(") will take precedence over any "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" variables.")]),_v(" "),_c('hr'),_v(" "),_c('h5',{attrs:{"id":"excluding-files-from-rendering-as-pages"}},[_c('span',{staticClass:"anchor",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('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('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/syntax/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")])])]),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-boilerplate-files"}}),_v("Using Boilerplate Files"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-boilerplate-files","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("If you find 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('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("As you can see, both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files are exactly the same. If we were to use only one of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" files and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" it twice in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("book.md")]),_v(", we'll end up with the same chapter content duplicated twice, which is not what we want. In other words, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter.md")]),_v(" contains boilerplate code that needs to be interpreted relative to where it is applied, once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter1")]),_v(" directory and once relative to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("chapter2")]),_v(" directory.")])]),_v(" "),_c('p',[_v("To use a code fragment as a boilerplate file,")]),_v(" "),_c('ol',[_c('li',[_v("Put the code in a file inside the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates")]),_v(" directory.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" the file "),_c('em',[_v("as if")]),_v(" a copy of it exists in any directory you want it to applied, but add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boilerplate")]),_v(" attribute to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include>")]),_v(" tag.")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/boilerplates/chapter.md")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Text")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text.md\"")]),_v(" />")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-section"}},[_v("## Exercises")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exercises.md\"")]),_v(" />")])]),_v("\n")])])]),_c('p',[_v("Consider the line "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<include src=\"chapter1/chapter.md\" boilerplate />")]),_v(". Note how you can use "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src=\"chapter1/chapter.md\"")]),_v(" 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")])])])]),_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")])])])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Keywords")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"keyword d-none\"")]),_v(">")]),_v("regress"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"keywords"}},[_c('span',{staticClass:"anchor",attrs:{"id":"keywords"}}),_v("Keywords"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#keywords","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{staticClass:"keyword d-none"},[_v("regress")]),_v(" "),_c('span',{staticClass:"keyword d-none"},[_v("regression testing")])]),_v(" "),_c('p',[_c('strong',[_v("You can also specify additional keywords to be indexed under a heading")]),_v(" by tagging the words with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keyword")]),_v(" class. Those keywords will be linked to the heading immediately above it. If you want to index a keyword without rendering it in the page, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("d-none")]),_v(" as a class.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('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")])])])]),_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")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Line Breaks")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the second sentence."),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_v("This should be on a new line.\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"line-breaks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"line-breaks"}}),_v("Line Breaks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#line-breaks","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The preferred way to indicate line breaks is to use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<br>")]),_v(" tag.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the second sentence."),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_v("This should be on a new line.\n")]),_c('span',[_v("This will not be in a new line.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the second sentence."),_c('br'),_v("\nThis should be on a new line.\nThis will not be in a new line.")])])],1)])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Links")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")]),_c('span',[_v("\n")]),_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"links"}},[_c('span',{staticClass:"anchor",attrs:{"id":"links"}}),_v("Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#links","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Basic style:")]),_v(" "),_c('div',{attrs:{"id":"main-example"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]("),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v(").\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)])]),_v(" "),_c('p',[_c('em',[_v("Reference style")]),_v(" links (i.e., specify the URL in a separate place):")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("MarkBind home is at ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("here")]),_v("]["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("].\n")]),_c('span',[_v("\n")]),_c('span',[_v("["),_c('span',{pre:true,attrs:{"class":"hljs-symbol"}},[_v("1")]),_v("]: "),_c('span',{pre:true,attrs:{"class":"hljs-link"}},[_v("https://markbind.org")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("MarkBind home is at "),_c('a',{attrs:{"href":"https://markbind.org"}},[_v("here")]),_v(".")])])],1)]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#links"}},[_v("https://www.markdownguide.org/basic-syntax#links")])])]),_v(" "),_c('h4',{attrs:{"id":"autolinks"}},[_c('span',{staticClass:"anchor",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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"intra-site-links"}}),_v("Intra-Site Links"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#intra-site-links","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"intraSiteLinks"}},[_c('p',[_v("Links to files of the generated site (e.g., an HTML page or an image file) can be specified either as relative paths or absolute paths.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Auto-conversion of extension")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("You may link to markdown files using its original extension ("),_c('strong',[_v(".md")]),_v(") as it will automatically be converted to a HTML extension ("),_c('strong',[_v(".html")]),_v(") when the site is generated.")]),_v(" "),_c('p',[_c('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('p',[_v("Within "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("index.md")]),_v(", we can also display the image using")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("img")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"textbook/image.png\"")]),_v(" />")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- or -->")]),_v("\n")]),_c('span',[_v("![](textbook/image.png)\n")])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Relative links to resources (e.g. images, hrefs) should be valid "),_c('strong',[_v("relative to the file where the link is defined")]),_v(".")]),_v(" "),_c('p',[_v("In the example above, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" is in the same directory as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("subsite.md")]),_v(". Thus, the correct path is "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("image.png")]),_v(" and not "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("textbook/image.png")]),_v(".")])])],1),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Link validation")])])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_v("Links will be validated when generating a site and a warning will be displayed in the console for every link that is invalid.")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("Disabling link validation")])]),_v(" "),_c('p',[_v("Link validation is enabled by default.")]),_v(" "),_c('p',[_v("If you wish to only disable validation for a "),_c('strong',[_v("specific link")]),_v(", you may use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-validation")]),_v(" attribute.")]),_v(" "),_c('p',[_c('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")])])])])])],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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"lists"}},[_c('span',{staticClass:"anchor",attrs:{"id":"lists"}}),_v("Lists"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#lists","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Unordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("*")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" *")]),_v(" Sub item 1.2"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" Second line")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" * Sub item 1.2.1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 2")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("* Item 3")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ul',[_c('li',[_v("Item 1\n"),_c('ul',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2"),_c('br'),_v("\nSecond line\n"),_c('ul',[_c('li',[_v("Sub item 1.2.1")])])])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Ordered lists:")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.1\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('ol',[_c('li',[_v("Item 1\n"),_c('ol',[_c('li',[_v("Sub item 1.1")]),_v(" "),_c('li',[_v("Sub item 1.2")])])]),_v(" "),_c('li',[_v("Item 2")]),_v(" "),_c('li',[_v("Item 3")])])])],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\nYou can also start an ordered list at a particular number by changing the\n"),_c('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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"math-formulae"}},[_c('span',{staticClass:"anchor",attrs:{"id":"math-formulae"}}),_v("Math Formulae"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#math-formulae","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind supports typesetting TeX math equations. "),_c('a',{attrs:{"href":"https://katex.org"}},[_v("KaTeX")]),_v(" is used as a fast math renderer.")]),_v(" "),_c('p',[_v("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")])])])]),_v(" "),_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")])])])]),_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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"modals"}},[_c('span',{staticClass:"anchor",attrs:{"id":"modals"}}),_v("Modals"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#modals","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Modals are to be used together with the "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" component for activation.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("More about "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Modal header** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v("This is the same "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:loremipsum\"")]),_v(">")]),_v("trigger"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(" as last one.\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(">")]),_v("This is a trigger for a centered modal"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Centered** :rocket:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:centered\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("center")]),_v(">")]),_v("\n")]),_c('span',[_v(" Centered\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(">")]),_v("This is a trigger for a modal with a custom OK button"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("trigger")]),_v(">")]),_v(".\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"OK button visible!\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"modal:ok-text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("ok-text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Custom OK\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("modal")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("More about "),_c('trigger',{attrs:{"for":"modal:loremipsum"}},[_v("trigger")]),_v(".")],1),_v(" "),_c('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 "),_c('hr',{staticStyle:{"margin-top":"0.2rem","margin-bottom":"0"}}),_v(" "),_c('small',[_v("modal-footer "),_c('br'),_v(" (deprecated)")])]),_v(" "),_c('td',[_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_v("Slot")])],1),_v(" "),_c('td',[_v("empty")]),_v(" "),_c('td',[_v("Specifying this will override the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ok-text")]),_v(" attribute, and the OK button will not render.")])]),_v(" "),_c('tr',[_c('td',[_v("ok-text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Text for the OK button.")])]),_v(" "),_c('tr',[_c('td',[_v("effect")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("zoom")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("fade")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("id")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Used by "),_c('a',{attrs:{"href":"#trigger"}},[_v("Trigger")]),_v(" to activate the Modal by id."),_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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"navbars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"navbars"}}),_v("Navbars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#navbars","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Navbar allows visitors of your website to navigate through pages easily.")])]),_v(" "),_c('p',[_c('strong',[_v("Navbars support link highlighting; link highlighting can be customised by specifying rules.")])]),_v(" "),_c('ul',[_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default-highlight-on")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<navbar>")]),_v(" to specify fallback highlight rules.")]),_v(" "),_c('li',[_v("Define "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("data-highlight")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a>")]),_v(" tags with the class "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("nav-link")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dropdown-item")]),_v(" to specify individual highlight rules.")])]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('div',[_c('p',[_v("Note: "),_c('strong',[_v("Navbars")]),_v(" should be placed within a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#headers"}},[_v("header file")]),_v(" to ensure that they are correctly positioned at the top of the page, above the "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#site-navigation-menus"}},[_v("site navigation")]),_v(" and "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#page-navigation-menus"}},[_v("page navigation")]),_v(" menus.")])])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Brand as slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"brand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-brand\"")]),_v(">")]),_v("MarkBind"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/components/navigation.html#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Highlighted Link"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- You can use dropdown component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#navbars\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")]),_v("Option"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For right positioning use slot -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("Fork..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('navbar',{attrs:{"type":"primary"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"dark"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1),_v(" "),_c('navbar',{attrs:{"type":"light"},scopedSlots:_u([{key:"brand",fn:function(){return [_c('a',{staticClass:"navbar-brand",attrs:{"href":"/","title":"Home"}},[_v("MarkBind")])]},proxy:true},{key:"right",fn:function(){return [_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"https://github.com/MarkBind/markbind","target":"_blank"}},[_v("Fork...")])])]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"nav-link",attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("Highlighted Link")])]),_v(" "),_c('dropdown',{staticClass:"nav-link",scopedSlots:_u([{key:"header",fn:function(){return [_v("Dropdown")]},proxy:true}])},[_v(" "),_c('li',[_c('a',{staticClass:"dropdown-item",attrs:{"href":"#navbars"}},[_v("Option")])])])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("type")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("primary")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("dark")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("light")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("default-highlight-on")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Supports: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")]),_v(". Specifies link highlight rules for navbars.")])])])])]),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("If you wish to further customize your navbar beyond the primary, dark, and light theme colors, specify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"none\"")]),_v(" attribute and 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\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/showcase.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("SHOWCASE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"exact\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"/about.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("ABOUT"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://github.com/MarkBind/markbind\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("target")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"_blank\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v(":fab-github:"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])]),_c('p',[_c('strong',[_c('strong',[_v("Highlight Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a child of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" is a child of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling of the link. E.g "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bar")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("foo/bear")]),_v(" are siblings.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sibling-or-child")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar is a sibling or child of the link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("exact")])]),_v(" "),_c('td',[_v("Highlights link if URL in address bar exactly matches link.")])]),_v(" "),_c('tr',[_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("none")])]),_v(" "),_c('td',[_v("No highlighting.")])])])])]),_c('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")])])])]),_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:"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('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('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('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\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-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")])])])])])],1)])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"page-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"page-navigation-menus"}}),_v("Page Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#page-navigation-menus","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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('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('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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"panels"}},[_c('span',{staticClass:"anchor",attrs:{"id":"panels"}}),_v("Panels"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#panels","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Panel is a flexible container that supports collapsing and expanding its content. It is expandable by default.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This is your header for a Panel, click me to expand!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimized")]),_v(" attribute, panel is minimized into an inline block element. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("alt")]),_v(" attribute is for you to specify the minimized block header.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"How to cultivate a tomato plant at home\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tomatoes\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("How to cultivate a tomato plant at home")])]},proxy:true},{key:"_alt",fn:function(){return [_c('p',[_v("Tomatoes")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expanded")]),_v(" attribute, you can set the panels to be expanded when loaded in.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Have your readers click less to see the Panel's contents\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expanded")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expanded":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Have your readers click less to see the Panel's contents")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("expand-headerless")]),_v(" attribute, you can hide the panel header when it is expanded.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This header will only show when the Panel is collapsed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("expand-headerless")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"expand-headerless":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This header will only show when the Panel is collapsed")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("peek")]),_v(" attribute, you may showcase part of your content without expanding the panel.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Give your readers a peek of the content without expanding Panel\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("peek")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n")]),_c('span',[_v(" magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n")]),_c('span',[_v(" consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n")]),_c('span',[_v(" Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n")]),_c('span',[_v(" Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n")]),_c('span',[_v(" facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n")]),_c('span',[_v(" eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n")]),_c('span',[_v(" dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n")]),_c('span',[_v(" pellentesque. \n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"peek":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Give your readers a peek of the content without expanding Panel")])]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore\n magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n Curabitur ornare ipsum eu ex congue egestas. Maecenas pretium nibh sed enim ornare finibus. Mauris quis metus \n facilisis, mattis tellus nec, pulvinar mi. Quisque at vehicula lectus. Ut ac lacus mi. Donec mattis nec velit \n eget tincidunt. Maecenas vel mauris mattis nisl tempor sollicitudin. Orci varius natoque penatibus et magnis \n dis parturient montes, nascetur ridiculus mus. Duis tincidunt diam eu dolor pellentesque, eget dignissim tortor \n pellentesque. \n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Panel provides many types that change its appearance.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**light type panel (DEFAULT)**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"light\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**dark type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dark\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**primary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**secondary type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"secondary\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**info type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"info\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**danger type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"danger\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**warning type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"warning\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**success type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"success\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**seamless type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**minimal type panel**\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"minimal\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("minimized")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{attrs:{"type":"light","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("light type panel (DEFAULT)")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"dark","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("dark type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"primary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("primary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"secondary","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("secondary type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"info","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("info type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"danger","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("danger type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"warning","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("warning type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"success","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("success type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"seamless","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("seamless type panel")])])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{attrs:{"type":"minimal","minimized":""},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_c('strong',[_v("minimal type panel")])])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("Show/Hide buttons using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("no-switch")]),_v(", "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"paragraphs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"paragraphs"}}),_v("Paragraphs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#paragraphs","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Use one or more empty lines to separate paragraphs.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("This is the first paragraph.\n")]),_c('span',[_v("\n")]),_c('span',[_v("This is another paragraph. This is the second sentence.\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("This is the first paragraph.")]),_v(" "),_c('p',[_v("This is another paragraph. This is the second sentence.")])])],1)]),_v(" "),_c('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")])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Pictures")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"pictures"}},[_c('span',{staticClass:"anchor",attrs:{"id":"pictures"}}),_v("Pictures"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#pictures","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pic")]),_v(" component allows you to add captions below the image.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<pic>")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_c('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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"popovers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"popovers"}}),_v("Popovers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#popovers","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"header-2"}}),_v("Header"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#header-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"content-using-slot"}}),_v("Content using slot"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#content-using-slot","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"wrap-text"}}),_v("Wrap Text"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#wrap-text","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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")])])])]),_v(" "),_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")])])])]),_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:"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:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"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")])])])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"questions-and-quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"questions-and-quizzes"}}),_v("Questions and Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#questions-and-quizzes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',{staticClass:"mt-3"},[_v("Question and quiz components provide an easy way to test readers on the relevant content topic in the page.")]),_v(" "),_c('h4',{attrs:{"id":"introduction"}},[_c('span',{staticClass:"anchor",attrs:{"id":"introduction"}}),_v("Introduction"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#introduction","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Question components ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(") can be one of the following types: "),_c('strong',[_v("MCQ")]),_v(", "),_c('strong',[_v("Checkbox")]),_v(", "),_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")])])])])])]),_v(" "),_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")])])])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"mcq-and-checkbox-questions"}}),_v("MCQ and Checkbox Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#mcq-and-checkbox-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MCQ and checkbox questions are indicated with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"mcq\"")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"checkbox\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("In both instances, you can include the possible answers using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<q-option>")]),_v(" component, placed anywhere inside the "),_c('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")])])])]),_v(" "),_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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("q-option")]),_v(" Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("correct")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether this option (placed under either a MCQ or checkbox question) is correct. You may have multiple correct answers in either case.")])]),_v(" "),_c('tr',[_c('td',[_v("reason"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The explanation markup to display for the option once the answer is checked.")])])])])]),_c('h4',{staticClass:"mt-4 mb-3",attrs:{"id":"fill-in-the-blanks-questions"}},[_c('span',{staticClass:"anchor",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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",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")])])])]),_v(" "),_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"}},[_c('span',{staticClass:"anchor",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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-questions"}}),_v("Text Questions"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-questions","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Text questions are specified with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(" attribute.")]),_v(" "),_c('p',[_v("Unlike MCQ and checkbox questions, answer checking is performed by providing keywords to check for in the user's answer through the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute.\nIf no keywords are provided, the answer will always be marked as correct when placed in quizzes.")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Keywords are validated by simply looking for the keyword as a pattern in the user's answer!\nThis works well for some\n"),_c('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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('question',{attrs:{"type":"text","keywords":"hawaii","threshold":"0.5"},scopedSlots:_u([{key:"answer",fn:function(){return [_c('p',[_v("It originated from Hawaii!")])]},proxy:true},{key:"header",fn:function(){return [_c('p',[_v("Which country did the Hawaiian pizza originate from?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_c('p',[_v("Watch some pizza commercials! 📺")]),_v(" "),_c('p',[_v("🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕 🍕")])])]},proxy:true}])})],1)],1)]),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_c('p',[_v("Since the validation is imperfect, the minimum proportion of keywords that need to be matched can also be changed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("threshold")]),_v(" attribute.")]),_v(" "),_c('p',[_v("If you don't want to validate the answer at all, you may also omit the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(" attribute entirely. Doing so also always marks the question as correct inside "),_c('a',{attrs:{"href":"#quizzes"}},[_v("quizzes")]),_v(".")])]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Text Question specific Options and Slots")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("keywords")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("Comma delimited string of keywords or phrases to match the user's answer against.")])]),_v(" "),_c('tr',[_c('td',[_v("threshold")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0.5")])]),_v(" "),_c('td',[_v("Minimum proportion of keywords that have to be matched in the user's answer for the answer to be marked as correct.")])]),_v(" "),_c('tr',[_c('td',[_v("answer"),_c('trigger',{attrs:{"for":"on-slots","trigger":"click"}},[_c('strong',[_c('sup',[_v("[S]")])])])],1),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The answer or explanation to display when the user clicks the check button.")])])])])]),_c('box',{attrs:{"type":"important"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Deprecation notes")])]},proxy:true}])},[_v(" "),_c('ul',[_c('li',[_v("The old "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("has-input")]),_v(" attributes translate to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type=\"text\"")]),_v(", but will be deprecated in a future version.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v("s without a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("type")]),_v(" (or an unrecognised one) will always be marked correct when placed in quizzes.")])])]),_v(" "),_c('h4',{attrs:{"id":"quizzes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"quizzes"}}),_v("Quizzes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#quizzes","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also build a series of questions out of multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(" components.")]),_v(" "),_c('p',[_v("Simply place the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<question>")]),_v(" components you want to include into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<quiz>")]),_v(" component! No extra configuration is needed.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v(" "),_c('h5',{attrs:{"id":"which-of-the-following-is-true-2"}},[_c('span',{staticClass:"anchor",attrs:{"id":"which-of-the-following-is-true-2"}}),_v("Which of the following is true?"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#which-of-the-following-is-true-2","onclick":"event.stopPropagation()"}})]),_v(" "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"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"}},[_c('span',{staticClass:"anchor",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:"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:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Text questions")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Text questions","class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Which country did the Hawaiian pizza originate from?\"")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("keywords")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hawaii\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("threshold")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"0.5\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("answer")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"It originated from Hawaii!\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"hint\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" Watch some pizza commercials! :tv:\n")]),_c('span',[_v("\n")]),_c('span',[_v(" :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("Quiz")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"Quiz","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("quiz")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mcq\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"checkbox\"")]),_v(">")]),_v("..."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("question")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"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")])])])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"examples"}},[_c('div',[_c('quiz',[_c('question',{attrs:{"type":"mcq"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Which of these "),_c('strong',[_v("contradicts")]),_v(" the heuristics recommended when creating test cases with multiple inputs?")])]},proxy:true},{key:"hint",fn:function(){return [_c('div',[_v("\n How do you figure out which inputs are wrong? (or correct)\n ")])]},proxy:true}])},[_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("This is "),_c('strong',[_v("correct")]),_v(". We need to figure out if a positive test case works!")])]},proxy:true}])},[_v("\n Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.\n ")]),_v(" "),_c('q-option',[_v("\n It is ok to combine valid values for different inputs.\n ")]),_v(" "),_c('q-option',[_v("\n No more than one invalid test input should be in a given test case.\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""},scopedSlots:_u([{key:"reason",fn:function(){return [_c('div',[_v("\n If you test all invalid test inputs together, you will not know if each one of the invalid inputs are handled\n correctly by the SUT.\n This is because most SUTs return an error message upon encountering the first invalid input.\n ")])]},proxy:true}])},[_v("\n All invalid test inputs must be tested together.\n \n ")])],1),_v(" "),_c('question',{attrs:{"type":"checkbox"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Use your calculator! "),_c('span',{staticClass:"fas fa-calculator",attrs:{"aria-hidden":"true"}})])]},proxy:true}])},[_v("\n\n ##### Which of the following is true?\n\n "),_c('br'),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum")])]},proxy:true}])},[_v("\n 1 + 1 = 11\n ")]),_v(" "),_c('q-option',{scopedSlots:_u([{key:"reason",fn:function(){return [_c('p',[_v("Division by zero is "),_c('strong',[_v("undefined")]),_v("!")])]},proxy:true}])},[_v("\n 1 / 0 = infinity\n ")]),_v(" "),_c('q-option',{attrs:{"correct":""}},[_v("\n 11 / 11 = 1\n ")])],1),_v(" "),_c('question',{attrs:{"type":"blanks"},scopedSlots:_u([{key:"hint",fn:function(){return [_c('p',[_v("Google it!")])]},proxy:true}])},[_v("\n\n ##### German sociologist __________ called the process of simultaneously analyzing the behavior of individuals and the society that shapes that behavior __________.\n\n "),_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',[_v("\n\n Watch some pizza commercials! :tv:\n\n :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:\n ")])]},proxy:true}])})],1)],1)])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Search Bars")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"search-bars"}},[_c('span',{staticClass:"anchor",attrs:{"id":"search-bars"}}),_v("Search Bars"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#search-bars","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component allows users to search all headings within any page on the site.")]),_v(" "),_c('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('p',[_v("To use the searchbar within a navbar, add the following markup to your file. The searchbar can be positioned using the slot attribute for the list. The following markup adds a searchbar to the right side of the navbar with appropriate styling.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("Enter a search term (eg. 'search bar') to see the search result dropdown.")]),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search","on-hit":searchCallback}}),_v(" "),_c('br'),_v(" "),_c('searchbar',{attrs:{"data":searchData,"placeholder":"Search (Right-aligned dropdown)","on-hit":searchCallback,"menu-align-right":""}})],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("algolia")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the searchbar should be connected to "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("Algolia DocSearch")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("data")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Array")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The local data source for suggestions. Expected to be a primitive array. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchData\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("menu-align-right")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether the search bar's dropdown list will be right-aligned.")])]),_v(" "),_c('tr',[_c('td',[_v("on-hit")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Function")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("A callback function when you click or hit return on an item. To use MarkBind's search functionality, set this value to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\"searchCallback\"")]),_v(".")])]),_v(" "),_c('tr',[_c('td',[_v("placeholder")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("''")])]),_v(" "),_c('td',[_v("The placeholder text shown when no keywords are entered in the search bar.")])])])])]),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("Note: If you are using MarkBind's search functionality, then "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("enableSearch")]),_v(" "),_c('strong',[_v("must be set to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("true")]),_v(" in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")])]),_v(".")]),_v(" "),_c('p',[_v("See: "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#enable-search"}},[_v("User Guide: Site Configuration → enableSearch")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("User Guide: Making the Site Searchable")]),_v(".")])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" Related topic: "),_c('a',{attrs:{"href":"/userGuide/usingPlugins.html#algolia-enabling-algolia-docsearch"}},[_v("User Guide: Using Plugins → Algolia: Enabling Algolia DocSearch")]),_v(".")])])],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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('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")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"site-navigation-menus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"site-navigation-menus"}}),_v("Site Navigation Menus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#site-navigation-menus","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{attrs:{"id":"content"}},[_c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])]),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_c('ol',[_c('li',[_v("Format your siteNav as an unordered Markdown list")]),_v(" "),_c('li',[_v("Include it under a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav>")]),_v(" element.")]),_v(" "),_c('li',[_v("(Optional) To make siteNav accessible on smaller screens, you can use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<site-nav-button />")]),_v(" component in the "),_c('a',{attrs:{"href":"/userGuide/components/navigation.html#navbars"}},[_v("navbar")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("<site-nav>\n")]),_c('span',[_v("* [**Getting Started**](/userGuide/gettingStarted.html)\n")]),_c('span',[_v("* **Authoring Contents** :expanded:\n")]),_c('span',[_v(" * [Overview](/userGuide/authoringContents.html)\n")]),_c('span',[_v(" * [Adding Pages](/userGuide/addingPages.html)\n")]),_c('span',[_v(" * [MarkBind Syntax Overview](/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',[_v(" * [Formatting Contents](/userGuide/formattingContents.html)\n")]),_c('span',[_v(" * [Using Components](/userGuide/usingComponents.html)\n")]),_c('span',[_v("</site-nav>\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_c('p',[_v("MarkBind has styles nested lists with additional padding and smaller text sizes up to "),_c('strong',[_v("4")]),_v(" nesting levels.\nBeyond that, you'd have to include your own styles.")]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])]),_v(" "),_c('p',[_v("You can "),_c('strong',[_v("append the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":expanded:")]),_v(" to a "),_c('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("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])]),_v(" "),_c('div',{attrs:{"id":"examples"}})])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Tables")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"tables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tables"}}),_v("Tables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("Animal | Trainable?| Price | Remarks\n")]),_c('span',[_v(":----- | :-------: | ----: | ----\n")]),_c('span',[_v("Ants | no | 5 |\n")]),_c('span',[_v("Bees | no | 20 |\n")]),_c('span',[_v("Cats|yes|100|\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Animal")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Trainable?")]),_v(" "),_c('th',{staticStyle:{"text-align":"right"}},[_v("Price")]),_v(" "),_c('th',[_v("Remarks")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Ants")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("5")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Bees")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("no")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("20")]),_v(" "),_c('td')]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("Cats")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("yes")]),_v(" "),_c('td',{staticStyle:{"text-align":"right"}},[_v("100")]),_v(" "),_c('td')])])])])])],1)]),_v(" "),_c('ul',[_c('li',[_v("Colons ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(":")]),_v(") in the 2nd line are optional and they indicates whether to left/center/right-align the values in that column.")]),_v(" "),_c('li',[_v("There is no need to align pipe symbols to be on a vertical line; it's just for aesthetic purposes only.")])]),_v(" "),_c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/extended-syntax#tables"}},[_v("https://www.markdownguide.org/extended-syntax#tables")])])]),_v(" "),_c('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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"tabs"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tabs"}}),_v("Tabs"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tabs","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"First tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tabs")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("active")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")])]),_v(" "),_c('td',[_v("Active Tab index (0-based)")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab is clickable and can be activated.")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab-group")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab Group title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab Group is clickable and can be activated.")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Tabs, tab group and individual tab can be omitted during printing by adding Bootstrap's display property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"d-print-none\"")]),_v(" to the respective components.")])]),_v(" "),_c('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")])])])]),_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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('div',[_c('h3',{attrs:{"id":"plugin-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-tags"}}),_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"toggling-alternative-contents"}}),_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])]),_v(" "),_c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")]),_v(" "),_c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('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")])])])]),_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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_v("Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will be merged with the ones in the 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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tagging-tips"}}),_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<p>")]),_v("s will be shown.")])]),_v(" "),_c('h4',{attrs:{"id":"hiding-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-tags"}}),_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])]),_v(" "),_c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(".")]),_v(" "),_c('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('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_v(" "),_c('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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])])])])])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Text Styles")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**Bold**")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Italic_")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_Bold and Italic"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("__"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("_, `Inline Code`")])])])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("~~Strike through~~, "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v("Super Bold"),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("****")]),_v(", !!Underline!!, ==Highlight==, %%Dim%%, ++Large++, --Small--, Super^script^, Sub~script~")])])])]),_v("\n")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"text-styles"}},[_c('span',{staticClass:"anchor",attrs:{"id":"text-styles"}}),_v("Text Styles"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#text-styles","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Markdown text styles:")]),_v(" "),_c('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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"thumbnails"}},[_c('span',{staticClass:"anchor",attrs:{"id":"thumbnails"}}),_v("Thumbnails"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#thumbnails","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("thumbnail")]),_v(" component allows you to insert thumbnails using text, images, or icons.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("circle")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"../../images/deer.jpg\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dff5ff\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"___CS___\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("background")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#333\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"white\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("thumbnail")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\":fas-book:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("font-color")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("border")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"3px solid darkgreen\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("size")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"100\"")]),_v("/>")]),_v("\n")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('thumbnail',{attrs:{"circle":"","src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"circle":"","background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"circle":"","font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})]),_v(" "),_c('thumbnail',{attrs:{"src":"/images/deer.jpg","size":"100"}}),_v(" "),_c('thumbnail',{attrs:{"background":"#dff5ff","size":"100"}},[_v("📖")]),_v(" "),_c('thumbnail',{attrs:{"background":"#333","font-color":"white","size":"100"}},[_c('em',[_c('strong',[_v("CS")])])]),_v(" "),_c('thumbnail',{attrs:{"font-color":"darkgreen","border":"3px solid darkgreen","size":"100"}},[_c('span',{staticClass:"fas fa-book",attrs:{"aria-hidden":"true"}})])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" is specified")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("background")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the background color."),_c('br'),_v(" Accepts any valid CSS background property")])]),_v(" "),_c('tr',[_c('td',[_v("border")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Specifies the border thickness, type, and color."),_c('br'),_v(" Accepts any valid CSS border property")])]),_v(" "),_c('tr',[_c('td',[_v("circle")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("If this option is enabled, the thumbnail will be circle shaped instead of square")])]),_v(" "),_c('tr',[_c('td',[_v("font-color")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The color of the text, affects normal text and icons (but not emojis)")])]),_v(" "),_c('tr',[_c('td',[_v("font-size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Text size, defaults to half of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("size")]),_v(", affects text, icons and emojis")])]),_v(" "),_c('tr',[_c('td',[_v("size")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("100")]),_v(" "),_c('td',[_v("The size of the thumbnail in pixels")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("text")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The text to use in the thumbnail, "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#icons"}},[_v("icons")]),_v(", "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#emoji"}},[_v("emojis")]),_v(" and markdown are supported here")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If both "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("text")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" are specified, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("src")]),_v(" will take higher priority.")])]),_v(" "),_c('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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"tooltips"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tooltips"}}),_v("Tooltips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tooltips","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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")])])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('h2',{attrs:{"id":"tree"}},[_c('span',{staticClass:"anchor",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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_v(" "),_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")])])])]),_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('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("The year was {{ year }}.")])])])])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/reusingContents.html#variables"}},[_c('em',[_v("User Guide → Reusing Contents → Variables")])])])]),_v(" "),_c('h2',{attrs:{"id":"variables"}},[_c('span',{staticClass:"anchor",attrs:{"id":"variables"}}),_v("Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"global-variables"}}),_v("Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#global-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Global variables are to be defined in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/variables.md")]),_v(" file.")]),_v(" Each variable must have an "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" and the value can be any MarkBind-compliant code fragment. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name")]),_v(" should not contain "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".")]),_v(". For example, "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search-option")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("search.options")]),_v(" are not allowed.")]),_v(" "),_c('p',[_v("The variables declared here are available from anywhere in the code base.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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")])])])]),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"built-in-global-variables"}}),_v("Built-in Global Variables"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#built-in-global-variables","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind also provides a number of built-in variables.")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Variable")]),_v(" "),_c('th',[_v("Notes")]),_v(" "),_c('th',[_c('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: Tue, 14 Feb 2023, 1:33:56 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 4.1.0")])])])])])]),_c('h3',{attrs:{"id":"importing-variables-from-other-external-file-formats"}},[_c('span',{staticClass:"anchor",attrs:{"id":"importing-variables-from-other-external-file-formats"}}),_v("Importing variables from other external file formats"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#importing-variables-from-other-external-file-formats","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can also source variables from external files using MarkBind's "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext varName = \"filepathToFile\" %}")]),_v(" Nunjucks extension.\nThis is useful if you have external datasets you want to display in your site!")]),_v(" "),_c('p',[_v("To do so, assign a root variable name ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("varName")]),_v(") to the file path from the "),_c('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('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("JSON file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("JSON File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"JSON File","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"lastUpdated\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"21 November, 2020\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"students\"")]),_v(": [\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234567X\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("87")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("1")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A1234123U\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("60")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("3")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"number\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"A9876543L\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"score\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("76")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"rank\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("2")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" ]\n")]),_c('span',[_v("}\n")])])])])])]),_v(" "),_c('br')],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])]),_c('p',[_c('small',[_v("Last updated at 21 November, 2020")])])])],1)]),_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Importing from CSV files")]},proxy:true}])},[_v(" "),_c('p',[_c('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('panel',{attrs:{"type":"minimal"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("CSV file used in example")])]},proxy:true}])},[_v(" "),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("CSV File")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"CSV File","class":"hljs"}},[_c('span',[_v("number,score,rank\n")]),_c('span',[_v("A1234567X,87,1\n")]),_c('span',[_v("A1234123U,60,3\n")]),_c('span',[_v("A9876543L,76,2\n")])])])])])]),_v(" "),_c('br'),_v(" "),_c('box',{attrs:{"border-left-color":"#00B0F0"}},[_c('p',[_c('span',{staticStyle:{"color":"#00B0F0"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}})]),_v(" If you do not want to have a header row, you can specify it by appending a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("noHeader")]),_v(" option at the end of the variable declaration. In this example, it should be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% ext studentScoreboard = \"userGuide/syntax/extra/scoreboard.csv\", noHeader %}")]),_v(" . Elements have to be accessed using the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("[]")]),_v(" operator (i.e. using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student[0]")]),_v(" to access student number instead of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("student.number")]),_v(").")])])],1),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',{staticStyle:{"text-align":"left"}},[_v("Student Number")]),_v(" "),_c('th',{staticStyle:{"text-align":"center"}},[_v("Score")]),_v(" "),_c('th',[_v("Rank")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234567X")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("87 / 100")]),_v(" "),_c('td',[_v("1")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A1234123U")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("60 / 100")]),_v(" "),_c('td',[_v("3")])]),_v(" "),_c('tr',[_c('td',{staticStyle:{"text-align":"left"}},[_v("A9876543L")]),_v(" "),_c('td',{staticStyle:{"text-align":"center"}},[_v("76 / 100")]),_v(" "),_c('td',[_v("2")])])])])])])],1)])],1),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("Only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".csv")]),_v(" files are supported for now.")])]),_v(" "),_c('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('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)]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(4)])} +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("<annotate src=\"../../images/annotateSampleImage.png\" width=\"500\" alt=\"Sample Image\">\n")]),_c('span',[_v(" <a-point x=\"25%\" y=\"25%\" content=\"Lorem ipsum dolor sit amet\" />\n")]),_c('span',[_v(" <a-point x=\"50%\" y=\"25%\" content=\"Lorem ipsum dolor sit amet\" label=\"1a\"/>\n")]),_c('span',[_v(" <a-point x=\"50%\" y=\"25%\" content=\"Lorem ipsum dolor sit amet\" label=\"1b\" legend=\"both\"/>\n")]),_c('span',[_v("</annotate>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("<annotate>")]),_v(") are used in conjunction with Annotate\nPoints ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a-point>")]),_v(").")]),_v(" "),_c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<annotate>")]),_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("<a-point>")]),_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("<!-- Minimal Point -->")]),_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("<!-- Customize Point Size (default size is 40px) -->")]),_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("<!-- Customize Point Header (default is empty) -->")]),_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("<!-- Customize Point Color (default color is green) -->")]),_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("\"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 33% 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("<!-- Customize Point Opacity (default opacity is 0.3) -->")]),_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("\"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 66% 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("<!-- Customize Point Label (default is empty) -->")]),_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("<!-- Customize Text Color (default color is black) -->")]),_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("<!-- Customize Font Size (default font size is 14) -->")]),_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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"This point is 25% from the left and 25% from the top"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"25%","content":"This point is 50% from the left and 25% from the top","size":"60"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"25%","content":"This point is 75% from the left and 25% from the top","header":"This has a header"}}),_v(" "),_c('a-point',{attrs:{"x":"33%","y":"50%","content":"This point is 33% from the left and 50% from the top","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"50%","content":"This point is 66% from the left and 50% from the top","opacity":"0.7"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"75%","content":"This point is 25% from the left and 75% from the top","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"75%","content":"This point is 50% from the left and 75% from the top","textColor":"white","color":"black","label":"2","opacity":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"75%","content":"This point is 75% from the left and 75% from the top","fontSize":"30","label":"3"}})],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("<!-- Default Trigger (click)-->")]),_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("<!-- Set Trigger to hover focus -->")]),_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("<!-- Set Popover Placement (click)-->")]),_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("<!-- Both trigger and popover placement hover focus -->")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"Lorem ipsum dolor sit amet"}}),_v(" "),_c('a-point',{attrs:{"x":"66%","y":"33%","content":"Lorem ipsum dolor sit amet","trigger":"hover focus"}}),_v(" "),_c('a-point',{attrs:{"x":"25%","y":"66%","content":"Popover on the left","placement":"left"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"66%","content":"Popover on the right","placement":"right"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"66%","content":"Popover on the bottom","placement":"bottom","trigger":"hover focus"}})],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("<a-point>")]),_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("<a-point>")]),_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("<!-- Default Legend (popover only)-->")]),_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("<!-- Set Legend to bottom only (no popover) -->")]),_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("<!-- Set Legend to both -->")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"There is only text when you click me","label":"1"}}),_v(" "),_c('a-point',{attrs:{"x":"50%","y":"50%","content":"Clicking on this does nothing","label":"2","legend":"bottom","header":"Headers are displayed as well"}}),_v(" "),_c('a-point',{attrs:{"x":"75%","y":"50%","content":"There is text at both locations","label":"3","legend":"both","header":"Headers are displayed at both positions"}})],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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"Class inheritance","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"Aggregation","color":"blue","legend":"both"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow","legend":"both"}})],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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("annotate")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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%","content":"Operation is invoked","header":"Operation","opacity":"0.2","size":"30"}}),_v(" "),_c('a-point',{attrs:{"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"}}),_v(" "),_c('a-point',{attrs:{"x":"14%","y":"85%","content":"Return control and possibly some return value","header":"Return Value","opacity":"0.2","size":"30","color":"blue"}})],1)],1)],1)]),_v(" "),_c('br'),_v(" "),_c('p',[_c('strong',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<a-point>")]),_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.")])]),_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.")])]),_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(".")])]),_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("<annotate>")]),_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("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<pic>")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("<annotate src=\"../../images/annotateSampleImage.png\" width=\"500\" alt=\"Sample Image\">\n")]),_c('span',[_v(" <a-point x=\"25%\" y=\"25%\" content=\"Lorem ipsum dolor sit amet\" />\n")]),_c('span',[_v(" <a-point x=\"50%\" y=\"25%\" content=\"Lorem ipsum dolor sit amet\" label=\"1a\"/>\n")]),_c('span',[_v(" <a-point x=\"50%\" y=\"25%\" content=\"Lorem ipsum dolor sit amet\" label=\"1b\" legend=\"both\"/>\n")]),_c('span',[_v("</annotate>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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%","content":"You can use a triangle and a solid line (not to be confused with an arrow) to indicate class inheritance.","label":"1","header":"\nClass inheritance"}}),_v(" "),_c('a-point',{attrs:{"x":"25.5%","y":"50%","content":"UML uses a solid diamond symbol to denote composition.","label":"2","header":"Composition","color":"red"}}),_v(" "),_c('a-point',{attrs:{"x":"45%","y":"50%","content":"UML uses a hollow diamond to indicate an aggregation.","label":"3","header":"\nAggregation","color":"blue"}}),_v(" "),_c('a-point',{attrs:{"x":"64.5%","y":"50%","content":"Association labels describe the meaning of the association.","label":"4","header":"Association labels","color":"yellow"}})],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("<!-- Use inspect element on the "),_c('span',{pre:true,attrs:{"class":"hljs-strong"}},[_v("**space**")]),_v(" word below to see the \"header\" attribute! -->\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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(">")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('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("</"),_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("\"badge bg-secondary\"")]),_v(">")]),_v("Secondary"),_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("\"badge bg-success\"")]),_v(">")]),_v("Success"),_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("\"badge bg-danger\"")]),_v(">")]),_v("Danger"),_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("\"badge bg-warning text-dark\"")]),_v(">")]),_v("Warning"),_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("\"badge bg-info text-dark\"")]),_v(">")]),_v("Info"),_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("\"badge bg-light text-dark\"")]),_v(">")]),_v("Light"),_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("\"badge bg-dark\"")]),_v(">")]),_v("Dark"),_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("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("</"),_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("\"badge rounded-pill bg-secondary\"")]),_v(">")]),_v("Secondary"),_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("\"badge rounded-pill bg-success\"")]),_v(">")]),_v("Success"),_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("\"badge rounded-pill bg-danger\"")]),_v(">")]),_v("Danger"),_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("\"badge rounded-pill bg-warning text-dark\"")]),_v(">")]),_v("Warning"),_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("\"badge rounded-pill bg-info text-dark\"")]),_v(">")]),_v("Info"),_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("\"badge rounded-pill bg-light text-dark\"")]),_v(">")]),_v("Light"),_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("\"badge rounded-pill bg-dark\"")]),_v(">")]),_v("Dark"),_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('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',[_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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_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("</"),_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("button")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_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(">")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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("<blockquote>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("blockquote")]),_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("blockquote")]),_v(">")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("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(">")]),_v("\n")]),_c('span',[_v(" default\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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"important"}},[_v("\n important\n")]),_v(" "),_c('box',{attrs:{"type":"wrong"}},[_v("\n wrong\n")]),_v(" "),_c('box',{attrs:{"type":"tip"}},[_v("\n tip\n")]),_v(" "),_c('box',{attrs:{"type":"definition"}},[_v("\n definition\n")]),_v(" "),_c('box',{attrs:{"type":"info","dismissible":""}},[_v("\n dismissible info\n")]),_v(" "),_c('box',{attrs:{"type":"success","icon-size":"2x"},scopedSlots:_u([{key:"header",fn:function(){return [_c('h4',{attrs:{"id":"header"}},[_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(">")]),_v("\n")]),_c('span',[_v(" default\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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("\n default\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"primary"}},[_v("\n primary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"secondary"}},[_v("\n secondary\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"success"}},[_v("\n success\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"danger"}},[_v("\n danger\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"warning"}},[_v("\n warning\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"info"}},[_v("\n info\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"light"}},[_v("\n light\n")]),_v(" "),_c('box',{attrs:{"type":"info","theme":"dark"}},[_v("\n dark\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("MarkBind also supports a light color scheme for boxes")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_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("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("</"),_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("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("</"),_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("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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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("<breadcrumb />")]),_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("<foo>\n")]),_c('span',[_v(" <bar type=\"name\">goo</bar>\n")]),_c('span',[_v("</foo>\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("`<bar type=\"name\">goo</bar>`{.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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 example code block\nbelow for a visual demonstration of all the possible ways of highlighting a code block.")]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("```java {.line-numbers highlight-lines=\"1[:],3['Inventory'],4['It\\'s designed'],5,6[8:18],8[0::2],12[:]-14,16-18,20[12:]-22,24[1::]-26\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("import java.util.List;")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// Inventory is a class that stores inventory items in a list.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("// It's designed as a thin wrapper on the List interface.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("public class Inventory {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" private List<Item> 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("\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")]),_v(" is a class that stores inventory items in a list.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_c('span',[_v("// "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("It's designed")]),_v(" as a thin wrapper on the List interface.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-class"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("class")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("Inventory")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("private")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("List<Item>")]),_v(" items;\n")])]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("public")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("int")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItemCount")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")])]),_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.size();\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" bool "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("isEmpty")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("()")]),_v(" ")]),_v("{\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.isEmpty();\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" }\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" Item "),_c('span',{pre:true,attrs:{"class":"hljs-title"}},[_v("getItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params"}},[_v("(idx: "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("int")]),_v(")")]),_v(" ")]),_v("{")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.get(idx);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("void")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("addItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.add(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-function"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("public")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword highlighted"}},[_v("void")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-title highlighted"}},[_v("removeItem")]),_c('span',{pre:true,attrs:{"class":"hljs-params highlighted"}},[_v("(item: Item)")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" ")])]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{")]),_v("\n")])]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("return")]),_v(" items.remove(item);")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("}")]),_v("\n")]),_c('span',[_v("}\n")]),_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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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:<br>We support page breaks\"}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("<foo></foo>")]),_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:<br>We support page breaks","class":"hljs"}},[_c('span',[_v("<foo></foo>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("<foo>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" <bar type=\"name\">goo</bar>")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("</foo>")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")])]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 `<bar type=\"name\">goo</bar>`{.xml},<br>\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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_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("<foo>\n")]),_c('span',[_v(" <bar type=\"name\">goo</bar>\n")]),_c('span',[_v("</foo>\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("`<bar type=\"name\">goo</bar>`{.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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_v(">")]),_v("\n")]),_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('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("bar")]),_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("<puml width=300>\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("</puml>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 don't have Graphviz installed (ignore this warning if you are on Windows). 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("<puml width=\"300\">\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("</puml>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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('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("<puml>")]),_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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])]),_v(" "),_c('p'),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The alternative text of the diagram.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The height of the diagram in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("name")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The name of the output file.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The URL of the diagram if your diagram is in another "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".puml")]),_v(" file."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td',[_v("The width of the diagram in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the diagram's aspect ratio.")])])])])]),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("<puml width=300>\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("</puml>\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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"}})],1),_v(" "),_c('p',[_c('strong',[_v("Use Case Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/usecase.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Class Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/class.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Activity Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/activity.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Component Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/component.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("State Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/state.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Object Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/object.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Gantt Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/gantt.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Entity Relation Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/entityrelation.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Ditaa Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/ditaa.png"}})],1),_v(" "),_c('p',[_c('strong',[_v("Archimate Diagram")]),_v(":"),_c('br'),_v(" "),_c('pic',{attrs:{"src":"/userGuide/diagrams/archimate.png"}})],1)])])],1)])]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('div',[_c('span',[_c('strong',[_v("Dropdowns")])]),_v(" "),_c('div',[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Action\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"primary\"")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")])]),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"#dropdown\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"dropdown-item\"")]),_v(">")])]),_v("Action"),_c('span',{pre:true,attrs:{"class":"xml"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_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(">")])]),_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":"hljs-name"}},[_v("a")]),_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(">")])]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_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":"hljs-name"}},[_v("a")]),_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(">")])]),_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("dropdown")]),_v(">")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("<!--Notice how header attribute supports inline MarkDown-->")]),_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-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("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-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("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-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-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("</"),_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("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-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',[_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("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- For segmented dropdown, ignore header and add a \"before\" slot -->")]),_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("</"),_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("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-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',[_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("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Right aligned list -->")]),_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-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',[_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("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Inside a Bootstrap button group -->")]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- With slots you can handle some elements as native Bootstrap -->")]),_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("</"),_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("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("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-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("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-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("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-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-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("</"),_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("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-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("ul")]),_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-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-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("</"),_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("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('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("<!-- Nest the dropdown syntax to create dropdown submenus -->")]),_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-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("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-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(" "),_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-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("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-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',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("dropdown")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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":"hljs-name"}},[_v("a")]),_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(">")])]),_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":"hljs-name"}},[_v("a")]),_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(">")])]),_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("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_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":"hljs-name"}},[_v("a")]),_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(">")])]),_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("dropdown")]),_v(">")])]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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:\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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:\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("👍 ❗️ ❌ 🚧")])])],1)])]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('span',{staticClass:"dimmed"},[_c('span',{staticClass:"fas fa-info-circle",attrs:{"aria-hidden":"true"}}),_v(" "),_c('a',{attrs:{"href":"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md"}},[_v("the list of supported emoji")]),_v(".")])])]),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v(":+1: :exclamation: :x: :construction:\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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-66-1"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-66-1"}},[_v("[1]")])])]),_v(" and another."),_c('trigger',{attrs:{"for":"pop:footnotefn-66-2"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-66-2"}},[_v("[2]")])])])],1),_v(" "),_c('p',[_c('strong',[_v("Inline footnotes:")]),_v("\nHere is an inline note."),_c('trigger',{attrs:{"for":"pop:footnotefn-66-3"}},[_c('sup',{staticClass:"footnote-ref"},[_c('a',{attrs:{"aria-describedby":"footnote-label","href":"#fn-66-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("</"),_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('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("<frontmatter>")]),_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("</"),_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('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("</"),_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('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 <include> 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("<title>")]),_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("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(" 1.")]),_v(" Sub item 1.2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("1.")]),_v(" Item 3\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_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',[_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',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This is your header for a Panel, click me to expand!")])]},proxy:true}])},[_v("\n Lorem ipsum ...\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_v("With "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimized")]),_v(" attribute, panel is minimized into an inline block element. The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("alt")]),_v(" attribute is for you to specify the minimized block header.")])]),_v(" "),_c('div',[_c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"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('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://markbind.org/images/logo-lightbackground.png\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("width")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"300\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("alt")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Logo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("eager")]),_v(">")]),_v("\n")]),_c('span',[_v(" MarkBind Logo\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("pic")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo"}},[_v("\n MarkBind Logo\n")]),_v(" "),_c('pic',{attrs:{"src":"https://markbind.org/images/logo-lightbackground.png","width":"300","alt":"Logo","eager":""}},[_v("\n MarkBind Logo\n")])],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("alt")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The alternative text of the image.")])]),_v(" "),_c('tr',[_c('td',[_v("height")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The height of the image in pixels.")])]),_v(" "),_c('tr',[_c('td',[_v("src")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_c('strong',[_v("This must be specified.")]),_c('br'),_v("The URL of the image."),_c('br'),_v("The URL can be specified as absolute or relative references. More info in: "),_c('em',[_c('a',{attrs:{"href":"/userGuide/formattingContents.html#intraSiteLinks"}},[_v("Intra-Site Links")])])])]),_v(" "),_c('tr',[_c('td',[_v("width")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("string")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The width of the image in pixels."),_c('br'),_v("If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.")])]),_v(" "),_c('tr',[_c('td',[_v("eager")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("boolean")])]),_v(" "),_c('td',[_v("false")]),_v(" "),_c('td',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<pic>")]),_v(" component lazy loads its images by default."),_c('br'),_v("If you want to eagerly load the images, simply specify this attribute.")])])])])]),_c('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(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled second tab :x:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Tab not printed\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"d-print-none\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" This tab will not be printed.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Third tab group :milky_way:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Stars :star:\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Some stuff about stars ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled Moon :new_moon:\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Disabled fourth tab group\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("disabled")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Hidden tab\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tab-group")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("tabs")]),_v(">")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])]),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('tabs',[_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("First tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled second tab ❌")]},proxy:true}])}),_v(" "),_c('tab',{staticClass:"d-print-none",scopedSlots:_u([{key:"header",fn:function(){return [_v("Tab not printed")]},proxy:true}])},[_v("\n This tab will not be printed.\n ")]),_v(" "),_c('tab-group',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Third tab group 🌌")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Stars ⭐️")]},proxy:true}])},[_v("\n Some stuff about stars ...\n ")]),_v(" "),_c('tab',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled Moon 🌑")]},proxy:true}])})],1),_v(" "),_c('tab-group',{attrs:{"disabled":""},scopedSlots:_u([{key:"header",fn:function(){return [_v("Disabled fourth tab group")]},proxy:true}])},[_v(" "),_c('tab',{scopedSlots:_u([{key:"header",fn:function(){return [_v("Hidden tab")]},proxy:true}])},[_v("\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.\n ")])],1)],1)],1)],1)]),_v(" "),_c('p',[_c('strong',[_c('strong',[_v("Options")])])]),_v(" "),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tabs")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("active")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Number")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("0")])]),_v(" "),_c('td',[_v("Active Tab index (0-based)")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab is clickable and can be activated.")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tab-group")]),_v(":")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("header")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("null")])]),_v(" "),_c('td',[_v("Tab Group title.")])]),_v(" "),_c('tr',[_c('td',[_v("disabled")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Boolean")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("false")])]),_v(" "),_c('td',[_v("Whether Tab Group is clickable and can be activated.")])])])])]),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Tabs, tab group and individual tab can be omitted during printing by adding Bootstrap's display property "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("class=\"d-print-none\"")]),_v(" to the respective components.")])]),_v(" "),_c('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: Sun, 16 Jul 2023, 10:15: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.0.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-66-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-66-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-66-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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"syntax-cheat-sheet"}}),_v("Syntax Cheat Sheet"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#syntax-cheat-sheet","onclick":"event.stopPropagation()"}})])} +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-65-1"}},[_c('p',[_v("Here is the footnote. Footnotes will appear at the bottom of the page.")])])} +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-66-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.")])])} +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-66-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.")])])} +with(this){return _c('li',{staticClass:"footnote-item",attrs:{"id":"fn-66-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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/templates.html b/userGuide/templates.html index cce91bd..1680081 100644 --- a/userGuide/templates.html +++ b/userGuide/templates.html @@ -3,10 +3,8 @@ <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="generator" content="MarkBind 4.1.0"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>MarkBind - User Guide: Templates - + + MarkBind - User Guide: Templates @@ -14,8 +12,7 @@ - - + @@ -23,12 +20,53 @@ 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


                                        + diff --git a/userGuide/templates.page-vue-render.js b/userGuide/templates.page-vue-render.js index 5eea738..6a23d0f 100644 --- a/userGuide/templates.page-vue-render.js +++ b/userGuide/templates.page-vue-render.js @@ -1,13 +1,37 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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(" "),_m(0),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(1)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_c('pre',[_m(5),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(6),_v(" "),_m(7),_m(8),_v(" "),_c('br')],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(9)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"content-wrapper"}},[_c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Templates")])]),_v(" "),_c('h1',{attrs:{"id":"templates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"templates"}}),_v("Templates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#templates","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("MarkBind allows you to start off your new project with different templates.")]),_v(" "),_c('p',[_v("During initialization you can add a flag "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--template ")]),_v(" to select a different template to initialize with. For example:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("markbind init --template minimal\n")])])]),_c('h2',{attrs:{"id":"supported-templates"}},[_c('span',{staticClass:"anchor",attrs:{"id":"supported-templates"}}),_v("Supported Templates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#supported-templates","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Template key")]),_v(" "),_c('th',[_v("Description")]),_v(" "),_c('th',[_v("Quick Deploy")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("Default")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Default template if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--template")]),_v(" is unspecified. Filled with MarkBind features to guide you to author better content.")]),_v(" "),_c('td',[_c('a',{attrs:{"href":"https://app.netlify.com/start/deploy?repository=https://github.com/MarkBind/init-typical-netlify"}},[_c('img',{attrs:{"src":"https://www.netlify.com/img/deploy/button.svg"}})])])]),_v(" "),_c('tr',[_c('td',[_v("Minimal")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimal")])]),_v(" "),_c('td',[_v("Minimalistic template that gets you started quickly")]),_v(" "),_c('td',[_c('a',{attrs:{"href":"https://app.netlify.com/start/deploy?repository=https://github.com/MarkBind/init-minimal-netlify"}},[_c('img',{attrs:{"src":"https://www.netlify.com/img/deploy/button.svg"}})])])])])])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])} +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Templates")])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/templates.html"}},[_c('em',[_v("User Guide → Templates")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"templates"}},[_v("Templates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#templates","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("MarkBind allows you to start off your new project with different templates.")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("During initialization you can add a flag "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--template ")]),_v(" to select a different template to initialize with. For example:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("markbind init --template minimal\n")])])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"supported-templates"}},[_v("Supported Templates"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#supported-templates","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Template key")]),_v(" "),_c('th',[_v("Description")]),_v(" "),_c('th',[_v("Quick Deploy")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("Default")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default")])]),_v(" "),_c('td',[_v("Default template if "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--template")]),_v(" is unspecified. Includes core features such as site and page navigation for a more convenient quick start.")]),_v(" "),_c('td',[_c('a',{attrs:{"href":"https://app.netlify.com/start/deploy?repository=https://github.com/MarkBind/init-typical-netlify"}},[_c('img',{attrs:{"src":"https://www.netlify.com/img/deploy/button.svg"}})])])]),_v(" "),_c('tr',[_c('td',[_v("Minimal")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("minimal")])]),_v(" "),_c('td',[_v("Minimalistic template that gets you started quickly.")]),_v(" "),_c('td',[_c('a',{attrs:{"href":"https://app.netlify.com/start/deploy?repository=https://github.com/MarkBind/init-minimal-netlify"}},[_c('img',{attrs:{"src":"https://www.netlify.com/img/deploy/button.svg"}})])])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/addingNavigationButtons.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Adding Navigation Buttons")])])])])])])} +},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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/themes.html b/userGuide/themes.html index b133443..f6f2b9e 100644 --- a/userGuide/themes.html +++ b/userGuide/themes.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Themes - + + MarkBind - User Guide: Themes @@ -14,8 +12,7 @@ - - + @@ -23,16 +20,57 @@ 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


                                        + diff --git a/userGuide/themes.page-vue-render.js b/userGuide/themes.page-vue-render.js index 2219c7f..60c2313 100644 --- a/userGuide/themes.page-vue-render.js +++ b/userGuide/themes.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_c('p',[_v("For example, to apply the Cerulean theme, add the following configuration:")]),_v(" "),_m(6),_c('p',[_v("If no such property is specified, your site will be styled with default Bootstrap theme.")]),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_c('div',{staticClass:"container-fluid"},[_c('div',{staticClass:"row"},[_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-cerulean"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-cerulean"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-cerulean")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-cerulean","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/cerulean/"}},[_c('img',{attrs:{"src":"/images/bootswatch/cerulean.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-cosmo"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-cosmo"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-cosmo")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-cosmo","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/cosmo/"}},[_c('img',{attrs:{"src":"/images/bootswatch/cosmo.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-flatly"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-flatly"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-flatly")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-flatly","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/flatly/"}},[_c('img',{attrs:{"src":"/images/bootswatch/flatly.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-journal"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-journal"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-journal")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-journal","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/journal/"}},[_c('img',{attrs:{"src":"/images/bootswatch/journal.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-litera"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-litera"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-litera")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-litera","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/litera/"}},[_c('img',{attrs:{"src":"/images/bootswatch/litera.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-lumen"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-lumen"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-lumen")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-lumen","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/lumen/"}},[_c('img',{attrs:{"src":"/images/bootswatch/lumen.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-lux"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-lux"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-lux")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-lux","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/lux/"}},[_c('img',{attrs:{"src":"/images/bootswatch/lux.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-materia"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-materia"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-materia")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-materia","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/materia/"}},[_c('img',{attrs:{"src":"/images/bootswatch/materia.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-minty"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-minty"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-minty")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-minty","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/minty/"}},[_c('img',{attrs:{"src":"/images/bootswatch/minty.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-pulse"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-pulse"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-pulse")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-pulse","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/pulse/"}},[_c('img',{attrs:{"src":"/images/bootswatch/pulse.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-sandstone"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-sandstone"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-sandstone")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-sandstone","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/sandstone/"}},[_c('img',{attrs:{"src":"/images/bootswatch/sandstone.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-simplex"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-simplex"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-simplex")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-simplex","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/simplex/"}},[_c('img',{attrs:{"src":"/images/bootswatch/simplex.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-sketchy"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-sketchy"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-sketchy")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-sketchy","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/sketchy/"}},[_c('img',{attrs:{"src":"/images/bootswatch/sketchy.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-spacelab"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-spacelab"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-spacelab")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-spacelab","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/spacelab/"}},[_c('img',{attrs:{"src":"/images/bootswatch/spacelab.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-united"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-united"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-united")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-united","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/united/"}},[_c('img',{attrs:{"src":"/images/bootswatch/united.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-yeti"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-yeti"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-yeti")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-yeti","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/yeti/"}},[_c('img',{attrs:{"src":"/images/bootswatch/yeti.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-zephyr"}},[_c('span',{staticClass:"anchor",attrs:{"id":"bootswatch-zephyr"}}),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-zephyr")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-zephyr","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/zephyr/"}},[_c('img',{attrs:{"src":"/images/bootswatch/zephyr.png"}})])])],1)])]),_v(" "),_m(9),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})]),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(10)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_c('p',[_v("For example, to apply the Cerulean theme, add the following configuration:")]),_v(" "),_c('div',{staticClass:"code-block"},[_m(6),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(7),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 no such property is specified, your site will be styled with default Bootstrap theme.")]),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('div',{staticClass:"container-fluid"},[_c('div',{staticClass:"row"},[_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-cerulean"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-cerulean")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-cerulean","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/cerulean/"}},[_c('img',{attrs:{"src":"/images/bootswatch/cerulean.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-cosmo"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-cosmo")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-cosmo","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/cosmo/"}},[_c('img',{attrs:{"src":"/images/bootswatch/cosmo.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-flatly"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-flatly")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-flatly","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/flatly/"}},[_c('img',{attrs:{"src":"/images/bootswatch/flatly.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-journal"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-journal")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-journal","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/journal/"}},[_c('img',{attrs:{"src":"/images/bootswatch/journal.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-litera"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-litera")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-litera","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/litera/"}},[_c('img',{attrs:{"src":"/images/bootswatch/litera.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-lumen"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-lumen")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-lumen","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/lumen/"}},[_c('img',{attrs:{"src":"/images/bootswatch/lumen.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-lux"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-lux")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-lux","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/lux/"}},[_c('img',{attrs:{"src":"/images/bootswatch/lux.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-materia"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-materia")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-materia","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/materia/"}},[_c('img',{attrs:{"src":"/images/bootswatch/materia.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-minty"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-minty")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-minty","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/minty/"}},[_c('img',{attrs:{"src":"/images/bootswatch/minty.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-pulse"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-pulse")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-pulse","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/pulse/"}},[_c('img',{attrs:{"src":"/images/bootswatch/pulse.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-sandstone"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-sandstone")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-sandstone","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/sandstone/"}},[_c('img',{attrs:{"src":"/images/bootswatch/sandstone.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-simplex"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-simplex")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-simplex","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/simplex/"}},[_c('img',{attrs:{"src":"/images/bootswatch/simplex.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-sketchy"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-sketchy")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-sketchy","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/sketchy/"}},[_c('img',{attrs:{"src":"/images/bootswatch/sketchy.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-spacelab"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-spacelab")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-spacelab","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/spacelab/"}},[_c('img',{attrs:{"src":"/images/bootswatch/spacelab.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-united"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-united")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-united","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/united/"}},[_c('img',{attrs:{"src":"/images/bootswatch/united.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-yeti"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-yeti")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-yeti","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/yeti/"}},[_c('img',{attrs:{"src":"/images/bootswatch/yeti.png"}})])])],1),_v(" "),_c('div',{staticClass:"theme-card col-sm-6 col-xl-4"},[_c('box',[_c('div',[_c('h6',{attrs:{"id":"bootswatch-zephyr"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("bootswatch-zephyr")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#bootswatch-zephyr","onclick":"event.stopPropagation()"}})])]),_v(" "),_c('a',{attrs:{"href":"https://bootswatch.com/zephyr/"}},[_c('img',{attrs:{"src":"/images/bootswatch/zephyr.png"}})])])],1)])]),_v(" "),_m(10),_v(" "),_c('br')],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(11)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,22 +11,25 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_c('em',[_v("User Guide → Themes")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"themes"}}),_v("Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#themes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"applying-themes"}},[_v("Applying Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#applying-themes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind supports the ability to style your website with a variety of Bootstrap themes.")])])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"specifying-a-theme"}},[_c('span',{staticClass:"anchor",attrs:{"id":"specifying-a-theme"}}),_v("Specifying a Theme"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-a-theme","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h4',{attrs:{"id":"specifying-a-theme"}},[_v("Specifying a Theme"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#specifying-a-theme","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("You can specify a theme for your site by using the "),_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html#style"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("style.bootstrapTheme")]),_v(" property")]),_v(" of your "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" configuration file.")])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"style\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"bootstrapTheme\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bootswatch-cerulean\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} },function anonymous( ) { -with(this){return _c('h4',{attrs:{"id":"supported-themes"}},[_c('span',{staticClass:"anchor",attrs:{"id":"supported-themes"}}),_v("Supported Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#supported-themes","onclick":"event.stopPropagation()"}})])} +with(this){return _c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"style\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"bootstrapTheme\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"bootswatch-cerulean\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"supported-themes"}},[_v("Supported Themes"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#supported-themes","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Currently, MarkBind supports all light themes from "),_c('a',{attrs:{"href":"https://bootswatch.com/"}},[_v("Bootswatch")]),_v(". Visit each of the theme pages below to see how different visual components are styled.")])} @@ -35,6 +38,6 @@ with(this){return _c('p',[_v("Currently, MarkBind supports all light themes from with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Making the Site Searchable")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/deployingTheSite.html"}},[_c('span',[_c('span',[_v("Deploying the Site")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/tipsAndTricks.html b/userGuide/tipsAndTricks.html index b3526ec..9bbeb9f 100644 --- a/userGuide/tipsAndTricks.html +++ b/userGuide/tipsAndTricks.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Tips & Tricks - + + MarkBind - User Guide: Tips & Tricks @@ -14,8 +12,7 @@ - - + @@ -23,47 +20,233 @@ 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 }}
-

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

                                        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
+

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

                                        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
 [[link](https://example.com)].
-

                                        • Expected output: +

                                        • Expected output: The [link].

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

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

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

                                        Configuring CI platforms to use specific MarkBind version

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

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

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

                                        • 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/*
+

                                          6. Setting up Netlify to use a specific version of MarkBind

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

                                          1. Navigate to the root directory of your site.

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

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

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

                                            node_modules
+

                                          5. Update ignore in site.json to include

                                            node_modules/*
 .gitignore
-

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

                                        Indent components

                                        In some cases, you may want to indent components such as panels and boxes to match the surrounding content. +

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

                                        • Indent components

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

                                        Indent Box component

                                        CODE:

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

                                        OUTPUT:

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

                                        Indent Panel component

                                        CODE:

                                        <panel header="This panel is at level 1">
+

                                        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">
@@ -72,12 +255,59 @@
 <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)
                                        + diff --git a/userGuide/tipsAndTricks.page-vue-render.js b/userGuide/tipsAndTricks.page-vue-render.js index 1d56a47..4caee32 100644 --- a/userGuide/tipsAndTricks.page-vue-render.js +++ b/userGuide/tipsAndTricks.page-vue-render.js @@ -1,17 +1,17 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_c('div',{attrs:{"id":"escapingCharacters"}},[_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("* item 1")]),_v(" "),_c('ul',[_c('li',[_v("item 1")])])])],1)]),_v(" "),_m(7)]),_v(" "),_c('hr'),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_m(11),_v(" "),_m(12),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If using raw-endraw tags outside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" elements, markdown code fences, or inline code, you also need to add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" attribute.")]),_v(" "),_c('p',[_v("For HTML elements, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" attribute needs to be declared as part of the HTML tag:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% raw %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("
                                        \n")]),_c('span',[_v("

                                        {{ content }}

                                        \n")]),_c('span',[_v("
                                        \n")]),_c('span',[_v("\n")]),_c('span',[_v("{% endraw %}\n")])])]),_c('p',[_v("For Markdown elements, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" attribute needs to be declared using "),_c('a',{attrs:{"href":"/userGuide/formattingcontents.html#classes-attributes-and-amp-identifiers"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markdown-it-attrs")])]),_v(", which allows classes, identifiers, and attributed to be added to Markdown syntax:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% raw %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Header with {{ content }} {v-pre}\n")]),_c('span',[_v("\n")]),_c('span',[_v("{% endraw %}\n")])])]),_c('p',[_v("Otherwise, any HTML or Markdown content containing double curly braces will be processed as a variable and will not be displayed properly.")]),_v(" "),_c('p',[_v("Note: This step isn't necessary for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" elements, markdown code fences and inline code because MarkBind automatically adds "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" for them.")])]),_v(" "),_c('hr'),_v(" "),_m(13),_v(" "),_c('p',[_v("When you use links or triggers, you may encounter a situation where an unwanted space is being generated by MarkBind:")]),_v(" "),_m(14),_v(" "),_c('hr'),_v(" "),_m(15),_v(" "),_c('hr'),_v(" "),_c('div',{attrs:{"id":"indentComponents"}},[_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('div',[_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("Some text at level 1")]),_v(" "),_c('box',{staticClass:"ms-4"},[_v("Some text at level 2")]),_v(" "),_c('box',[_v("Some text at level 1")])],1)],1)]),_v(" "),_m(22),_v(" "),_c('div',[_m(23),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{staticClass:"ms-3",scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 2")])]},proxy:true}])},[_v("\n The \"ms-3\" is arbitarily chosen i.e \"ms-0\" to \"ms-5\" are all possible values.\n")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_c('div',{attrs:{"id":"forIndentDemo"}},[_c('box',[_v("Some text from include")])],1),_v(" "),_c('div',[_m(28),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("Some text at level 1 (before included content)")]),_v(" "),_c('div',{staticClass:"ms-5"},[_c('box',[_v("Some text from include")])],1),_v(" "),_c('box',[_v("Some text at level 1 (after included content)")])],1)],1)])]),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tips-and-amp-tricks"}},[_v("Tips & Tricks‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#escaping-characters"}},[_v(" Escaping Characters‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-raw-endraw-to-display-content"}},[_v(" Using {% raw %}{% endraw %} to display {{ content }}‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#unwanted-starting-space-in-links-and-triggers"}},[_v(" Unwanted starting space in links and triggers‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#configuring-online-deployment-platforms-to-use-specific-markbind-version"}},[_v(" Configuring Online Deployment platforms to use specific MarkBind version‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#indent-components"}},[_v(" Indent components‎")])])])],1)])],1),_v(" "),_m(31)])} +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(" "),_m(1),_v(" "),_c('div',{attrs:{"id":"escapingCharacters"}},[_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(5),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(6),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('p',[_v("* item 1")]),_v(" "),_c('ul',[_c('li',[_v("item 1")])])])],1)]),_v(" "),_m(7)]),_v(" "),_c('hr'),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('pre',[_m(10),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(11),_v(" "),_m(12),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("If using raw-endraw tags outside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" elements, markdown code fences, or inline code, you also need to add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" attribute.")]),_v(" "),_c('p',[_v("For HTML elements, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" attribute needs to be declared as part of the HTML tag:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% raw %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("
                                        \n")]),_c('span',[_v("

                                        {{ content }}

                                        \n")]),_c('span',[_v("
                                        \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 ")])])]),_c('p',[_v("For Markdown elements, the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" attribute needs to be declared using "),_c('a',{attrs:{"href":"/userGuide/formattingContents.html#classes-attributes-and-amp-identifiers"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markdown-it-attrs")])]),_v(", which allows classes, identifiers, and attributed to be added to Markdown syntax:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{% raw %}\n")]),_c('span',[_v("\n")]),_c('span',[_v("# Header with {{ content }} {v-pre}\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 ")])])]),_c('p',[_v("Otherwise, any HTML or Markdown content containing double curly braces will be processed as a variable and will not be displayed properly.")]),_v(" "),_c('p',[_v("Note: This step isn't necessary for "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" elements, markdown code fences and inline code because MarkBind automatically adds "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v-pre")]),_v(" for them.")])]),_v(" "),_c('hr'),_v(" "),_m(13),_v(" "),_c('p',[_v("When you use links or triggers, you may encounter a situation where an unwanted space is being generated by MarkBind:")]),_v(" "),_c('ul',[_c('li',[_m(14),_v(" "),_c('pre',[_m(15),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_c('li',[_m(18),_v(" "),_c('pre',[_m(19),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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('div',{attrs:{"id":"useSpecificMarkBind"}},[_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('ul',[_c('li',[_m(23),_v(" "),_c('pre',[_m(24),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(25),_v(" "),_c('pre',[_m(26),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_m(27),_v(" "),_c('p',[_v("Here are the steps to set up Netlify to use a specific version of MarkBind.")]),_v(" "),_c('ol',[_m(28),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_c('li',[_m(31),_v(" "),_c('pre',[_m(32),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(33),_v(" "),_c('pre',[_m(34),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(35)])]),_v(" "),_c('hr'),_v(" "),_c('div',{attrs:{"id":"indentComponents"}},[_m(36),_v(" "),_m(37),_v(" "),_m(38),_v(" "),_c('div',[_m(39),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(40),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(41),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("Some text at level 1")]),_v(" "),_c('box',{staticClass:"ms-4"},[_v("Some text at level 2")]),_v(" "),_c('box',[_v("Some text at level 1")])],1)],1)]),_v(" "),_m(42),_v(" "),_c('div',[_m(43),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(44),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(45),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")]),_v(" "),_c('panel',{staticClass:"ms-3",scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 2")])]},proxy:true}])},[_v("\n The \"ms-3\" is arbitarily chosen i.e \"ms-0\" to \"ms-5\" are all possible values.\n")]),_v(" "),_c('panel',{scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("This panel is at level 1")])]},proxy:true}])},[_v("\n ...\n")])],1)],1)]),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_c('div',{attrs:{"id":"forIndentDemo"}},[_c('box',[_v("Some text from include")])],1),_v(" "),_c('div',[_m(48),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(49),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(50),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('box',[_v("Some text at level 1 (before included content)")]),_v(" "),_c('div',{staticClass:"ms-5"},[_c('box',[_v("Some text from include")])],1),_v(" "),_c('box',[_v("Some text at level 1 (after included content)")])],1)],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":"#tips-and-amp-tricks"}},[_v("Tips & Tricks‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#escaping-characters"}},[_v(" Escaping Characters‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-raw-endraw-to-display-content"}},[_v(" Using {% raw %}{% endraw %} to display {{ content }}‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#unwanted-starting-space-in-links-and-triggers"}},[_v(" Unwanted starting space in links and triggers‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#configuring-online-deployment-platforms-to-use-specific-markbind-version"}},[_v(" Configuring Online Deployment platforms to use specific MarkBind version‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#indent-components"}},[_v(" Indent components‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(51)])} }; var pageVueStaticRenderFns = [function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Tips & Tricks")])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"tips-and-amp-tricks"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tips-and-amp-tricks"}}),_v("Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"tips-and-amp-tricks"}},[_v("Tips & Tricks"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tips-and-amp-tricks","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"escaping-characters"}},[_c('span',{staticClass:"anchor",attrs:{"id":"escaping-characters"}}),_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Escaping Characters"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#escaping-characters","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"escaping-characters"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Escaping Characters"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#escaping-characters","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("For Markdown syntax: To display a literal character that are normally used for Markdown formatting, add a backslash ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("\\")]),_v(") in front of the character.")])} @@ -20,7 +20,7 @@ with(this){return _c('p',[_v("For Markdown syntax: To display a literal characte with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\\"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("* item 1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")]),_v(" item 1\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\\"),_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("* item 1")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-emphasis"}},[_v("*")]),_v(" item 1\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -29,13 +29,13 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('p',[_c('small',[_v("More info: "),_c('a',{attrs:{"href":"https://www.markdownguide.org/basic-syntax#escaping-characters"}},[_v("https://www.markdownguide.org/basic-syntax#escaping-characters")])])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"using-raw-endraw-to-display-content"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-raw-endraw-to-display-content"}}),_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Using {% raw %}{% endraw %} to display "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ content }}")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-raw-endraw-to-display-content","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"using-raw-endraw-to-display-content"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Using {% raw %}{% endraw %} to display "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ content }}")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-raw-endraw-to-display-content","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("By default, MarkBind processes any code in the form of "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ content }}")]),_v(". This is because Nunjucks (which is "),_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html#support-for-nunjucks"}},[_v("supported by MarkBind")]),_v(") uses this syntax to "),_c('a',{attrs:{"href":"https://mozilla.github.io/nunjucks/templating.html#variables"}},[_v("evaluate an expression, variable, or function calls")]),_v(". For instance:")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{{ username }}\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("{{ username }}\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("This will not display "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ username }}")]),_v(" as a raw string, but instead, look up the variable "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("username")]),_v(" from the context and display its value.")])} @@ -44,16 +44,76 @@ with(this){return _c('p',[_v("This will not display "),_c('code',{pre:true,attrs with(this){return _c('p',[_v("In general, to use this syntax as a raw string in a code block or a template, there are "),_c('a',{attrs:{"href":"https://jinja.palletsprojects.com/en/3.0.x/templates/#escaping"}},[_v("two methods")]),_v(" available. The syntax can either be encased as a variable like "),_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(", or alternatively, the entire code block can be encased with the raw-endraw tags: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{% raw %} {{ content }} {% endraw %}")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"unwanted-starting-space-in-links-and-triggers"}},[_c('span',{staticClass:"anchor",attrs:{"id":"unwanted-starting-space-in-links-and-triggers"}}),_c('span',{staticClass:"fas fa-info",attrs:{"aria-hidden":"true"}}),_v(" Unwanted starting space in links and triggers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#unwanted-starting-space-in-links-and-triggers","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"unwanted-starting-space-in-links-and-triggers"}},[_c('span',{staticClass:"fas fa-info",attrs:{"aria-hidden":"true"}}),_v(" Unwanted starting space in links and triggers"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#unwanted-starting-space-in-links-and-triggers","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('ul',[_c('li',[_c('p',[_v("Code:"),_c('br')]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("The\n")]),_c('span',[_v("[[link](https://example.com)].\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Expected output:\n"),_c('code',{pre:true},[_v("The ["),_c('a',{pre:true,attrs:{"href":"https://example.com"}},[_v("link")]),_v("].")])])]),_v(" "),_c('li',[_c('p',[_v("Actual output (notice the additional space in front of the link):\n"),_c('code',{pre:true},[_v("The [ "),_c('a',{pre:true,attrs:{"href":"https://example.com"}},[_v("link")]),_v("].")])])]),_v(" "),_c('li',[_c('p',[_v("Solution:\nWrap the link or trigger around with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags.")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("The\n")]),_c('span',[_v("[[link](https://example.com)].\n")])])])])])} +with(this){return _c('p',[_v("Code:"),_c('br')])} },function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"useSpecificMarkBind"}},[_c('h5',{attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}},[_c('span',{staticClass:"anchor",attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}}),_c('span',{staticClass:"fas fa-info",attrs:{"aria-hidden":"true"}}),_v(" Configuring Online Deployment platforms to use specific MarkBind version"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#configuring-online-deployment-platforms-to-use-specific-markbind-version","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('strong',[_v("Configuring CI platforms to use specific MarkBind version")])]),_v(" "),_c('p',[_v("When the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#using-ci-platforms"}},[_v("default CI configuration for deployment")]),_v(" is used, the latest version of MarkBind will be used in the CI workflows. This may be a later version of MarkBind than the one you use locally.")]),_v(" "),_c('ul',[_c('li',[_c('p',[_v("If you want to specify a version of MarkBind (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v1.6.3")]),_v("), you have to modify the step where "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind-cli")]),_v(" is being installed to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm i -g markbind-cli@v1.6.3")]),_v(". For example, for Travis-CI, you can modify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("install")]),_v(" step in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" as follows:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@1.6.3")]),_v("\n")])])])]),_v(" "),_c('li',[_c('p',[_v("If you want to use the latest minor version automatically until the next major version (as major versions usually contain breaking changes), you can add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("^")]),_v(" in front of the version number. In the example below, Travis will use the latest version of MarkBind but will stop before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2.*")])]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@^1.6.3")]),_v("\n")])])])])]),_v(" "),_c('p',[_c('strong',[_v("Setting up Netlify to use a specific version of MarkBind")])]),_v(" "),_c('p',[_v("Here are the steps to set up Netlify to use a specific version of MarkBind.")]),_v(" "),_c('ol',[_c('li',[_c('p',[_v("Navigate to the root directory of your site.")])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm init")]),_v(" which will create "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.lock.json")])])]),_v(" "),_c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm install markbind-cli@1.6.3 --save")]),_v(" to install MarkBind as a dependency (using v1.6.3 as an example)")])]),_v(" "),_c('li',[_c('p',[_v("Create / Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file in the root directory and add:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("node_modules\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")]),_v(" in site.json to include")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("node_modules/*\n")]),_c('span',[_v(".gitignore\n")])])])]),_v(" "),_c('li',[_c('p',[_v("Now, follow the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-netlify"}},[_v("previous instructions for setting up Netlify")]),_v(" but with the following difference:"),_c('br'),_v("\nIn step 5, Set the "),_c('mark',[_v("Build Command")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build --baseUrl")])])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("The\n")]),_c('span',[_v("[[link](https://example.com)].\n")])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"indent-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"indent-components"}}),_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Indent components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#indent-components","onclick":"event.stopPropagation()"}})])} +with(this){return _c('li',[_c('p',[_v("Expected output:\n"),_c('code',{pre:true},[_v("The ["),_c('a',{pre:true,attrs:{"href":"https://example.com"}},[_v("link")]),_v("].")])])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("Actual output (notice the additional space in front of the link):\n"),_c('code',{pre:true},[_v("The [ "),_c('a',{pre:true,attrs:{"href":"https://example.com"}},[_v("link")]),_v("].")])])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Solution:\nWrap the link or trigger around with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags.")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("The\n")]),_c('span',[_v("[[link](https://example.com)].\n")])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"configuring-online-deployment-platforms-to-use-specific-markbind-version"}},[_c('span',{staticClass:"fas fa-info",attrs:{"aria-hidden":"true"}}),_v(" Configuring Online Deployment platforms to use specific MarkBind version"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#configuring-online-deployment-platforms-to-use-specific-markbind-version","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Configuring CI platforms to use specific MarkBind version")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("When the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#using-ci-platforms"}},[_v("default CI configuration for deployment")]),_v(" is used, the latest version of MarkBind will be used in the CI workflows. This may be a later version of MarkBind than the one you use locally.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you want to specify a version of MarkBind (eg. "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("v1.6.3")]),_v("), you have to modify the step where "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind-cli")]),_v(" is being installed to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm i -g markbind-cli@v1.6.3")]),_v(". For example, for Travis-CI, you can modify the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("install")]),_v(" step in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".travis.yml")]),_v(" as follows:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@1.6.3")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("If you want to use the latest minor version automatically until the next major version (as major versions usually contain breaking changes), you can add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("^")]),_v(" in front of the version number. In the example below, Travis will use the latest version of MarkBind but will stop before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("2.*")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs yaml"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("install:")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-bullet"}},[_v("-")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("npm")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("i")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("-g")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("markbind-cli@^1.6.3")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Setting up Netlify to use a specific version of MarkBind")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("Navigate to the root directory of your site.")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm init")]),_v(" which will create "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.json")]),_v(" and "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("package.lock.json")])])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("Run "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("npm install markbind-cli@1.6.3 --save")]),_v(" to install MarkBind as a dependency (using v1.6.3 as an example)")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Create / Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".gitignore")]),_v(" file in the root directory and add:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("node_modules\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Update "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("ignore")]),_v(" in site.json to include")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("node_modules/*\n")]),_c('span',[_v(".gitignore\n")])])} +},function anonymous( +) { +with(this){return _c('li',[_c('p',[_v("Now, follow the "),_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html#deploying-to-netlify"}},[_v("previous instructions for setting up Netlify")]),_v(" but with the following difference:"),_c('br'),_v("\nIn step 5, Set the "),_c('mark',[_v("Build Command")]),_v(" to "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind build --baseUrl")])])])} +},function anonymous( +) { +with(this){return _c('h5',{attrs:{"id":"indent-components"}},[_c('span',{staticClass:"fas fa-lightbulb",attrs:{"aria-hidden":"true"}}),_v(" Indent components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#indent-components","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("In some cases, you may want to indent components such as panels and boxes to match the surrounding content.\nThis is easily achieved by adding some margin and padding utility classes from "),_c('a',{attrs:{"href":"https://getbootstrap.com/docs/5.1/utilities/spacing/"}},[_v("Bootstrap")]),_v("\nto the component. The following examples show how to do this.")])} @@ -65,7 +125,7 @@ with(this){return _c('p',[_c('strong',[_v("Indent Box component")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-4\"")]),_v(">")]),_v("Some text at level 2"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-4\"")]),_v(">")]),_v("Some text at level 2"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -77,7 +137,7 @@ with(this){return _c('p',[_c('strong',[_v("Indent Panel component")])])} with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-3\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" The \"ms-3\" is arbitarily chosen i.e \"ms-0\" to \"ms-5\" are all possible values.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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 panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 2\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-3\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" The \"ms-3\" is arbitarily chosen i.e \"ms-0\" to \"ms-5\" are all possible values.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"This panel is at level 1\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" ...\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -92,12 +152,12 @@ with(this){return _c('p',[_v("The following box component will be included via " with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1 (before included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tipsAndTricks.md#forIndentDemo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-5\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1 (after included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,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("Some text at level 1 (before included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("include")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"tipsAndTricks.md#forIndentDemo\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"ms-5\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("box")]),_v(">")]),_v("Some text at level 1 (after included content)"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/troubleshooting.html b/userGuide/troubleshooting.html index 19a8852..9c84cf8 100644 --- a/userGuide/troubleshooting.html +++ b/userGuide/troubleshooting.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Troubleshooting - + + MarkBind - User Guide: Troubleshooting @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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">
 
 Animal | Trainable? | Price | Remarks
@@ -34,7 +41,23 @@
 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
@@ -43,9 +66,40 @@
 Bees   |     no     |    20 |
 Cats   |    yes     |   100 |
 </div>
-
                                        +
                                        + diff --git a/userGuide/troubleshooting.page-vue-render.js b/userGuide/troubleshooting.page-vue-render.js index 61b5e78..42da17e 100644 --- a/userGuide/troubleshooting.page-vue-render.js +++ b/userGuide/troubleshooting.page-vue-render.js @@ -1,34 +1,34 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_c('p',[_v("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.")]),_v(" "),_c('p',[_v("Incorrect HTML markup can be due to:")]),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_c('p',[_v("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.")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Underlying Error (Example)")])]},proxy:true}])},[_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("vue.js:634 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.\n")]),_c('span',[_v("This is likely caused by incorrect HTML markup, for example nesting block-level elements inside `

                                        `,\n")]),_c('span',[_v("or missing ``.\n")]),_c('span',[_v("Bailing hydration and performing full client-side render.\n")])])]),_c('p',[_v("See "),_c('a',{attrs:{"href":"https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch"}},[_v("SSR guide for Vue")]),_v(" for more details on hydration mismatch.")])]),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{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":"#troubleshooting"}},[_v("Troubleshooting‎")]),_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":"#html-rendering-issues"}},[_v("HTML Rendering Issues‎")])])])],1)])],1),_v(" "),_m(8)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_c('p',[_v("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.")]),_v(" "),_c('p',[_v("Incorrect HTML markup can be due to:")]),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_c('pre',[_m(5),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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 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.")]),_v(" "),_c('panel',{attrs:{"type":"seamless"},scopedSlots:_u([{key:"header",fn:function(){return [_c('p',[_v("Underlying Error (Example)")])]},proxy:true}])},[_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("vue.js:634 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.\n")]),_c('span',[_v("This is likely caused by incorrect HTML markup, for example nesting block-level elements inside `

                                        `,\n")]),_c('span',[_v("or missing ``.\n")]),_c('span',[_v("Bailing hydration and performing full client-side render.\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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":"https://vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch"}},[_v("SSR guide for Vue")]),_v(" for more details on hydration mismatch.")])]),_v(" "),_m(6),_v(" "),_c('pre',[_m(7),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('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":"#troubleshooting"}},[_v("Troubleshooting‎")]),_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":"#html-rendering-issues"}},[_v("HTML Rendering Issues‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(8)])} }; var pageVueStaticRenderFns = [function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Troubleshooting")])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"troubleshooting"}},[_c('span',{staticClass:"anchor",attrs:{"id":"troubleshooting"}}),_v("Troubleshooting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#troubleshooting","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"troubleshooting"}},[_v("Troubleshooting"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#troubleshooting","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"html-rendering-issues"}},[_c('span',{staticClass:"anchor",attrs:{"id":"html-rendering-issues"}}),_v("HTML Rendering Issues"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#html-rendering-issues","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"html-rendering-issues"}},[_v("HTML Rendering Issues"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#html-rendering-issues","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('ul',[_c('li',[_v("nesting block-level elements inside "),_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(" elements")]),_v(" "),_c('li',[_v("missing "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tags")])])} },function anonymous( ) { -with(this){return _c('h6',{attrs:{"id":"example-block-level-elements-inside-span-elements"}},[_c('span',{staticClass:"anchor",attrs:{"id":"example-block-level-elements-inside-span-elements"}}),_v("Example: block-level elements inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" elements"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#example-block-level-elements-inside-span-elements","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h6',{attrs:{"id":"example-block-level-elements-inside-span-elements"}},[_v("Example: block-level elements inside "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" elements"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#example-block-level-elements-inside-span-elements","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"example\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_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('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _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("span")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"example\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_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('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("A possible fix for the above situation is to wrap the table in a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

                                        ")]),_v(" element instead:")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"example\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_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('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _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("\"example\"")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_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('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/tweakingThePageStructure.html b/userGuide/tweakingThePageStructure.html index 5c0ffc4..d301df6 100644 --- a/userGuide/tweakingThePageStructure.html +++ b/userGuide/tweakingThePageStructure.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Tweaking the Page Structure - + + MarkBind - User Guide: Tweaking the Page Structure @@ -14,8 +12,7 @@ - - + @@ -23,31 +20,162 @@ 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.
                                        +You can use YAML-style frontmatter syntax --- as well.

                                        Frontmatter YAML-style Frontmatter Syntax
                                        <frontmatter>
   property1: value1
   property2: value2
 </frontmatter>
-

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

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

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

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

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

                                        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",
-    }
-  ],
-}
-

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

                                        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",
+    }
+  ],
+}
+

                                        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>
@@ -61,10 +189,10 @@
     <li>
       <a highlight-on="exact" href="{{baseUrl}}/index.html" class="nav-link">HOME</a>
     </li>
-    <li tags="environment--ug">
+    <li tags="environment--ug environment--combined">
       <a highlight-on="sibling-or-child" href="{{baseUrl}}/userGuide/index.html" class="nav-link">USER GUIDE</a>
     </li>
-    <li tags="environment--dg">
+    <li tags="environment--dg environment--combined">
       <a highlight-on="sibling-or-child" href="{{baseUrl}}/devGuide/index.html" class="nav-link">DEVELOPER GUIDE</a>
     </li>
     <li slot="right">
@@ -117,9 +245,25 @@
     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,
+

                                        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,
 #page-nav {
     position: sticky;
     /*
@@ -134,7 +278,23 @@
     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. 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>
+

                                        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)
@@ -143,29 +303,93 @@
   * [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, * Docs :expanded: will make the menu item Docs expand by default.

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

                                        Constructing a page navigation menu


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

                                        Adding a pageNav

                                        1. Specify the smallest heading level you want to be included within the <frontmatter> of a page with 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 +

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

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

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

                                        Plugin: Tags

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

                                        Toggling alternative contents

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

                                        Example Attaching tags to elements:

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

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

                                        {
+

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

                                        {
   ...
   "plugins" : [
     "filterTags"
@@ -176,20 +400,100 @@
     }
   }
 }
-

                                        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
+

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

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

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

                                        Example Attaching multiple tags to an element:

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

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

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

                                        Example Specifying tags in frontmatter:

                                        <frontmatter>
+

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

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

                                        Example Specifying tags in frontmatter:

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

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

                                        Advanced Tagging Tips

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

                                        Example Using general tags:

                                        <frontmatter>
+

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

                                        Advanced Tagging Tips

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

                                        Example Using general tags:

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

                                        All 3 <p>s will be shown.

                                        Hiding Tags

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

                                        Example Using general tags:

                                        index.md
                                        <frontmatter>
+

                                        All 3 <p>s will be shown.

                                        Hiding Tags

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

                                        Example Using general tags:

                                        index.md
                                        <frontmatter>
   title: "Hello World"
   tags: ["language--java"]
 </frontmatter>
@@ -205,7 +525,23 @@
 <p tags="language--java">System.out.println("Hello world");</p>
 <p tags="language--C#">Console.WriteLine("Hello world");</p>
 <p tags="language--python">print("Hello world")</p>
-
                                        site.json
                                        {
+
                                        site.json
                                        {
   ...
   "plugins" : [
     "filterTags"
@@ -216,12 +552,44 @@
     }
   }
 }
-

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

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

                                        # Print 'Hello world'
+

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

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

                                        # Print 'Hello world'
 
 <p tags="language--java">System.out.println("Hello world");</p>
 <p tags="language--C#">Console.WriteLine("Hello world");</p>
 <p tags="language--python">print("Hello world")</p>
-
                                        {
+
                                        {
   ...
   "plugins" : [
     "filterTags"
@@ -232,9 +600,40 @@
     }
   }
 }
-

                                        Using HTML, JavaScript, CSS

                                        Reusing Contents


                                        +

                                        Using HTML, JavaScript, CSS

                                        Reusing Contents


                                        + diff --git a/userGuide/tweakingThePageStructure.page-vue-render.js b/userGuide/tweakingThePageStructure.page-vue-render.js index f257633..0d1c574 100644 --- a/userGuide/tweakingThePageStructure.page-vue-render.js +++ b/userGuide/tweakingThePageStructure.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_m(6),_m(7),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_c('p',[_v("Should you need more expressive formatting, or encounter any issues when formatting the frontmatter, note that the frontmatter follows the "),_c('a',{attrs:{"href":"https://yaml.org/refcard.html"}},[_v("YAML")]),_v(" spec.")])]),_v(" "),_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(" "),_m(8),_v(" "),_m(9),_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("")]),_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('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(" "),_m(10)],1),_v(" "),_c('hr'),_v(" "),_m(11),_v(" "),_c('p',[_v("MarkBind layouts can be used to provide structure and content around pages easily.")]),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("If no layout is specified, the page defaults to the default layout ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default.md")]),_v(").")]),_v(" "),_c('p',[_v("When using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(", a default layout is provided in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/layouts")]),_v(" folder.")])]),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_c('p',[_v("The rest of this section explains the other convenient features MarkBind provides in its layouts system, and references\nthe above code snippet.")]),_v(" "),_c('br'),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_c('hr'),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("The scripts inserted here are processed last, after all of MarkBind's processing.")]),_v(" "),_c('p',[_v("If you wish insert scripts at the bottom, before MarkBind's scripts, simply insert them into the bottom of the layout file.")])]),_v(" "),_c('hr'),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_c('p',[_v("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.")]),_v(" "),_m(29),_v(" "),_m(30),_c('hr'),_v(" "),_m(31),_v(" "),_c('br'),_v(" "),_c('div',[_m(32),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_m(33),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_m(34),_v(" "),_m(35),_v(" "),_m(36),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")])])])])])])],1)],1)],1)])]),_v(" "),_m(37),_v(" "),_m(38),_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("* Docs :expanded:")]),_v(" will make the menu item "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Docs")]),_v(" expand by default.")]),_v(" "),_m(39)]),_v(" "),_c('hr'),_v(" "),_m(40),_v(" "),_c('br'),_v(" "),_c('div',[_m(41),_v(" "),_m(42),_v(" "),_c('ol',[_c('li',[_c('p',[_c('strong',[_v("Specify the smallest heading level you want to be included")]),_v(" within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" of a page with "),_c('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(" "),_m(43),_v(" "),_m(44),_v(" "),_m(45),_v(" "),_m(46)]),_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("")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("Table of Contents")])])])])]),_v(" "),_c('p',[_v("You can specify multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("")]),_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("")]),_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('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(" "),_m(47)],1),_v(" "),_c('hr'),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#tweaking-the-page-structure"}},[_v("Tweaking the Page Structure‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#frontmatter"}},[_v("Frontmatter‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#layouts"}},[_v("Layouts‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#inserting-content-into-the-head"}},[_v("Inserting content into the ‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#inserting-scripts-after-the-body-tag"}},[_v("Inserting scripts after the tag‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#sticking-the-header-to-the-top"}},[_v("Sticking the header to the top‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#constructing-a-site-navigation-menu-easily"}},[_v("Constructing a site navigation menu easily‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#constructing-a-page-navigation-menu"}},[_v("Constructing a page navigation menu‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-tags"}},[_v("Plugin: Tags‎")])])])],1)])],1),_v(" "),_m(50)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('div',[_m(4),_v(" "),_m(5),_v(" "),_c('div',{staticClass:"indented"},[_c('div',[_c('table',{staticStyle:{"width":"100%"}},[_c('tbody',[_m(6),_v(" "),_c('tr',[_c('td',{staticStyle:{"padding-right":"5%"}},[_c('pre',[_m(7),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(8),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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"},[_m(9),_v(" "),_c('div',[_c('table',{staticStyle:{"width":"100%"}},[_c('tbody',[_m(10),_v(" "),_c('tr',[_c('td',{staticStyle:{"padding-right":"5%"}},[_c('pre',[_m(11),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(12),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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(" "),_m(13),_v(" "),_m(14),_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("")]),_v("\n")])]),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(15),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('hr'),_v(" "),_m(16),_v(" "),_c('p',[_v("MarkBind layouts can be used to provide structure and content around pages easily.")]),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("If no layout is specified, the page defaults to the default layout ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("default.md")]),_v(").")]),_v(" "),_c('p',[_v("When using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("markbind init")]),_v(", a default layout is provided in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/layouts")]),_v(" folder.")])]),_v(" "),_m(19),_v(" "),_c('div',{attrs:{"id":"layout-code-snippet"}},[_c('pre',[_m(20),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.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("The rest of this section explains the other convenient features MarkBind provides in its layouts system, and references\nthe above code snippet.")]),_v(" "),_c('br'),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_c('hr'),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_c('box',{attrs:{"type":"info","seamless":""}},[_c('p',[_v("The scripts inserted here are processed last, after all of MarkBind's processing.")]),_v(" "),_c('p',[_v("If you wish insert scripts at the bottom, before MarkBind's scripts, simply insert them into the bottom of the layout file.")])]),_v(" "),_c('hr'),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_m(30),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_m(33),_v(" "),_c('p',[_v("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.")]),_v(" "),_m(34),_v(" "),_c('pre',[_m(35),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('hr'),_v(" "),_m(36),_v(" "),_c('br'),_v(" "),_c('div',[_m(37),_v(" "),_c('p',[_v("Steps to add a siteNav:")]),_v(" "),_m(38),_v(" "),_c('div',{attrs:{"id":"short"}},[_c('div',[_m(39),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(40),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(41),_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(" "),_m(42),_v(" "),_m(43),_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('hr'),_v(" "),_m(44),_v(" "),_c('br'),_v(" "),_c('div',[_m(45),_v(" "),_m(46),_v(" "),_c('ol',[_c('li',[_c('p',[_c('strong',[_v("Specify the smallest heading level you want to be included")]),_v(" within the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" of a page with "),_c('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(" "),_m(47),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_m(50)]),_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("")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("Table of Contents")])])])])]),_v(" "),_c('p',[_v("You can specify multiple "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("")]),_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("")]),_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"}},[_m(51),_v(" "),_c('pre',[_m(52),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(53)])],1),_v(" "),_c('hr'),_v(" "),_c('div',[_m(54),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_m(55),_v(" "),_m(56),_v(" "),_c('div',{staticClass:"indented"},[_m(57),_v(" "),_c('pre',[_m(58),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(59),_v(" "),_c('pre',[_m(60),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(61)]),_v(" "),_m(62),_v(" "),_m(63),_v(" "),_c('div',{staticClass:"indented"},[_m(64),_v(" "),_c('pre',[_m(65),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(66)]),_v(" "),_c('p',[_v("Alternatively, you can specify tags to render for a page in the frontmatter.")]),_v(" "),_c('div',{staticClass:"indented"},[_m(67),_v(" "),_c('pre',[_m(68),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(69),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(70),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(71),_v(" "),_m(72),_v(" "),_m(73),_v(" "),_c('div',{staticClass:"indented"},[_m(74),_v(" "),_c('pre',[_m(75),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(76)]),_v(" "),_m(77),_v(" "),_m(78),_v(" "),_c('div',{staticClass:"indented"},[_m(79),_v(" "),_c('div',{staticClass:"code-block"},[_m(80),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(81),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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"},[_m(82),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(83),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_m(84)]),_v(" "),_m(85),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(86),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(87),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_v(" "),_m(88),_v(" "),_c('br')],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":"#tweaking-the-page-structure"}},[_v("Tweaking the Page Structure‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#frontmatter"}},[_v("Frontmatter‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#layouts"}},[_v("Layouts‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#inserting-content-into-the-head"}},[_v("Inserting content into the ‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#inserting-scripts-after-the-body-tag"}},[_v("Inserting scripts after the tag‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#sticking-the-header-to-the-top"}},[_v("Sticking the header to the top‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#constructing-a-site-navigation-menu-easily"}},[_v("Constructing a site navigation menu easily‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#constructing-a-page-navigation-menu"}},[_v("Constructing a page navigation menu‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-tags"}},[_v("Plugin: Tags‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(89)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,22 +11,37 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_c('em',[_v("User Guide → Tweaking the Page Structure")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"tweaking-the-page-structure"}},[_c('span',{staticClass:"anchor",attrs:{"id":"tweaking-the-page-structure"}}),_v("Tweaking the Page Structure"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tweaking-the-page-structure","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"tweaking-the-page-structure"}},[_v("Tweaking the Page Structure"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#tweaking-the-page-structure","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"lead",attrs:{"id":"overview"}},[_c('strong',[_v("MarkBind offers several ways to easily tweak the overall structure of a page")]),_v(", for example, using headers, footers, scripts, or stylesheets.")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"frontmatter"}},[_c('span',{staticClass:"anchor",attrs:{"id":"frontmatter"}}),_v("Frontmatter"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#frontmatter","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"frontmatter"}},[_v("Frontmatter"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#frontmatter","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _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(" To 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.")])} +with(this){return _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.")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _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")])])} },function anonymous( ) { -with(this){return _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('pre',[_c('code',{pre:true,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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" property1: value1\n")]),_c('span',[_v(" property2: value2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('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")])])} +},function anonymous( +) { +with(this){return _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(".")])} +},function anonymous( +) { +with(this){return _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")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("---\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_v("---\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("Page properties:")])])} @@ -35,10 +50,10 @@ with(this){return _c('p',[_c('strong',[_v("Page properties:")])])} with(this){return _c('ul',[_c('li',[_c('strong',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("title")])]),_v(": The title of the page. Will be used as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" attribute of the HTML page generated.")]),_v(" "),_c('li',[_v("Other properties such as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("keywords")]),_v(", "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("layout")]),_v(", etc. will be explained in other places of this user guide.")])])} },function anonymous( ) { -with(this){return _c('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")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: Binary Search Tree\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"layouts"}},[_c('span',{staticClass:"anchor",attrs:{"id":"layouts"}}),_v("Layouts"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#layouts","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"layouts"}},[_v("Layouts"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#layouts","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("To add a layout, first add any source file to the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/layouts")]),_v(" folder. Then, specify the layout the page will use using one of the following:")])} @@ -50,10 +65,10 @@ with(this){return _c('ul',[_c('li',[_v("the "),_c('a',{attrs:{"href":"/userGuide with(this){return _c('p',[_v("Next, edit the layout file to your liking, and add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{{ content }}")]),_v(" variable where you want the page content to be rendered.")])} },function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"layout-code-snippet"}},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use head-top and head-bottom tags to insert content into the HTML <head> tag -->")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")])]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- 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 highlighted"}},[_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\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/userGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("USER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"environment--dg\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("highlight-on")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"sibling-or-child\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/devGuide/index.html\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-link\"")]),_v(">")]),_v("DEVELOPER GUIDE"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("slot")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"right\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"navbar-form\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":data")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchData\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v(":on-hit")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchCallback\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("form")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("li")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("navbar")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("header")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"flex-body\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-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',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the page's content into the layout using the {{ content }} variable -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{{ content }}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert a page navigation menu using the <page-nav /> component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav")]),_v(" />")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert content after the HTML <body> tag using the <script-bottom> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}})]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")])]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Use head-top and head-bottom tags to insert content into the HTML <head> tag -->")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("link")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("rel")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"stylesheet\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"{{baseUrl}}/css/main.css\"")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("head-bottom")]),_v(">")])]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- 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 highlighted"}},[_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',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * **Authoring Contents** :expanded:\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Overview]({{baseUrl}}/userGuide/authoringContents.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Formatting Contents]({{baseUrl}}/userGuide/formattingContents.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" * [Using Components]({{baseUrl}}/userGuide/usingComponents.html)\n")]),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("site-nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"content-wrapper\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert the page's content into the layout using the {{ content }} variable -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_v("{{ content }}")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"page-nav\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"nav-component slim-scroll\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert a page navigation menu using the <page-nav /> component -->")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("page-nav")]),_v(" />")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("nav")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("class")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text-center\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("[Generated by {{MarkBind}} on {{timestamp}}]"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("br")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("This site is powered by "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("href")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://www.netlify.com/\"")]),_v(">")]),_v("Netlify"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("a")]),_v(">")]),_v("."),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("small")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("footer")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("<!-- Insert content after the HTML <body> tag using the <script-bottom> tag -->")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")])]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}})]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" alert("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Hi!'")]),_v(")")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"highlighted"}},[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script-bottom")]),_v(">")])]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"inserting-content-into-the-head"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inserting-content-into-the-head"}}),_v("Inserting content into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head>")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inserting-content-into-the-head","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"inserting-content-into-the-head"}},[_v("Inserting content into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head>")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inserting-content-into-the-head","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("You can insert code into the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head>")]),_v(" section of the generated HTML page")]),_v(", for example, to add links to custom JavaScript or CSS files.")])} @@ -65,7 +80,7 @@ with(this){return _c('p',[_v("You may do so by inserting the HTML "),_c('code',{ with(this){return _c('p',[_v("The above example shows the use of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<head-bottom>")]),_v(" tag to insert a custom stylesheet ("),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("main.css")]),_v(").")])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"inserting-scripts-after-the-body-tag"}},[_c('span',{staticClass:"anchor",attrs:{"id":"inserting-scripts-after-the-body-tag"}}),_v("Inserting scripts after the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<body>")]),_v(" tag"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inserting-scripts-after-the-body-tag","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"inserting-scripts-after-the-body-tag"}},[_v("Inserting scripts after the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<body>")]),_v(" tag"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#inserting-scripts-after-the-body-tag","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("You may also insert HTML code after the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<body>")]),_v(" section of the generated HTML page")]),_v(". This is useful for including custom scripts.\nSimply insert the code / "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<script>")]),_v(" tags into a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<script-bottom>")]),_v(" tag.")])} @@ -74,7 +89,7 @@ with(this){return _c('p',[_c('strong',[_v("You may also insert HTML code after t with(this){return _c('p',[_v("The above example shows the use of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<script-bottom>")]),_v(" tag to show a browser alert box with the message "),_c('strong',[_v("'Hi!'")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"sticking-the-header-to-the-top"}},[_c('span',{staticClass:"anchor",attrs:{"id":"sticking-the-header-to-the-top"}}),_v("Sticking the header to the top"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#sticking-the-header-to-the-top","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"sticking-the-header-to-the-top"}},[_v("Sticking the header to the top"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#sticking-the-header-to-the-top","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("A sticky header can be implemented by simply adding the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("sticky")]),_v(" attribute to a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<header>")]),_v(" element.")])} @@ -86,7 +101,7 @@ with(this){return _c('p',[_v("Using this attribute as opposed to setting "),_c(' with(this){return _c('ul',[_c('li',[_v("When scrolled to, page anchors will line up below the sticky header, and not hidden behind it.")]),_v(" "),_c('li',[_v("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.")])])} },function anonymous( ) { -with(this){return _c('h5',{attrs:{"id":"offsetting-elements-with-the-header-height"}},[_c('span',{staticClass:"anchor",attrs:{"id":"offsetting-elements-with-the-header-height"}}),_v("Offsetting elements with the header height"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#offsetting-elements-with-the-header-height","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h5',{attrs:{"id":"offsetting-elements-with-the-header-height"}},[_v("Offsetting elements with the header height"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#offsetting-elements-with-the-header-height","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("MarkBind also exposes the "),_c('a',{attrs:{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"}},[_v("css variable")]),_v(" "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("--sticky-header-height")]),_v(" which contains the height of your header.")])} @@ -95,10 +110,10 @@ with(this){return _c('p',[_v("MarkBind also exposes the "),_c('a',{attrs:{"href" with(this){return _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 it is used in the default layout's site and page navigation menus")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs css"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-id"}},[_v("#site-nav")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-id"}},[_v("#page-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("position")]),_v(": sticky;\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/*")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" Offset the top sticky position,")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" such that the menus are not hidden behind the header.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("top")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("var")]),_v("(--sticky-header-height);\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/*")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" Limit the height of the menus so that the reader is able to scroll")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" through the menus individually, without having to scroll to the bottom of the page.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("max-height")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("calc")]),_v("("),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100vh")]),_v(" - "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("var")]),_v("(--sticky-header-height));\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v("}\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs css"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-id"}},[_v("#site-nav")]),_v(",\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-selector-id"}},[_v("#page-nav")]),_v(" {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("position")]),_v(": sticky;\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/*")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" Offset the top sticky position,")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" such that the menus are not hidden behind the header.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("top")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("var")]),_v("(--sticky-header-height);\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("/*")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" Limit the height of the menus so that the reader is able to scroll")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" through the menus individually, without having to scroll to the bottom of the page.")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v(" */")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attribute"}},[_v("max-height")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("calc")]),_v("("),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("100vh")]),_v(" - "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("var")]),_v("(--sticky-header-height));\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"constructing-a-site-navigation-menu-easily"}},[_c('span',{staticClass:"anchor",attrs:{"id":"constructing-a-site-navigation-menu-easily"}}),_v("Constructing a site navigation menu easily"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#constructing-a-site-navigation-menu-easily","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"constructing-a-site-navigation-menu-easily"}},[_v("Constructing a site navigation menu easily"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#constructing-a-site-navigation-menu-easily","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("A "),_c('em',[_v("Site Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("siteNav")]),_v(" for short")]),_v(") can be used to show a road map of the main pages of your site.")])])} @@ -110,7 +125,7 @@ with(this){return _c('ol',[_c('li',[_v("Format your siteNav as an unordered Mark with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs"}},[_c('span',[_v("<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")])])])])} +with(this){return _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")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -122,10 +137,7 @@ with(this){return _c('p',[_v("MarkBind has styles nested lists with additional p with(this){return _c('p',[_c('strong',[_c('strong',[_v("Expanding menu items by default")])])])} },function anonymous( ) { -with(this){return _c('p',[_v("A parent menu item that is also linked will not be collapsible "),_c('span',{staticClass:"dimmed"},[_v("e.g., the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Search")]),_v(" menu item in the above example")]),_v(".")])} -},function anonymous( -) { -with(this){return _c('h3',{attrs:{"id":"constructing-a-page-navigation-menu"}},[_c('span',{staticClass:"anchor",attrs:{"id":"constructing-a-page-navigation-menu"}}),_v("Constructing a page navigation menu"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#constructing-a-page-navigation-menu","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"constructing-a-page-navigation-menu"}},[_v("Constructing a page navigation menu"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#constructing-a-page-navigation-menu","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('strong',[_v("A "),_c('em',[_v("Page Navigation Menu")]),_v(" ("),_c('mark',[_c('em',[_v("pageNav")]),_v(" for short")]),_v(") a list of the current page's headings.")]),_v(" Page navigation menus are only available for use in "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layouts")]),_v(".")])} @@ -146,15 +158,120 @@ with(this){return _c('li',[_c('p',[_c('strong',[_v("(Optional) To make pageNav a with(this){return _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.")])])])} },function anonymous( ) { -with(this){return _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('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.")])])} +with(this){return _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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" pageNav: 2\n")]),_c('span',[_v(" pageNavTitle: \"Chapters of This Page\"\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Then, in your "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout file")]),_v(", use the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<page-nav />")]),_v(" component to position the pageNav.")])} +},function anonymous( +) { +with(this){return _c('h2',{attrs:{"id":"plugin-tags"}},[_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# For loops\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java language--C#\"")]),_v(">")]),_v("for (int i = 0; i < 5; i++) { ... }"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("As long as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" tag is specified, the code snippet will be rendered.")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,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")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will be merged with the ones in the frontmatter, and are processed after frontmatter tags. See "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#hiding-tags"}},[_v("Hiding Tags")]),_v(" for more information.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"advanced-tagging-tips"}},[_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--*\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<p>")]),_v("s will be shown.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"hiding-tags"}},[_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("index.md")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"index.md","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(">")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('div',[_c('h2',{attrs:{"id":"plugin-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-tags"}}),_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"toggling-alternative-contents"}}),_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])]),_v(" "),_c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")]),_v(" "),_c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('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")])])])]),_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('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("</"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")])])])]),_v(" "),_c('p',[_v("Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will be merged with the ones in the 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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tagging-tips"}}),_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<p>")]),_v("s will be shown.")])]),_v(" "),_c('h4',{attrs:{"id":"hiding-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-tags"}}),_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])]),_v(" "),_c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("<frontmatter>")]),_v(".")]),_v(" "),_c('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('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")])])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Using HTML, JavaScript, CSS")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/reusingContents.html"}},[_c('span',[_c('span',[_v("Reusing Contents")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/usingComponents.html b/userGuide/usingComponents.html index ab27e43..3282a27 100644 --- a/userGuide/usingComponents.html +++ b/userGuide/usingComponents.html @@ -3,10 +3,8 @@ <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <meta name="generator" content="MarkBind 4.1.0"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <title>MarkBind - User Guide: Using Components - + + MarkBind - User Guide: Using Components @@ -14,8 +12,7 @@ - - + @@ -23,14 +20,55 @@ 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


                                        + diff --git a/userGuide/usingComponents.page-vue-render.js b/userGuide/usingComponents.page-vue-render.js index b014a75..91d4ea7 100644 --- a/userGuide/usingComponents.page-vue-render.js +++ b/userGuide/usingComponents.page-vue-render.js @@ -1,13 +1,28 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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(" "),_m(0),_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":"#using-components"}},[_v("Using Components‎")])])],1)])],1),_v(" "),_m(1)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('p',[_v("To use a component, just use the corresponding markup in your file. For example, to create a Panel, you just need to use the markup:")]),_v(" "),_c('pre',[_m(4),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('br'),_v(" "),_m(5),_v(" "),_c('br')],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":"#using-components"}},[_v("Using Components‎")])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(6)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"content-wrapper"}},[_c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Using Components")])]),_v(" "),_c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_c('em',[_v("User Guide → Using Components")])])])]),_v(" "),_c('h1',{attrs:{"id":"using-components"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-components"}}),_v("Using Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-components","onclick":"event.stopPropagation()"}})]),_v(" "),_c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind provides a number of components")]),_v(" (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages.")])]),_v(" "),_c('p',[_v("To use a component, just use the corresponding markup in your file. For example, to create a Panel, you just need to use the markup:")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Click to expand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Panel Content.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('br'),_v(" "),_c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/formattingContents.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Formatting Contents")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/presentation.html"}},[_c('span',[_c('span',[_v("Presentational Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])]),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])} +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Using Components")])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_c('em',[_v("User Guide → Using Components")])])])])} +},function anonymous( +) { +with(this){return _c('h1',{attrs:{"id":"using-components"}},[_v("Using Components"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-components","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("MarkBind provides a number of components")]),_v(" (e.g., expandable panels, tabbed displays, navigation bars, etc.) that you can use to enhance the appearance/behavior of your pages.")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("panel")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Click to expand\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"seamless\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" Panel Content.\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/formattingContents.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Formatting Contents")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/presentation.html"}},[_c('span',[_c('span',[_v("Presentational Components")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/usingHtmlJavaScriptCss.html b/userGuide/usingHtmlJavaScriptCss.html index a104b5d..9e6d872 100644 --- a/userGuide/usingHtmlJavaScriptCss.html +++ b/userGuide/usingHtmlJavaScriptCss.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Using HTML, JavaScript, CSS - + + MarkBind - User Guide: Using HTML, JavaScript, CSS @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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
 </div>
 
@@ -33,16 +40,48 @@
 
 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>
@@ -66,7 +105,23 @@
     }
 });
 </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
@@ -92,7 +147,23 @@
   // 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


                                        + diff --git a/userGuide/usingHtmlJavaScriptCss.page-vue-render.js b/userGuide/usingHtmlJavaScriptCss.page-vue-render.js index c878fe1..758f7f8 100644 --- a/userGuide/usingHtmlJavaScriptCss.page-vue-render.js +++ b/userGuide/usingHtmlJavaScriptCss.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_c('div',{staticClass:"indented"},[_m(6),_v(" "),_c('div',[_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',[_v("\nWithout preceding blank line: Apples **Bananas** Cherries\n")]),_v(" "),_c('div',[_c('p',[_v("With preceding blank line: Apples "),_c('strong',[_v("Bananas")]),_v(" Cherries")])])])],1)])]),_v(" "),_m(10),_v(" "),_c('div',{staticClass:"indented"},[_m(11),_v(" "),_c('div',[_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',[_c('span',[_v("Apples "),_c('strong',[_v("Bananas")]),_v(" Cherries")])]),_v(" "),_c('div',[_c('div',[_c('h5',{attrs:{"id":"apples-bananas-cherries"}},[_c('span',{staticClass:"anchor",attrs:{"id":"apples-bananas-cherries"}}),_v("Apples "),_c('strong',[_v("Bananas")]),_v(" Cherries"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#apples-bananas-cherries","onclick":"event.stopPropagation()"}})])])])])],1)])]),_v(" "),_m(15),_v(" "),_c('p',[_v("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.")]),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("As mentioned in the "),_c('a',{attrs:{"href":"#markdown-in-html"}},[_v("above section")]),_v(", you "),_c('strong',[_v("should not")]),_v(" leave any blank lines within HTML elements to prevent MarkBind from parsing the contents as Markdown instead of code/text.")])]),_v(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticStyle:{"width":"400px","height":"400px"}},[_c('canvas',{attrs:{"id":"myChart"}})])])],1)]),_v(" "),_m(23),_v(" "),_c('div',[_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticStyle:{"width":"400px","height":"400px"},attrs:{"id":"echart"}})])],1)]),_v(" "),_m(27),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-html-javascript-css"}},[_v("Using HTML, JavaScript, CSS‎")]),_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":"#markdown-in-html"}},[_v("Markdown in HTML‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#javascript-libraries"}},[_v("JavaScript libraries‎")])])])],1)])],1),_v(" "),_m(28)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_c('div',{staticClass:"indented"},[_m(6),_v(" "),_c('div',[_m(7),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(8),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(9),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',[_v("\nWithout preceding blank line: Apples **Bananas** Cherries\n")]),_v(" "),_c('div',[_c('p',[_v("With preceding blank line: Apples "),_c('strong',[_v("Bananas")]),_v(" Cherries")])])])],1)])]),_v(" "),_m(10),_v(" "),_c('div',{staticClass:"indented"},[_m(11),_v(" "),_c('div',[_m(12),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(13),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(14),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',[_c('span',[_v("Apples "),_c('strong',[_v("Bananas")]),_v(" Cherries")])]),_v(" "),_c('div',[_c('div',[_c('h5',{attrs:{"id":"apples-bananas-cherries"}},[_v("Apples "),_c('strong',[_v("Bananas")]),_v(" Cherries"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#apples-bananas-cherries","onclick":"event.stopPropagation()"}})])])])])],1)])]),_v(" "),_m(15),_v(" "),_c('p',[_v("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.")]),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("As mentioned in the "),_c('a',{attrs:{"href":"#markdown-in-html"}},[_v("above section")]),_v(", you "),_c('strong',[_v("should not")]),_v(" leave any blank lines within HTML elements to prevent MarkBind from parsing the contents as Markdown instead of code/text.")])]),_v(" "),_m(19),_v(" "),_c('div',[_m(20),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(21),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(22),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticStyle:{"width":"400px","height":"400px"}},[_c('canvas',{attrs:{"id":"myChart"}})])])],1)]),_v(" "),_m(23),_v(" "),_c('div',[_m(24),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(25),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('div',{staticStyle:{"width":"400px","height":"400px"},attrs:{"id":"echart"}})])],1)]),_v(" "),_m(27),_v(" "),_c('br')],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":"#using-html-javascript-css"}},[_v("Using HTML, JavaScript, CSS‎")]),_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":"#markdown-in-html"}},[_v("Markdown in HTML‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#javascript-libraries"}},[_v("JavaScript libraries‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(28)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,13 +11,13 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_c('em',[_v("User Guide → Using HTML, JavaScript, CSS")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"using-html-javascript-css"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-html-javascript-css"}}),_v("Using HTML, JavaScript, CSS"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-html-javascript-css","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"using-html-javascript-css"}},[_v("Using HTML, JavaScript, CSS"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-html-javascript-css","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_c('strong',[_v("A MarkBind source file can contain a mixture of HTML, JavaScript, and CSS")]),_v(" as a normal web page would.")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"markdown-in-html"}},[_c('span',{staticClass:"anchor",attrs:{"id":"markdown-in-html"}}),_v("Markdown in HTML"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markdown-in-html","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"markdown-in-html"}},[_v("Markdown in HTML"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#markdown-in-html","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_c('mark',[_v("Text within HTML tags are considered plain text unless the text is preceded by a blank line,")]),_v(" in which case the text is parsed as Markdown text.")])} @@ -29,7 +29,7 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("Without preceding blank line: Apples **Bananas** Cherries\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("With preceding blank line: Apples **Bananas** Cherries\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("Without preceding blank line: Apples **Bananas** Cherries\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_v("With preceding blank line: Apples **Bananas** Cherries\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -44,16 +44,16 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v("Apples **Bananas** Cherries"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_v(">")]),_v("##### Apples **Bananas** Cherries"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("md")]),_v(">")]),_v("Apples **Bananas** Cherries"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("markdown")]),_v(">")]),_v("##### Apples **Bananas** Cherries"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"javascript-libraries"}},[_c('span',{staticClass:"anchor",attrs:{"id":"javascript-libraries"}}),_v("JavaScript libraries"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#javascript-libraries","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"javascript-libraries"}},[_v("JavaScript libraries"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#javascript-libraries","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"charts"}},[_c('span',{staticClass:"anchor",attrs:{"id":"charts"}}),_v("Charts"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#charts","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"charts"}},[_v("Charts"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#charts","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Popular chart libraries such as "),_c('a',{attrs:{"href":"https://www.chartjs.org/"}},[_v("Chart.js")]),_v(" and "),_c('a',{attrs:{"href":"https://echarts.apache.org"}},[_v("Apache ECharts")]),_v(" 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:")])} @@ -68,7 +68,7 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs HTML"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"width:400px;height:400px;\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("canvas")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"myChart\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Get the 2d context of the canvas (of where we want to draw the chart)")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("const")]),_v(" ctx = "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("document")]),_v(".getElementById("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'myChart'")]),_v(").getContext("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'2d'")]),_v(");")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Instantiate the Chart class with the data for the pie chart")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("const")]),_v(" myChart = "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("new")]),_v(" Chart(ctx, {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'pie'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("data")]),_v(": {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("labels")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Red'")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Blue'")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Yellow'")]),_v("],")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("datasets")]),_v(": [{")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'# of Votes'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("data")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("12")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("19")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("3")]),_v("],")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("backgroundColor")]),_v(": [")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'rgb(255, 99, 132)'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'rgb(54, 162, 235)'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'rgb(255, 205, 86)'")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" }]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v("});")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}}),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs HTML"}},[_c('span',[_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":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"width:400px;height:400px;\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("canvas")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"myChart\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Get the 2d context of the canvas (of where we want to draw the chart)")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("const")]),_v(" ctx = "),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("document")]),_v(".getElementById("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'myChart'")]),_v(").getContext("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'2d'")]),_v(");")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Instantiate the Chart class with the data for the pie chart")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("const")]),_v(" myChart = "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("new")]),_v(" Chart(ctx, {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'pie'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("data")]),_v(": {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("labels")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Red'")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Blue'")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Yellow'")]),_v("],")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("datasets")]),_v(": [{")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("label")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'# of Votes'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("data")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("12")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("19")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("3")]),_v("],")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("backgroundColor")]),_v(": [")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'rgb(255, 99, 132)'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'rgb(54, 162, 235)'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'rgb(255, 205, 86)'")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" }]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v("});")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}}),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -80,7 +80,7 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs HTML"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"echart\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"width:400px;height:400px;\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text/javascript\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Initialize the echarts instance based on the prepared DOM")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("var")]),_v(" eChart = echarts.init("),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("document")]),_v(".getElementById("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'echart'")]),_v("));")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Specify the configuration items and data for the chart")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("var")]),_v(" option = {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v(": {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'ECharts Getting Started'")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" },")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xAxis")]),_v(": {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("data")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Shirts'")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Cardigans'")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Chiffons'")]),_v("]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" },")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tooltip")]),_v(": {},")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yAxis")]),_v(": {},")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("series")]),_v(": [")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'sales'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'bar'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("data")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("5")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("20")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("36")]),_v("]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" };")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Display the chart using the configuration items and data just specified.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" eChart.setOption(option);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}}),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs HTML"}},[_c('span',[_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":"hljs-attr"}},[_v("src")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.js\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"echart\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("style")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"width:400px;height:400px;\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("script")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"text/javascript\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"javascript"}}),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Initialize the echarts instance based on the prepared DOM")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("var")]),_v(" eChart = echarts.init("),_c('span',{pre:true,attrs:{"class":"hljs-built_in"}},[_v("document")]),_v(".getElementById("),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'echart'")]),_v("));")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Specify the configuration items and data for the chart")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-keyword"}},[_v("var")]),_v(" option = {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("title")]),_v(": {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("text")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'ECharts Getting Started'")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" },")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("xAxis")]),_v(": {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("data")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Shirts'")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Cardigans'")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'Chiffons'")]),_v("]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" },")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tooltip")]),_v(": {},")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("yAxis")]),_v(": {},")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("series")]),_v(": [")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" {")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("name")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'sales'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("type")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("'bar'")]),_v(",")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("data")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("5")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("20")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-number"}},[_v("36")]),_v("]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" }")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" ]")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" };")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// Display the chart using the configuration items and data just specified.")])]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}},[_v(" eChart.setOption(option);")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"javascript"}}),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} @@ -89,6 +89,6 @@ with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/components/advanced.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Advanced Component Usage")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_c('span',[_c('span',[_v("Tweaking the Page Structure")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/usingPlugins.html b/userGuide/usingPlugins.html index ad40b5c..e4d9f29 100644 --- a/userGuide/usingPlugins.html +++ b/userGuide/usingPlugins.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Using Plugins - + + MarkBind - User Guide: Using Plugins @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ 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:

                                        {
   ...
   "plugins": [
     "plugin1",
@@ -40,7 +47,23 @@
     }
   }
 }
-

                                        Using Built-in Plugins

                                        MarkBind has a set of built-in plugins that can be used immediately without installation.

                                        Plugin: Algolia

                                        This plugin allows you to use Algolia DocSearch for your site.

                                        To enable it, add algolia to your site's plugins, and supply the required options via the pluginsContext.

                                        Name Type Default Description
                                        apiKey String The API key for your site's Algolia DocSearch setup
                                        appId String The application id for your site's Algolia DocSearch setup
                                        indexName String The index name for your site's Algolia DocSearch setup
                                        searchParameters Object {} A JSON object specifying the Algolia Search Parameters
                                        site.json
                                        {
+

                                        Using Built-in Plugins

                                        MarkBind has a set of built-in plugins that can be used immediately without installation.

                                        Plugin: Algolia

                                        This plugin allows you to use Algolia DocSearch for your site.

                                        To enable it, add algolia to your site's plugins, and supply the required options via the pluginsContext.

                                        Name Type Default Description
                                        apiKey String The API key for your site's Algolia DocSearch setup
                                        appId String The application id for your site's Algolia DocSearch setup
                                        indexName String The index name for your site's Algolia DocSearch setup
                                        searchParameters Object {} A JSON object specifying the Algolia Search Parameters
                                        site.json
                                        {
   ...
   "plugins": [
     "algolia"
@@ -54,26 +77,122 @@
     }
   }
 }
-

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

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

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

                                        {
+

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

                                        {
   ...
   "plugins" : [
     "filterTags"
@@ -84,20 +203,100 @@
     }
   }
 }
-

                                        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
+

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

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

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

                                        Example Attaching multiple tags to an element:

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

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

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

                                        Example Specifying tags in frontmatter:

                                        <frontmatter>
+

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

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

                                        Example Specifying tags in frontmatter:

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

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

                                        Advanced Tagging Tips

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

                                        Example Using general tags:

                                        <frontmatter>
+

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

                                        Advanced Tagging Tips

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

                                        Example Using general tags:

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

                                        All 3 <p>s will be shown.

                                        Hiding Tags

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

                                        Example Using general tags:

                                        index.md
                                        <frontmatter>
+

                                        All 3 <p>s will be shown.

                                        Hiding Tags

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

                                        Example Using general tags:

                                        index.md
                                        <frontmatter>
   title: "Hello World"
   tags: ["language--java"]
 </frontmatter>
@@ -113,7 +328,23 @@
 <p tags="language--java">System.out.println("Hello world");</p>
 <p tags="language--C#">Console.WriteLine("Hello world");</p>
 <p tags="language--python">print("Hello world")</p>
-
                                        site.json
                                        {
+
                                        site.json
                                        {
   ...
   "plugins" : [
     "filterTags"
@@ -124,12 +355,44 @@
     }
   }
 }
-

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

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

                                        # Print 'Hello world'
+

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

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

                                        # Print 'Hello world'
 
 <p tags="language--java">System.out.println("Hello world");</p>
 <p tags="language--C#">Console.WriteLine("Hello world");</p>
 <p tags="language--python">print("Hello world")</p>
-
                                        {
+
                                        {
   ...
   "plugins" : [
     "filterTags"
@@ -140,7 +403,23 @@
     }
   }
 }
-

                                        Plugin: GoogleAnalytics

                                        This plugin allows your web pages to be captured by google analytics.

                                        To enable it, add googleAnalytics to your site's plugins, and add the trackingID parameter via the pluginsContext.

                                        Name Type Default Description
                                        trackingID String Tracking ID provided by Google. Follow this guide to get your Tracking ID.
                                        site.json
                                        {
+

                                        Plugin: GoogleAnalytics

                                        This plugin allows your web pages to be captured by google analytics.

                                        To enable it, add googleAnalytics to your site's plugins, and add the trackingID parameter via the pluginsContext.

                                        Name Type Default Description
                                        trackingID String Tracking ID provided by Google. Follow this guide to get your Tracking ID.
                                        site.json
                                        {
   ...
   "plugins": [
     "googleAnalytics"
@@ -151,7 +430,23 @@
     }
   }
 }
-

                                        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"
@@ -162,8 +457,24 @@
     }
   }
 }
-

                                        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"
@@ -174,7 +485,23 @@
     }
   },
 }
-

                                        Example with beg_end delimiters:

                                        CODE:

                                        \begin{equation}
+

                                        Example with beg_end delimiters:

                                        CODE:

                                        \begin{equation}
   a^2+b^2=c^2
 \end{equation}
 
@@ -183,15 +510,186 @@
     A & B \\ B & C
   \end{pmatrix}
 \end{equation}
-

                                        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}

                                        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


                                        +\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
                                        {
+  ...
+  "plugins": [
+    "web3Form"
+  ],
+  "pluginsContext": {
+    "web3Form": {
+      "accessKey": "YOUR_WEB_3_FORM_ACCESS_KEY" // replace with your Web3Forms access key 
+    }
+  }
+}
+
                                        +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. +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. +This uses Bootstrap to style the header.

                                        CODE:

                                        <web-3-form default />
+

                                        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**">
+<name-input></name-input>
+</web-3-form>
+
+<web-3-form header="**Form with email input**">
+<email-input></email-input>
+</web-3-form>
+
+<web-3-form header="**Form with message input**">
+<message-input></message-input>
+</web-3-form>
+
+<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>
+</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


                                        + diff --git a/userGuide/usingPlugins.page-vue-render.js b/userGuide/usingPlugins.page-vue-render.js index b354092..ee07d06 100644 --- a/userGuide/usingPlugins.page-vue-render.js +++ b/userGuide/usingPlugins.page-vue-render.js @@ -1,7 +1,7 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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"}},[_m(0),_v(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("MarkBind's philosophy is to "),_c('em',[_v("bake-in")]),_v(" all necessary functionality into MarkBind itself rather than expect users to go hunting for suitable plugins. Hence, we do not anticipate MarkBind users to rely heavily on such external plugins.")])]),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('p',[_v("For example:")]),_v(" "),_m(7),_m(8),_v(" "),_c('p',[_v("MarkBind has a set of built-in plugins that can be used immediately without installation.")]),_v(" "),_c('div',[_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_m(13),_m(14),_v(" "),_m(15),_m(16),_v(" "),_m(17),_c('box',{attrs:{"type":"warning"}},[_c('p',[_v("By default, Algolia DocSearch indexes all content on the page, including content in components that are hidden to the user during the initial render (e.g. Panels). To exclude these content from being indexed, you can add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".algolia-no-index")]),_v(" to the "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/config-file.html#selectors_exclude-optional"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("selectors_exclude")])]),_v(" attribute in your DocSearch configuration.")]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class is automatically added to content hidden by MarkBind's Vue components. You may also add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class to content that you do not want to be indexed by Algolia DocSearch.")])])],1),_v(" "),_c('div',[_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/copyCode.png","width":"750","alt":"copyCode"}})],1),_v(" "),_c('div',[_m(22),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25),_c('p',[_v("This is what it'll look like once added:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOff.png","width":"750","alt":"wrapCodeOff"}}),_v(" "),_m(26),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_c('div',[_m(29),_v(" "),_m(30),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Before you can use this plugin, you need to "),_c('strong',[_v("(1) setup a Disqus account")]),_v(" and "),_c('strong',[_v("(2) register your site")]),_v(".")]),_v(" "),_c('p',[_v("You may sign up for a Disqus account and register your site "),_c('a',{attrs:{"href":"https://disqus.com/admin/create/"}},[_v("here")]),_v(".")]),_v(" "),_c('p',[_v("Note that you "),_c('strong',[_c('span',{staticClass:"underline"},[_v("do not have to install Disqus on your site")])]),_v(", this plugin does it for you.")]),_v(" "),_c('p',[_v("All you have to do is provide the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("shortname")]),_v(" of your Disqus site, which is explained below.")])]),_v(" "),_m(31),_v(" "),_m(32),_m(33),_m(34),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("It may be a good idea to create a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout")]),_v(" with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" in it, so that you won't have to repeat it on every page.")])])],1),_v(" "),_c('div',[_m(35),_v(" "),_m(36),_v(" "),_c('p',[_v("These delimiters are supported without guarantee that they will be rendered correctly, especially when they happen to conflict with\nother MarkBind syntax.")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Note that the "),_c('strong',[_c('span',{staticClass:"underline"},[_v("default delimiters still function as expected")])]),_v(", this plugin simply adds the additional delimiters.")])]),_v(" "),_m(37),_v(" "),_m(38),_m(39),_v(" "),_c('div',[_m(40),_v(" "),_m(41),_v(" "),_m(42),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('section',[_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('mtable',{pre:true,attrs:{"rowspacing":"0.16em","columnspacing":"1em"}},[_c('mtr',{pre:true},[_c('mtd',{pre:true,attrs:{"class":"mtr-glue"}}),_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"true"}},[_c('mrow',{pre:true},[_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),_c('mo',{pre:true},[_v("=")]),_c('msup',{pre:true},[_c('mi',{pre:true},[_v("c")]),_c('mn',{pre:true},[_v("2")])],1)],1)],1)],1),_c('mtd',{pre:true,attrs:{"class":"mtr-glue"}}),_c('mtd',{pre:true,attrs:{"class":"mml-eqn-num"}})],1)],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\begin{equation}\n a^2+b^2=c^2\n\\end{equation}")])],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:1.2241em;vertical-align:-0.3621em;"}}),_c('span',{pre:true,attrs:{"class":"mtable"}},[_c('span',{pre:true,attrs:{"class":"col-align-c"}},[_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:0.8621em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.9979em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_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.8641em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.113em;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":"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.8641em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.113em;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":"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.8641em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.113em;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":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.3621em;"}},[_c('span')])])])])])]),_c('span',{pre:true,attrs:{"class":"tag"}},[_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:0.8621em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.8621em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.8641em;"}}),_c('span',{pre:true,attrs:{"class":"eqn-num"}})])]),_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.3621em;"}},[_c('span')])])])])])])])])],1),_c('section',[_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('mtable',{pre:true,attrs:{"rowspacing":"0.16em","columnspacing":"1em"}},[_c('mtr',{pre:true},[_c('mtd',{pre:true,attrs:{"class":"mtr-glue"}}),_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"true"}},[_c('mrow',{pre:true},[_c('mo',{pre:true,attrs:{"fence":"true"}},[_v("(")]),_c('mtable',{pre:true,attrs:{"rowspacing":"0.16em","columnalign":"center center","columnspacing":"1em"}},[_c('mtr',{pre:true},[_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"false"}},[_c('mi',{pre:true},[_v("A")])],1)],1),_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"false"}},[_c('mi',{pre:true},[_v("B")])],1)],1)],1),_c('mtr',{pre:true},[_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"false"}},[_c('mi',{pre:true},[_v("B")])],1)],1),_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"false"}},[_c('mi',{pre:true},[_v("C")])],1)],1)],1)],1),_c('mo',{pre:true,attrs:{"fence":"true"}},[_v(")")])],1)],1)],1),_c('mtd',{pre:true,attrs:{"class":"mtr-glue"}}),_c('mtd',{pre:true,attrs:{"class":"mml-eqn-num"}})],1)],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\begin{equation}\n \\begin{pmatrix}\n A & B \\\\ B & C\n \\end{pmatrix}\n\\end{equation}")])],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.4em;vertical-align:-0.95em;"}}),_c('span',{pre:true,attrs:{"class":"mtable"}},[_c('span',{pre:true,attrs:{"class":"col-align-c"}},[_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.45em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.45em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3.45em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"minner"}},[_c('span',{pre:true,attrs:{"class":"mopen delimcenter","style":"top:0em;"}},[_c('span',{pre:true,attrs:{"class":"delimsizing size3"}},[_v("(")])]),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mtable"}},[_c('span',{pre:true,attrs:{"class":"col-align-c"}},[_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.45em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.61em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("A")])])]),_c('span',{pre:true,attrs:{"style":"top:-2.41em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.05017em;"}},[_v("B")])])])]),_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.95em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"arraycolsep","style":"width:0.5em;"}}),_c('span',{pre:true,attrs:{"class":"arraycolsep","style":"width:0.5em;"}}),_c('span',{pre:true,attrs:{"class":"col-align-c"}},[_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.45em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.61em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.05017em;"}},[_v("B")])])]),_c('span',{pre:true,attrs:{"style":"top:-2.41em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.07153em;"}},[_v("C")])])])]),_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.95em;"}},[_c('span')])])])])])]),_c('span',{pre:true,attrs:{"class":"mclose delimcenter","style":"top:0em;"}},[_c('span',{pre:true,attrs:{"class":"delimsizing size3"}},[_v(")")])])])])])]),_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.95em;"}},[_c('span')])])])])])]),_c('span',{pre:true,attrs:{"class":"tag"}},[_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.45em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.45em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3.45em;"}}),_c('span',{pre:true,attrs:{"class":"eqn-num"}})])]),_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.95em;"}},[_c('span')])])])])])])])])],1)])],1)])],1),_v(" "),_m(43),_v(" "),_m(44),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("WARNING:")]),_v(" Plugins are executable programs that can be written by anyone. This means that they might contain malicious code that may damage your computer.")]),_v(" "),_c('p',[_v("Only run plugins from sources that you trust. Do not run the plugin if the source/origin of the plugin cannot be ascertained.")])]),_v(" "),_m(45),_v(" "),_m(46),_v(" "),_m(47),_v(" "),_m(48),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})],1),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"},[_c('overlay-source',{staticClass:"nav nav-pills flex-column my-0 small no-flex-wrap",attrs:{"id":"mb-page-nav","tag-name":"nav","to":"mb-page-nav"}},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-plugins"}},[_v("Using Plugins‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#managing-plugins"}},[_v("Managing Plugins‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-built-in-plugins"}},[_v("Using Built-in Plugins‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-algolia"}},[_v("Plugin: Algolia‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-codeblockcopybuttons"}},[_v("Plugin: codeBlockCopyButtons‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-codeblockwrapbuttons"}},[_v("Plugin: codeBlockWrapButtons‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-tags"}},[_v("Plugin: Tags‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#toggling-alternative-contents"}},[_v("Toggling alternative contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#advanced-tagging-tips"}},[_v("Advanced Tagging Tips‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#hiding-tags"}},[_v("Hiding Tags‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-googleanalytics"}},[_v("Plugin: GoogleAnalytics‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-disqus"}},[_v("Plugin: Disqus‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-mathdelimiters"}},[_v("Plugin: MathDelimiters‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-external-plugins"}},[_v("Using External Plugins‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#adding-external-plugins"}},[_v("Adding External Plugins‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#writing-plugins"}},[_v("Writing Plugins‎")])])])],1)])],1),_v(" "),_m(49)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("MarkBind's philosophy is to "),_c('em',[_v("bake-in")]),_v(" all necessary functionality into MarkBind itself rather than expect users to go hunting for suitable plugins. Hence, we do not anticipate MarkBind users to rely heavily on such external plugins.")])]),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_c('p',[_v("For example:")]),_v(" "),_c('pre',[_m(7),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(8),_v(" "),_c('p',[_v("MarkBind has a set of built-in plugins that can be used immediately without installation.")]),_v(" "),_c('div',[_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_c('div',{staticClass:"code-block"},[_m(13),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(14),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_m(15),_v(" "),_c('pre',[_m(16),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(17),_v(" "),_c('pre',[_m(18),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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("By default, Algolia DocSearch indexes all content on the page, including content in components that are hidden to the user during the initial render (e.g. Panels). To exclude these content from being indexed, you can add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".algolia-no-index")]),_v(" to the "),_c('a',{attrs:{"href":"https://community.algolia.com/docsearch/config-file.html#selectors_exclude-optional"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("selectors_exclude")])]),_v(" attribute in your DocSearch configuration.")]),_v(" "),_c('p',[_v("The "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class is automatically added to content hidden by MarkBind's Vue components. You may also add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-no-index")]),_v(" class to content that you do not want to be indexed by Algolia DocSearch.")])])],1),_v(" "),_c('div',[_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_c('div',{staticClass:"code-block"},[_m(22),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(23),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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('div',[_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_c('div',{staticClass:"code-block"},[_m(27),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(28),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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(" "),_m(29),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOn.png","width":"750","alt":"wrapCodeOn"}}),_v(" "),_c('p',[_v("In case a single long word is encountered, it will be split across multiple lines similar to the following:")]),_v(" "),_c('pic',{attrs:{"src":"/images/wrapCodeOnWordBreak.png","width":"750","alt":"wrapCodeOnWordBreak"}})],1),_v(" "),_c('div',[_m(30),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_m(31),_v(" "),_m(32),_v(" "),_c('div',{staticClass:"indented"},[_m(33),_v(" "),_c('pre',[_m(34),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(35),_v(" "),_c('pre',[_m(36),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(37)]),_v(" "),_m(38),_v(" "),_m(39),_v(" "),_c('div',{staticClass:"indented"},[_m(40),_v(" "),_c('pre',[_m(41),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(42)]),_v(" "),_c('p',[_v("Alternatively, you can specify tags to render for a page in the frontmatter.")]),_v(" "),_c('div',{staticClass:"indented"},[_m(43),_v(" "),_c('pre',[_m(44),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(45),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(46),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(47),_v(" "),_m(48),_v(" "),_m(49),_v(" "),_c('div',{staticClass:"indented"},[_m(50),_v(" "),_c('pre',[_m(51),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])]),_m(52)]),_v(" "),_m(53),_v(" "),_m(54),_v(" "),_c('div',{staticClass:"indented"},[_m(55),_v(" "),_c('div',{staticClass:"code-block"},[_m(56),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(57),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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"},[_m(58),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(59),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_m(60)]),_v(" "),_m(61),_v(" "),_c('div',{staticClass:"d-none",attrs:{"id":"short"}},[_c('pre',[_m(62),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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',[_m(63),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(64),_v(" "),_m(65),_v(" "),_m(66),_v(" "),_m(67),_c('div',{staticClass:"code-block"},[_m(68),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(69),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 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',[_m(70),_v(" "),_m(71),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Before you can use this plugin, you need to "),_c('strong',[_v("(1) setup a Disqus account")]),_v(" and "),_c('strong',[_v("(2) register your site")]),_v(".")]),_v(" "),_c('p',[_v("You may sign up for a Disqus account and register your site "),_c('a',{attrs:{"href":"https://disqus.com/admin/create/"}},[_v("here")]),_v(".")]),_v(" "),_c('p',[_v("Note that you "),_c('strong',[_c('span',{staticClass:"underline"},[_v("do not have to install Disqus on your site")])]),_v(", this plugin does it for you.")]),_v(" "),_c('p',[_v("All you have to do is provide the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("shortname")]),_v(" of your Disqus site, which is explained below.")])]),_v(" "),_m(72),_v(" "),_m(73),_c('div',{staticClass:"code-block"},[_m(74),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(75),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_m(76),_v(" "),_c('box',{attrs:{"type":"tip"}},[_c('p',[_v("It may be a good idea to create a "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#layouts"}},[_v("layout")]),_v(" with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" in it, so that you won't have to repeat it on every page.")])])],1),_v(" "),_c('div',[_m(77),_v(" "),_m(78),_v(" "),_c('p',[_v("These delimiters are supported without guarantee that they will be rendered correctly, especially when they happen to conflict with\nother MarkBind syntax.")]),_v(" "),_c('box',{attrs:{"type":"info"}},[_c('p',[_v("Note that the "),_c('strong',[_c('span',{staticClass:"underline"},[_v("default delimiters still function as expected")])]),_v(", this plugin simply adds the additional delimiters.")])]),_v(" "),_m(79),_v(" "),_c('div',{staticClass:"code-block"},[_m(80),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(81),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])])]),_m(82),_v(" "),_c('div',[_m(83),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(84),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(85),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('section',[_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('mtable',{pre:true,attrs:{"rowspacing":"0.16em","columnspacing":"1em"}},[_c('mtr',{pre:true},[_c('mtd',{pre:true,attrs:{"class":"mtr-glue"}}),_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"true"}},[_c('mrow',{pre:true},[_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),_c('mo',{pre:true},[_v("=")]),_c('msup',{pre:true},[_c('mi',{pre:true},[_v("c")]),_c('mn',{pre:true},[_v("2")])],1)],1)],1)],1),_c('mtd',{pre:true,attrs:{"class":"mtr-glue"}}),_c('mtd',{pre:true,attrs:{"class":"mml-eqn-num"}})],1)],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\begin{equation}\n a^2+b^2=c^2\n\\end{equation}")])],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:1.2241em;vertical-align:-0.3621em;"}}),_c('span',{pre:true,attrs:{"class":"mtable"}},[_c('span',{pre:true,attrs:{"class":"col-align-c"}},[_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:0.8621em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.9979em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_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.8641em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.113em;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":"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.8641em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.113em;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":"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.8641em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.113em;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":"vlist-s"}},[_v("​")])]),_c('span',{pre:true,attrs:{"class":"vlist-r"}},[_c('span',{pre:true,attrs:{"class":"vlist","style":"height:0.3621em;"}},[_c('span')])])])])])]),_c('span',{pre:true,attrs:{"class":"tag"}},[_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:0.8621em;"}},[_c('span',{pre:true,attrs:{"style":"top:-2.8621em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:2.8641em;"}}),_c('span',{pre:true,attrs:{"class":"eqn-num"}})])]),_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.3621em;"}},[_c('span')])])])])])])])])],1),_c('section',[_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('mtable',{pre:true,attrs:{"rowspacing":"0.16em","columnspacing":"1em"}},[_c('mtr',{pre:true},[_c('mtd',{pre:true,attrs:{"class":"mtr-glue"}}),_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"true"}},[_c('mrow',{pre:true},[_c('mo',{pre:true,attrs:{"fence":"true"}},[_v("(")]),_c('mtable',{pre:true,attrs:{"rowspacing":"0.16em","columnalign":"center center","columnspacing":"1em"}},[_c('mtr',{pre:true},[_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"false"}},[_c('mi',{pre:true},[_v("A")])],1)],1),_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"false"}},[_c('mi',{pre:true},[_v("B")])],1)],1)],1),_c('mtr',{pre:true},[_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"false"}},[_c('mi',{pre:true},[_v("B")])],1)],1),_c('mtd',{pre:true},[_c('mstyle',{pre:true,attrs:{"scriptlevel":"0","displaystyle":"false"}},[_c('mi',{pre:true},[_v("C")])],1)],1)],1)],1),_c('mo',{pre:true,attrs:{"fence":"true"}},[_v(")")])],1)],1)],1),_c('mtd',{pre:true,attrs:{"class":"mtr-glue"}}),_c('mtd',{pre:true,attrs:{"class":"mml-eqn-num"}})],1)],1),_c('annotation',{pre:true,attrs:{"encoding":"application/x-tex","v-pre":""}},[_v("\\begin{equation}\n \\begin{pmatrix}\n A & B \\\\ B & C\n \\end{pmatrix}\n\\end{equation}")])],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.4em;vertical-align:-0.95em;"}}),_c('span',{pre:true,attrs:{"class":"mtable"}},[_c('span',{pre:true,attrs:{"class":"col-align-c"}},[_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.45em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.45em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3.45em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"minner"}},[_c('span',{pre:true,attrs:{"class":"mopen delimcenter","style":"top:0em;"}},[_c('span',{pre:true,attrs:{"class":"delimsizing size3"}},[_v("(")])]),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mtable"}},[_c('span',{pre:true,attrs:{"class":"col-align-c"}},[_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.45em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.61em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal"}},[_v("A")])])]),_c('span',{pre:true,attrs:{"style":"top:-2.41em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.05017em;"}},[_v("B")])])])]),_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.95em;"}},[_c('span')])])])]),_c('span',{pre:true,attrs:{"class":"arraycolsep","style":"width:0.5em;"}}),_c('span',{pre:true,attrs:{"class":"arraycolsep","style":"width:0.5em;"}}),_c('span',{pre:true,attrs:{"class":"col-align-c"}},[_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.45em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.61em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.05017em;"}},[_v("B")])])]),_c('span',{pre:true,attrs:{"style":"top:-2.41em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3em;"}}),_c('span',{pre:true,attrs:{"class":"mord"}},[_c('span',{pre:true,attrs:{"class":"mord mathnormal","style":"margin-right:0.07153em;"}},[_v("C")])])])]),_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.95em;"}},[_c('span')])])])])])]),_c('span',{pre:true,attrs:{"class":"mclose delimcenter","style":"top:0em;"}},[_c('span',{pre:true,attrs:{"class":"delimsizing size3"}},[_v(")")])])])])])]),_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.95em;"}},[_c('span')])])])])])]),_c('span',{pre:true,attrs:{"class":"tag"}},[_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.45em;"}},[_c('span',{pre:true,attrs:{"style":"top:-3.45em;"}},[_c('span',{pre:true,attrs:{"class":"pstrut","style":"height:3.45em;"}}),_c('span',{pre:true,attrs:{"class":"eqn-num"}})])]),_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.95em;"}},[_c('span')])])])])])])])])],1)])],1)])],1),_v(" "),_c('div',[_m(86),_v(" "),_m(87),_v(" "),_c('box',{attrs:{"type":"tip","seamless":""}},[_v("\nDon't forget to check your spam/junk folder if your form responses aren't appearing in your inbox!\n")]),_v(" "),_c('box',{attrs:{"type":"warning","seamless":""}},[_v("\nThe free plan from Web3Forms allows up to 250 submissions per month.\n")]),_v(" "),_m(88),_v(" "),_m(89),_c('div',{staticClass:"code-block"},[_m(90),_c('div',{staticClass:"code-block-content"},[_c('pre',[_m(91),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 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","seamless":""}},[_v("\nThe access key is exposed to public. \nThis is generally ok since the access key is an alias to your email and is equivalent to revealing your email to public.\n"),_c('p',[_v("However it is possible that malicious users might use the access key in other forms.\nThis might subject the email linked to the access key to spam with irrelevant form submissions.")])]),_v(" "),_m(92),_v(" "),_c('div',[_m(93),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(94),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(95),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('web-3-form',{attrs:{"header":"Contact Us"}},[_c('label',{attrs:{"for":"name"}},[_v("Name")]),_v(" "),_c('input',{attrs:{"type":"text","name":"name","required":"","placeholder":"John Doe"}}),_v(" "),_c('button',{attrs:{"type":"submit"}},[_v("Submit")])])],1)],1)]),_v(" "),_m(96),_v(" "),_m(97),_v(" "),_c('div',[_m(98),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(99),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(100),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('web-3-form',{attrs:{"default":""}})],1)],1)]),_v(" "),_c('div',[_m(101),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(102),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(103),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('web-3-form',{attrs:{"default":"","header":"**New header**"}})],1)],1)]),_v(" "),_m(104),_v(" "),_c('p',[_v("The inputs supported are")]),_v(" "),_m(105),_v(" "),_c('div',[_m(106),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(107),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(108),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('web-3-form',{attrs:{"header":"**Form with name input**"}},[_c('name-input')],1),_v(" "),_c('web-3-form',{attrs:{"header":"**Form with email input**"}},[_c('email-input')],1),_v(" "),_c('web-3-form',{attrs:{"header":"**Form with message input**"}},[_c('message-input')],1),_v(" "),_c('web-3-form',{attrs:{"header":"**Form with submit button**"}},[_c('submit-button')],1)],1)],1)]),_v(" "),_m(109),_v(" "),_m(110),_v(" "),_c('div',[_m(111),_v(" "),_c('div',{staticClass:"indented"},[_c('pre',[_m(112),_c('div',{staticClass:"function-btn-container"},[_c('button',{staticClass:"function-btn",attrs:{"onclick":"copyCodeBlock(this)"}},[_v("\n "),_c('div',{staticClass:"function-btn-body"},[_v("\n \n"),_c('svg',{attrs:{"xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","width":"18","height":"18","viewBox":"0 0 18 18","version":"1.1"}},[_v("\n "),_c('g',{attrs:{"id":"surface1"}},[_v("\n "),_c('path',{attrs:{"d":"M 11.273438 0 L 2.546875 0 C 1.746094 0 1.089844 0.613281 1.089844\n 1.363281 L 1.089844 10.910156 L 2.546875 10.910156 L 2.546875 1.363281 L 11.273438\n 1.363281 Z M 13.453125 2.726562 L 5.453125 2.726562 C 4.65625 2.726562 4 3.339844 4\n 4.089844 L 4 13.636719 C 4 14.386719 4.65625 15 5.453125 15 L 13.453125 15 C 14.253906\n 15 14.910156 14.386719 14.910156 13.636719 L 14.910156 4.089844 C 14.910156 3.339844\n 14.253906 2.726562 13.453125 2.726562 Z M 13.453125 13.636719 L 5.453125 13.636719 L\n 5.453125 4.089844 L 13.453125 4.089844 Z M 13.453125 13.636719 "}}),_v("\n ")]),_v("\n")]),_v("\n\n ")]),_v("\n ")])])])]),_v(" "),_m(113),_v(" "),_c('div',{staticClass:"indented"},[_c('box',{attrs:{"border-left-color":"grey","background-color":"white"}},[_c('web-3-form',{attrs:{"default":"","type":"warning","header":"Here's a form :rocket:","color":"red","dismissible":""}})],1)],1)])],1),_v(" "),_m(114),_v(" "),_m(115),_v(" "),_c('box',{attrs:{"type":"warning"}},[_c('p',[_c('strong',[_v("WARNING:")]),_v(" Plugins are executable programs that can be written by anyone. This means that they might contain malicious code that may damage your computer.")]),_v(" "),_c('p',[_v("Only run plugins from sources that you trust. Do not run the plugin if the source/origin of the plugin cannot be ascertained.")])]),_v(" "),_m(116),_v(" "),_m(117),_v(" "),_m(118),_v(" "),_m(119),_v(" "),_c('br')],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":"#using-plugins"}},[_v("Using Plugins‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#managing-plugins"}},[_v("Managing Plugins‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-built-in-plugins"}},[_v("Using Built-in Plugins‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-algolia"}},[_v("Plugin: Algolia‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-codeblockcopybuttons"}},[_v("Plugin: codeBlockCopyButtons‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-codeblockwrapbuttons"}},[_v("Plugin: codeBlockWrapButtons‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-tags"}},[_v("Plugin: Tags‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#toggling-alternative-contents"}},[_v("Toggling alternative contents‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#advanced-tagging-tips"}},[_v("Advanced Tagging Tips‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#hiding-tags"}},[_v("Hiding Tags‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-googleanalytics"}},[_v("Plugin: GoogleAnalytics‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-disqus"}},[_v("Plugin: Disqus‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-mathdelimiters"}},[_v("Plugin: MathDelimiters‎")]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#plugin-web3forms"}},[_v("Plugin: Web3Forms‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#using-external-plugins"}},[_v("Using External Plugins‎")]),_v(" "),_c('nav',{staticClass:"nav nav-pills flex-column my-0 nested no-flex-wrap"},[_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#adding-external-plugins"}},[_v("Adding External Plugins‎")])]),_v(" "),_c('a',{pre:true,attrs:{"class":"nav-link py-1","href":"#writing-plugins"}},[_v("Writing Plugins‎")])])])],1)]),_v(" "),_c('scroll-top-button')],1),_v(" "),_m(120)])} }; var pageVueStaticRenderFns = [function anonymous( ) { @@ -11,13 +11,13 @@ with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}}, with(this){return _c('span',{staticClass:"d-none",attrs:{"id":"link"}},[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_c('em',[_v("User Guide → Using Plugins")])])])])} },function anonymous( ) { -with(this){return _c('h1',{attrs:{"id":"using-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-plugins"}}),_v("Using Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-plugins","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h1',{attrs:{"id":"using-plugins"}},[_v("Using Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-plugins","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('div',{staticClass:"lead",attrs:{"id":"overview"}},[_c('p',[_v("A plugin is an extension that adds additional features to MarkBind. Some non-essential MarkBind functionalities are provided as plugins so that you can enable/disable/configure them as necessary. MarkBind also supports adding external plugins (written by you or other third parties).")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"managing-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"managing-plugins"}}),_v("Managing Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#managing-plugins","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"managing-plugins"}},[_v("Managing Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#managing-plugins","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Plugins are managed via the following two properties in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")])} @@ -26,13 +26,13 @@ with(this){return _c('p',[_v("Plugins are managed via the following two properti with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("plugins")]),_v(": An array of plugin names to use.")]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(": Parameters passed to each plugin, specified as key-value pairs.")])])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin1\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin2\"")]),_v(",\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin1\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"input\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Input for Plugin 1\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin2\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"data\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Data for Plugin 2\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin1\"")]),_v(",\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin2\"")]),_v(",\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin1\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"input\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Input for Plugin 1\"")]),_v("\n")]),_c('span',[_v(" },\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugin2\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"data\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Data for Plugin 2\"")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"using-built-in-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-built-in-plugins"}}),_v("Using Built-in Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-built-in-plugins","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"using-built-in-plugins"}},[_v("Using Built-in Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-built-in-plugins","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"plugin-algolia"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-algolia"}}),_v("Plugin: Algolia"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-algolia","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"plugin-algolia"}},[_v("Plugin: Algolia"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-algolia","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("This plugin allows you to use "),_c('a',{attrs:{"href":"https://docsearch.algolia.com/docs/what-is-docsearch/"}},[_v("Algolia DocSearch")]),_v(" for your site.")])} @@ -44,22 +44,25 @@ with(this){return _c('p',[_v("To enable it, add "),_c('code',{pre:true,attrs:{"c with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("apiKey")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The API key for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("appId")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The application id for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("indexName")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("The index name for your site's Algolia DocSearch setup")])]),_v(" "),_c('tr',[_c('td',[_v("searchParameters")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("Object")])]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("{}")])]),_v(" "),_c('td',[_v("A JSON object specifying the "),_c('a',{attrs:{"href":"https://www.algolia.com/doc/api-reference/search-api-parameters/"}},[_v("Algolia Search Parameters")])])])])])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"apiKey\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25626fae796133dc1e734c6bcaaeac3c\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's api key")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"appId\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"R2IYF7ETH7\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's application id")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"indexName\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docsearch\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's index name")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchParameters\"")]),_v(": { "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"facetFilters\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site:yoursite.com\"")]),_v("] } "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"apiKey\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"25626fae796133dc1e734c6bcaaeac3c\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's api key")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"appId\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"R2IYF7ETH7\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's application id")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"indexName\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"docsearch\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your site's index name")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"searchParameters\"")]),_v(": { "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"facetFilters\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"site:yoursite.com\"")]),_v("] } "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// optional")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("To connect the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("searchbar")]),_v(" component to Algolia DocSearch, add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia")]),_v(" key.")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("algolia")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("searchbar")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Search\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("algolia")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("menu-align-right")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("Alternatively, if you are using a custom search bar, you can assign the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("div")]),_v(" element the id "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("algolia-search-input")]),_v(" to connect it to Algolia DocSearch.")])} },function anonymous( ) { -with(this){return _c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia-search-input\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("div")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("id")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"algolia-search-input\"")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"plugin-codeblockcopybuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockcopybuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockcopybuttons","onclick":"event.stopPropagation()"}})])} +with(this){return _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()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" button to fenced code blocks so that readers can copy the code easily.")])} @@ -68,10 +71,13 @@ with(this){return _c('p',[_v("This plugin adds a "),_c('em',[_v("copy")]),_v(" b with(this){return _c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockCopyButtons")]),_v(" to your site's plugins.")])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-codeblockwrapbuttons"}}),_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})])} +with(this){return _c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockCopyButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"plugin-codeblockwrapbuttons"}},[_v("Plugin: "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-codeblockwrapbuttons","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_v(" button to fenced code blocks so that readers can read long lines of code without scrolling sideways.")])} @@ -80,19 +86,136 @@ with(this){return _c('p',[_v("This plugin adds a "),_c('em',[_v("wrap text")]),_ with(this){return _c('p',[_v("To enable it, simply add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("codeBlockWrapButtons")]),_v(" to your site's plugins.")])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"codeBlockWrapButtons\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("Clicking the "),_c('em',[_v("wrap text")]),_v(" button will result in the following:")])} },function anonymous( ) { -with(this){return _c('div',[_c('h3',{attrs:{"id":"plugin-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-tags"}}),_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("With this plugin you can use tags to selectively filter content when building a site.")]),_v(" "),_c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_c('span',{staticClass:"anchor",attrs:{"id":"toggling-alternative-contents"}}),_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")]),_v(" "),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])]),_c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])]),_v(" "),_c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")]),_v(" "),_c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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("")]),_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("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C# basic\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])]),_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"}},[_c('span',{staticClass:"anchor",attrs:{"id":"advanced-tagging-tips"}}),_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

                                        ")]),_v("s will be shown.")])]),_v(" "),_c('h4',{attrs:{"id":"hiding-tags"}},[_c('span',{staticClass:"anchor",attrs:{"id":"hiding-tags"}}),_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")]),_v(" "),_c('div',{staticClass:"indented"},[_c('p',[_c('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("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])]),_c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])]),_v(" "),_c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_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("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])]),_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])} +with(this){return _c('h3',{attrs:{"id":"plugin-tags"}},[_v("Plugin: Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-tags","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"toggling-alternative-contents"}},[_v("Toggling alternative contents"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#toggling-alternative-contents","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Tags are specified by the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute, "),_c('strong',[_v("and can be attached to any HTML element")]),_v(". During rendering, only elements that match tags specified in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" files will be rendered.")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("You need to specify the tags to include in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(", under "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(":")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("All other tagged elements will be filtered out. In this case, only the element with the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" tag will be rendered. This is helpful when creating multiple versions of a page without having to maintain separate copies.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("If the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("filterTags")]),_v(" plugin is not enabled in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(", all tagged elements will be rendered.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("You can also use multiple tags in a single HTML element. Specify each tag in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("tags")]),_v(" attribute")]),_v(" separated by a space. An element will be rendered if "),_c('strong',[_v("any of the tags")]),_v(" matches the one in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# For loops\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java language--C#\"")]),_v(">")]),_v("for (int i = 0; i < 5; i++) { ... }"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("As long as the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" or "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" tag is specified, the code snippet will be rendered.")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java advanced\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C# basic\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" will be merged with the ones in the frontmatter, and are processed after frontmatter tags. See "),_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html#hiding-tags"}},[_v("Hiding Tags")]),_v(" for more information.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"advanced-tagging-tips"}},[_v("Advanced Tagging Tips"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#advanced-tagging-tips","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("You can use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag name to match elements more generally. A "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("*")]),_v(" in a tag will match any number of characters at its position.")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--*\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("All 3 "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

                                        ")]),_v("s will be shown.")])} +},function anonymous( +) { +with(this){return _c('h4',{attrs:{"id":"hiding-tags"}},[_v("Hiding Tags"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#hiding-tags","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("Using "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-")]),_v(" at the start of a tag hides all tags matching the expression. This is helpful for disabling a group of tags and enabling a particular tag.")])} +},function anonymous( +) { +with(this){return _c('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:")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("index.md")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"index.md","class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("frontmatter")]),_v(">")]),_v("\n")]),_c('span',[_v(" title: \"Hello World\"\n")]),_c('span',[_v(" tags: [\"language--java\"]\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"-language--*\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--java")]),_v(" is overridden by "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("-language--*")]),_v(", so only "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(" is shown.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("This only works because tags are processed left to right, so all "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--*")]),_v(" tags are hidden before "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("language--C#")]),_v(". Tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" are processed after tags in "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_v("# Print 'Hello world'\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v(">")]),_v("System.out.println(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--C#\"")]),_v(">")]),_v("Console.WriteLine(\"Hello world\");"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("p")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("tags")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--python\"")]),_v(">")]),_v("print(\"Hello world\")"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs json"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"plugins\"")]),_v(" : [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"filterTags\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"filterTags\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("\"tags\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"language--java\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"plugin-googleanalytics"}},[_v("Plugin: GoogleAnalytics"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-googleanalytics","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("This plugin allows your web pages to be captured by "),_c('a',{attrs:{"href":"https://analytics.google.com/analytics/web/#/"}},[_v("google analytics")]),_v(".")])} },function anonymous( ) { -with(this){return _c('div',[_c('h3',{attrs:{"id":"plugin-googleanalytics"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-googleanalytics"}}),_v("Plugin: GoogleAnalytics"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-googleanalytics","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_v("This plugin allows your web pages to be captured by "),_c('a',{attrs:{"href":"https://analytics.google.com/analytics/web/#/"}},[_v("google analytics")]),_v(".")]),_v(" "),_c('p',[_v("To enable it, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("googleAnalytics")]),_v(" to your site's plugins, and add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trackingID")]),_v(" parameter via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(".")]),_v(" "),_c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trackingID")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Tracking ID provided by Google. Follow this "),_c('a',{attrs:{"href":"https://support.google.com/analytics/answer/1008080"}},[_v("guide")]),_v(" to get your Tracking ID.")])])])])]),_c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"googleAnalytics\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"googleAnalytics\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"trackingID\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"YOUR-TRACKING-ID\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your google analytics tracking id.")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])])} +with(this){return _c('p',[_v("To enable it, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("googleAnalytics")]),_v(" to your site's plugins, and add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("trackingID")]),_v(" parameter via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(".")])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"plugin-disqus"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-disqus"}}),_v("Plugin: Disqus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-disqus","onclick":"event.stopPropagation()"}})])} +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("trackingID")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Tracking ID provided by Google. Follow this "),_c('a',{attrs:{"href":"https://support.google.com/analytics/answer/1008080"}},[_v("guide")]),_v(" to get your Tracking ID.")])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"googleAnalytics\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"googleAnalytics\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"trackingID\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"YOUR-TRACKING-ID\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your google analytics tracking id.")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"plugin-disqus"}},[_v("Plugin: Disqus"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-disqus","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("This plugin allows you to use "),_c('a',{attrs:{"href":"https://disqus.com/"}},[_v("Disqus")]),_v(" for your site.")])} @@ -104,13 +227,16 @@ with(this){return _c('p',[_v("To enable this plugin, add "),_c('code',{pre:true, with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("shortname")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("Shortname is provided by Disqus. Follow this "),_c('a',{attrs:{"href":"https://help.disqus.com/en/articles/1717111-what-s-a-shortname"}},[_v("guide")]),_v(" to get shortname for your Disqus site.")])])])])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"disqus\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"disqus\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"shortname\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"YOUR_DISQUS_SITE_SHORTNAME\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your Disqus site's shortname ")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"disqus\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"disqus\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"shortname\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"YOUR_DISQUS_SITE_SHORTNAME\"")]),_v(", "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your Disqus site's shortname ")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { with(this){return _c('p',[_v("Then, to add a Disqus comment section on a page, all you need to do is to add a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" HTML tag to any MarkBind source file.")])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"plugin-mathdelimiters"}},[_c('span',{staticClass:"anchor",attrs:{"id":"plugin-mathdelimiters"}}),_v("Plugin: MathDelimiters"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-mathdelimiters","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"plugin-mathdelimiters"}},[_v("Plugin: MathDelimiters"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-mathdelimiters","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("This plugin allows you to use additional delimiters for your math formulae. Available delimiters are listed in "),_c('a',{attrs:{"href":"https://github.com/goessner/markdown-it-texmath#features"}},[_v("the markdown-it-texmath package")]),_v(".")])} @@ -119,7 +245,10 @@ with(this){return _c('p',[_v("This plugin allows you to use additional delimiter with(this){return _c('p',[_v("To enable this plugin, add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("mathDelimiters")]),_v(" to your site's plugins and specify the delimters in the context.")])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"code-block"},[_c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])]),_c('div',{staticClass:"code-block-content"},[_c('pre',[_c('code',{pre:true,attrs:{"heading":"site.json","class":"hljs js"}},[_c('span',[_v("{\n")]),_c('span',[_v(" ...\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"plugins\"")]),_v(": [\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mathDelimiters\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mathDelimiters\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"delimiters\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"beg_end\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v("}\n")])])])])])} +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} +},function anonymous( +) { +with(this){return _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("\"mathDelimiters\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"mathDelimiters\"")]),_v(" : {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"delimiters\"")]),_v(": ["),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"beg_end\"")]),_v("]\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" },\n")]),_c('span',[_v("}\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClass:"badge rounded-pill bg-secondary",staticStyle:{"padding-bottom":"4px","margin-right":"5px"}},[_v("Example")])]),_v(" with "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("beg_end")]),_v(" delimiters:")])} @@ -128,30 +257,114 @@ with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('span',{staticClas with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} },function anonymous( ) { -with(this){return _c('div',{staticClass:"indented"},[_c('pre',[_c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\\begin{equation}\n")]),_c('span',[_v(" a^2+b^2=c^2\n")]),_c('span',[_v("\\end{equation}\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\begin{equation}\n")]),_c('span',[_v(" \\begin{pmatrix}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" A & B \\\\ B & C")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" \\end{pmatrix}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("\\end{equation}")]),_v("\n")])])])])} +with(this){return _c('code',{pre:true,attrs:{"class":"hljs markdown"}},[_c('span',[_v("\\begin{equation}\n")]),_c('span',[_v(" a^2+b^2=c^2\n")]),_c('span',[_v("\\end{equation}\n")]),_c('span',[_v("\n")]),_c('span',[_v("\\begin{equation}\n")]),_c('span',[_v(" \\begin{pmatrix}\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" A & B \\\\ B & C")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v(" \\end{pmatrix}")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-code"}},[_v("\\end{equation}")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('h3',{attrs:{"id":"plugin-web3forms"}},[_v("Plugin: Web3Forms"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#plugin-web3forms","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_v("This plugin allows you to create forms whose response will be sent directly to your email, using the "),_c('a',{attrs:{"href":"https://web3forms.com/"}},[_v("Web3Forms")]),_v(" API.")])} +},function anonymous( +) { +with(this){return _c('p',[_v("To set it up, get an access key from "),_c('a',{attrs:{"href":"https://web3forms.com/"}},[_v("Web3Forms")]),_v(". Then add "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("web3Form")]),_v(" to your site's plugin, and add the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("accessKey")]),_v(" parameter via the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("pluginsContext")]),_v(".")])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"table-responsive"},[_c('table',{staticClass:"markbind-table table table-bordered table-striped"},[_c('thead',[_c('tr',[_c('th',[_v("Name")]),_v(" "),_c('th',[_v("Type")]),_v(" "),_c('th',[_v("Default")]),_v(" "),_c('th',[_v("Description")])])]),_v(" "),_c('tbody',[_c('tr',[_c('td',[_v("accessKey")]),_v(" "),_c('td',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("String")])]),_v(" "),_c('td'),_v(" "),_c('td',[_v("accessKey is required. It is provided by Web3Forms.")])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"code-block-heading"},[_c('span',[_v("site.json")])])} +},function anonymous( +) { +with(this){return _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("\"web3Form\"")]),_v("\n")]),_c('span',[_v(" ],\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"pluginsContext\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"web3Form\"")]),_v(": {\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"accessKey\"")]),_v(": "),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"YOUR_WEB_3_FORM_ACCESS_KEY\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-comment"}},[_v("// replace with your Web3Forms access key ")]),_v("\n")]),_c('span',[_v(" }\n")]),_c('span',[_v(" }\n")]),_c('span',[_v("}\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("To add a form to your site, use a "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("")]),_v(" tag.")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("web-3-form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"Contact Us\"")]),_v(">")]),_v("\n")]),_c('span',[_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("label")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("for")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(">")]),_v("Name"),_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("input")]),_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("name")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"name\"")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("required")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("placeholder")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"John Doe\"")]),_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("type")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"submit\"")]),_v(">")]),_v("Submit"),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Web3Forms plugin also supports a default 'Contact Us' form.")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("The header will be "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("

                                        Contact Us

                                        ")]),_v(" for the default form if no header is specified.\nThis uses Bootstrap to style the header.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("web-3-form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("default")]),_v(" />")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("web-3-form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("default")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**New header**\"")]),_v("/>")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Web3Forms plugin supports common inputs.")])])} +},function anonymous( +) { +with(this){return _c('ul',[_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("name-input")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("email-input")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("message-input")])]),_v(" "),_c('li',[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("submit-button")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("web-3-form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Form with name input**\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("name-input")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("web-3-form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Form with email input**\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("email-input")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("web-3-form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Form with message input**\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("message-input")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("web-3-form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("header")]),_v("="),_c('span',{pre:true,attrs:{"class":"hljs-string"}},[_v("\"**Form with submit button**\"")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("submit-button")]),_v(">")]),_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('strong',[_v("Web3Forms plugin supports customised header and styles")])])} +},function anonymous( +) { +with(this){return _c('p',[_v("Options from the "),_c('a',{attrs:{"href":"/userGuide/components/presentation.html#boxes"}},[_v("box component")]),_v(" are supported here.")])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("CODE:")])])} +},function anonymous( +) { +with(this){return _c('code',{pre:true,attrs:{"class":"hljs html"}},[_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("<"),_c('span',{pre:true,attrs:{"class":"hljs-name"}},[_v("web-3-form")]),_v(" "),_c('span',{pre:true,attrs:{"class":"hljs-attr"}},[_v("default")]),_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("\"Here's a form :rocket:\"")]),_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("dismissible")]),_v(">")]),_v("\n")]),_c('span',[_c('span',{pre:true,attrs:{"class":"hljs-tag"}},[_v("")]),_v("\n")])])} },function anonymous( ) { with(this){return _c('p',[_c('span',{staticClass:"dimmed"},[_v("OUTPUT:")])])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"using-external-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"using-external-plugins"}}),_v("Using External Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-external-plugins","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"using-external-plugins"}},[_v("Using External Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#using-external-plugins","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('h3',{attrs:{"id":"adding-external-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"adding-external-plugins"}}),_v("Adding External Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-external-plugins","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h3',{attrs:{"id":"adding-external-plugins"}},[_v("Adding External Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#adding-external-plugins","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { with(this){return _c('p',[_v("Plugins come as "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v(".js")]),_v(" files. To install an external plugin, simply put it in the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_markbind/plugins")]),_v(" folder. To use the plugin, update the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file the same way you did for built-in plugins.")])} },function anonymous( ) { -with(this){return _c('h2',{attrs:{"id":"writing-plugins"}},[_c('span',{staticClass:"anchor",attrs:{"id":"writing-plugins"}}),_v("Writing Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#writing-plugins","onclick":"event.stopPropagation()"}})])} +with(this){return _c('h2',{attrs:{"id":"writing-plugins"}},[_v("Writing Plugins"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#writing-plugins","onclick":"event.stopPropagation()"}})])} },function anonymous( ) { -with(this){return _c('p',[_v("You may also write your own plugins! Refer "),_c('a',{attrs:{"href":"https://markbind.org/devdocs/devGuide/development/writingPlugins.html"}},[_v("here")]),_v(" for the available interfaces to do so.")])} +with(this){return _c('p',[_v("You may also write your own plugins! Refer "),_c('a',{attrs:{"tags":"environment--ug","href":"https://markbind.org/devdocs/devGuide/development/writingPlugins.html"}},[_v("here")]),_v(" for the available interfaces to do so.")])} },function anonymous( ) { with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Setting Site Properties")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('span',[_c('span',[_v("Making the Site Searchable")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} },function anonymous( ) { -with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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/workingWithSites.html b/userGuide/workingWithSites.html index d559f90..301c107 100644 --- a/userGuide/workingWithSites.html +++ b/userGuide/workingWithSites.html @@ -3,10 +3,8 @@ - - - MarkBind - User Guide: Working with Sites - + + MarkBind - User Guide: Working with Sites @@ -14,8 +12,7 @@ - - + @@ -23,9 +20,19 @@ const baseUrl = '' -

                                        Working with Sites

                                        Working with Sites

                                        Setting Site Properties

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

                                        More info in: User Guide → Setting Site Properties

                                        Using Plugins

                                        @@ -41,9 +48,30 @@ 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. -

                                        More info in: User Guide → Redirecting to a Custom 404 Page

                                        Reusing Contents

                                        Setting Site Properties


                                        +

                                        More info in: User Guide → Redirecting to a Custom 404 Page

                                        Adding Navigation Buttons

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

                                        More info in: User Guide → Adding Navigation Buttons

                                        Templates

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

                                        More info in: User Guide → Templates

                                        Reusing Contents

                                        Setting Site Properties


                                        + diff --git a/userGuide/workingWithSites.page-vue-render.js b/userGuide/workingWithSites.page-vue-render.js index d7d4e78..4db51a1 100644 --- a/userGuide/workingWithSites.page-vue-render.js +++ b/userGuide/workingWithSites.page-vue-render.js @@ -1,13 +1,100 @@ 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"}},[_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("User Guide")])]),_v(" "),_c('div',{staticClass:"nav-component slim-scroll"},[_c('site-nav',[_c('overlay-source',{staticClass:"site-nav-list site-nav-list-root",attrs:{"tag-name":"ul","to":"mb-site-nav"}},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/gettingStarted.html"}},[_c('strong',[_v("Getting Started")])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Authoring Contents")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/authoringContents.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/addingPages.html"}},[_v("Adding Pages")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindSyntaxOverview.html"}},[_v("MarkBind Syntax Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/formattingContents.html"}},[_v("Formatting Contents")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingComponents.html"}},[_v("Using Components")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/presentation.html"}},[_v("Presentation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/imagesAndDiagrams.html"}},[_v("Images & Diagrams")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/popups.html"}},[_v("Pop-Ups")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/navigation.html"}},[_v("Navigation")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/others.html"}},[_v("Others")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-2",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/components/advanced.html"}},[_v("Advanced")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingHtmlJavaScriptCss.html"}},[_v("Using HTML, JavaScript, CSS")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/tweakingThePageStructure.html"}},[_v("Tweaking the Page Structure")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/reusingContents.html"}},[_v("Reusing Contents")])])])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("Working with sites")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/workingWithSites.html"}},[_v("Overview")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_v("Setting Site Properties")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_v("Using Plugins")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_v("Making the Site Searchable")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_v("Applying Themes")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_v("Deploying the Site")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-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-0",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('strong',[_v("References")]),_v(" "),_c('i',{staticClass:"site-nav-dropdown-btn-icon site-nav-rotate-icon",attrs:{"onclick":"handleSiteNavClick(this.parentNode, false); event.stopPropagation();"}},[_c('span',{staticClass:"glyphicon glyphicon-menu-down",attrs:{"aria-hidden":"true"}})])]),_c('ul',{staticClass:"site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list"},[_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/cliCommands.html"}},[_v("CLI Commands")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/readerFacingFeatures.html"}},[_v("Reader-Facing Features")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/fullSyntaxReference.html"}},[_v("Full Syntax Reference")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/syntaxCheatSheet.html"}},[_v("Syntax Cheat Sheet")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/siteJsonFile.html"}},[_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" File")])])]),_v(" "),_c('li',[_c('div',{staticClass:"site-nav-default-list-item site-nav-list-item-1",attrs:{"onclick":"handleSiteNavClick(this)"}},[_c('a',{attrs:{"href":"/userGuide/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(" "),_m(0),_v(" "),_c('overlay-source',{attrs:{"id":"page-nav","tag-name":"nav","to":"page-nav"}},[_c('div',{staticClass:"nav-component slim-scroll"})])],1),_v(" "),_m(1)])} +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(" "),_m(1),_v(" "),_m(2),_v(" "),_m(3),_v(" "),_m(4),_v(" "),_m(5),_v(" "),_m(6),_v(" "),_m(7),_v(" "),_m(8),_v(" "),_m(9),_v(" "),_m(10),_v(" "),_m(11),_v(" "),_m(12),_v(" "),_m(13),_v(" "),_m(14),_v(" "),_m(15),_v(" "),_m(16),_v(" "),_m(17),_v(" "),_m(18),_v(" "),_m(19),_v(" "),_m(20),_v(" "),_m(21),_v(" "),_m(22),_v(" "),_m(23),_v(" "),_m(24),_v(" "),_m(25),_v(" "),_m(26),_v(" "),_m(27),_v(" "),_m(28),_v(" "),_m(29),_v(" "),_c('br')],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(30)])} }; var pageVueStaticRenderFns = [function anonymous( ) { -with(this){return _c('div',{attrs:{"id":"content-wrapper"}},[_c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Working with Sites")])]),_v(" "),_c('h1',{attrs:{"id":"working-with-sites"}},[_c('span',{staticClass:"anchor",attrs:{"id":"working-with-sites"}}),_v("Working with Sites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#working-with-sites","onclick":"event.stopPropagation()"}})]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Setting Site Properties")])])]),_v(" "),_c('blockquote',[_c('span',[_v("\n\nSetting site-wide properties of a MarkBind site is done by updating the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file found and the project root. For example, it can be used to set the deploy destination, themes to apply, plugins to use etc.\n")])]),_v(" "),_c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('em',[_v("User Guide → Setting Site Properties")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Using Plugins")])])]),_v(" "),_c('blockquote',[_c('span',[_v("\n\nA plugin is an extension that adds additional features to MarkBind. Some non-essential MarkBind functionalities are provided as plugins so that you can enable/disable/configure them as necessary. MarkBind also supports adding external plugins (written by you or other third parties).\n")])]),_v(" "),_c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_c('em',[_v("User Guide → Using Plugins")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Making the site searchable")])])]),_v(" "),_c('blockquote',[_c('span',[_c('strong',[_v("MarkBind comes with an in-built "),_c('em',[_v("site search")]),_v(" facility")]),_v(" with the option to use third-party search services as well.\n")])]),_v(" "),_c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('em',[_v("User Guide → Making the Site Searchable")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Applying Themes")])])]),_v(" "),_c('blockquote',[_c('span',[_c('strong',[_v("MarkBind supports the ability to style your website with a variety of Bootstrap themes.")])])]),_v(" "),_c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_c('em',[_v("User Guide → Themes")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Deploying the Site")])])]),_v(" "),_c('blockquote',[_c('span',[_c('strong',[_v("A site generated by MarkBind can be deployed by simply uploading the generated files to any Web server.")]),_v(" In addition, MarkBind provides several convenient deployment options.\n")])]),_v(" "),_c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_c('em',[_v("User Guide → Deploying the Site")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("MarkBind in the Project Workflow")])])]),_v(" "),_c('blockquote',[_c('span',[_v("\n\nAs "),_c('strong',[_v("MarkBind is especially optimized as a project documentation tool")]),_v(", it integrates well with the workflow of software projects.\n")])]),_v(" "),_c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_c('em',[_v("User Guide → MarkBind in the Project Workflow")])])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Redirecting to a Custom 404 Page")])])]),_v(" "),_c('blockquote',[_c('span',[_v("\n\nMany popular static hosting services, such as "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(", support custom routing to a custom 404 HTML page.\nA default "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.md")]),_v(" file is provided, and you can customize it to create your own 404 page.\nThe "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.html")]),_v(" file will be created at the root of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(" folder.\n")])]),_v(" "),_c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_c('em',[_v("User Guide → Redirecting to a Custom 404 Page")])])])])])]),_v(" "),_c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/reusingContents.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Reusing Contents")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('span',[_c('span',[_v("Setting Site Properties")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])]),_v(" "),_c('br'),_v(" "),_c('i',{staticClass:"fa fa-arrow-circle-up fa-lg d-print-none",attrs:{"id":"scroll-top-button","onclick":"handleScrollTop()","aria-hidden":"true"}})])} +with(this){return _c('p',[_c('span',{staticClass:"d-none",attrs:{"id":"title"}},[_v("Working with Sites")])])} },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 4.1.0")]),_v(" on Tue, 14 Feb 2023, 1:33:56 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('h1',{attrs:{"id":"working-with-sites"}},[_v("Working with Sites"),_c('a',{staticClass:"fa fa-anchor",attrs:{"href":"#working-with-sites","onclick":"event.stopPropagation()"}})])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Setting Site Properties")])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_v("\n\nSetting site-wide properties of a MarkBind site is done by updating the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("site.json")]),_v(" file found and the project root. For example, it can be used to set the deploy destination, themes to apply, plugins to use etc.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('em',[_v("User Guide → Setting Site Properties")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Using Plugins")])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_v("\n\nA plugin is an extension that adds additional features to MarkBind. Some non-essential MarkBind functionalities are provided as plugins so that you can enable/disable/configure them as necessary. MarkBind also supports adding external plugins (written by you or other third parties).\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/usingPlugins.html"}},[_c('em',[_v("User Guide → Using Plugins")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Making the site searchable")])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind comes with an in-built "),_c('em',[_v("site search")]),_v(" facility")]),_v(" with the option to use third-party search services as well.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/makingTheSiteSearchable.html"}},[_c('em',[_v("User Guide → Making the Site Searchable")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Applying Themes")])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("MarkBind supports the ability to style your website with a variety of Bootstrap themes.")])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/themes.html"}},[_c('em',[_v("User Guide → Themes")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Deploying the Site")])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_c('strong',[_v("A site generated by MarkBind can be deployed by simply uploading the generated files to any Web server.")]),_v(" In addition, MarkBind provides several convenient deployment options.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/deployingTheSite.html"}},[_c('em',[_v("User Guide → Deploying the Site")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("MarkBind in the Project Workflow")])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_v("\n\nAs "),_c('strong',[_v("MarkBind is especially optimized as a project documentation tool")]),_v(", it integrates well with the workflow of software projects.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/markBindInTheProjectWorkflow.html"}},[_c('em',[_v("User Guide → MarkBind in the Project Workflow")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Redirecting to a Custom 404 Page")])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_v("\n\nMany popular static hosting services, such as "),_c('a',{attrs:{"href":"https://www.netlify.com/"}},[_v("Netlify")]),_v(", support custom routing to a custom 404 HTML page.\nA default "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.md")]),_v(" file is provided, and you can customize it to create your own 404 page.\nThe "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("404.html")]),_v(" file will be created at the root of the "),_c('code',{pre:true,attrs:{"class":"hljs inline no-lang"}},[_v("_site")]),_v(" folder.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/redirectingToACustom404Page.html"}},[_c('em',[_v("User Guide → Redirecting to a Custom 404 Page")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Adding Navigation Buttons")])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_v("\n\nNavigation buttons can "),_c('strong',[_v("greatly help your website visitors browse through your content with ease")]),_v(".\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/addingNavigationButtons.html"}},[_c('em',[_v("User Guide → Adding Navigation Buttons")])])])])])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"large"},[_c('strong',[_v("Templates")])])])} +},function anonymous( +) { +with(this){return _c('blockquote',[_c('span',[_v("\n\nMarkBind allows you to start off your new project with different templates.\n")])])} +},function anonymous( +) { +with(this){return _c('p',[_c('span',{staticClass:"indented"},[_v("More info in: "),_c('span',[_c('span',[_c('a',{attrs:{"href":"/userGuide/templates.html"}},[_c('em',[_v("User Guide → Templates")])])])])])])} +},function anonymous( +) { +with(this){return _c('div',{staticClass:"clearfix"},[_c('p',[_c('span',{staticClass:"float-start"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/reusingContents.html"}},[_c('span',[_c('span',{staticClass:"far fa-arrow-alt-circle-left",attrs:{"aria-hidden":"true"}}),_v(" "),_c('span',[_v("Reusing Contents")])])])])]),_v(" "),_c('p',[_c('span',{staticClass:"float-end"},[_c('a',{staticClass:"btn btn-light",attrs:{"href":"/userGuide/settingSiteProperties.html"}},[_c('span',[_c('span',[_v("Setting Site Properties")]),_v(" "),_c('span',{staticClass:"far fa-arrow-alt-circle-right",attrs:{"aria-hidden":"true"}})])])])])])} +},function anonymous( +) { +with(this){return _c('div',[_c('footer',[_c('div',{staticClass:"text-center"},[_c('small',[_v("[Generated by "),_c('a',{attrs:{"href":"https://markbind.org/"}},[_v("MarkBind 5.0.0")]),_v(" on Sun, 16 Jul 2023, 10:15: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