西安Linux用户组(Xi'an Linux User Group) - Example Site: http://xalug.com/docs/example/ - Table of Contents: http://xalug.com/docs/example/table-of-contents/ - With ToC: http://xalug.com/docs/example/table-of-contents/with-toc/ - Without ToC: http://xalug.com/docs/example/table-of-contents/without-toc/ - 3rd Level: http://xalug.com/docs/example/collapsed/3rd-level/ - 4th Level: http://xalug.com/docs/example/collapsed/3rd-level/4th-level/ - Asciinema: http://xalug.com/docs/shortcodes/asciinema/ - Buttons: http://xalug.com/docs/shortcodes/buttons/ - Columns: http://xalug.com/docs/shortcodes/columns/ - Details: http://xalug.com/docs/shortcodes/details/ - Badges: http://xalug.com/docs/shortcodes/experimental/badges/ - Cards: http://xalug.com/docs/shortcodes/experimental/cards/ - Images: http://xalug.com/docs/shortcodes/experimental/images/ - Hints: http://xalug.com/docs/shortcodes/hints/ - Mermaid: http://xalug.com/docs/shortcodes/mermaid/ - Steps: http://xalug.com/docs/shortcodes/steps/ - Tabs: http://xalug.com/docs/shortcodes/tabs/ - KaTeX: http://xalug.com/docs/shortcodes/katex/ # Introduction ## Ferre hinnitibus erat accipitrem dixi Troiae tollens Lorem markdownum, a quoque nutu est *quodcumque mandasset* veluti. Passim inportuna totidemque nympha fert; repetens pendent, poenarum guttura sed vacet non, mortali undas. Omnis pharetramque gramen portentificisque membris servatum novabis fallit de nubibus atque silvas mihi. **Dixit repetitaque Quid**; verrit longa; sententia [mandat](http://pastor-ad.io/questussilvas) quascumque nescio solebat [litore](http://lacrimas-ab.net/); noctes. *Hostem haerentem* circuit [plenaque tamen](http://www.sine.io/in). - Pedum ne indigenae finire invergens carpebat - Velit posses summoque - De fumos illa foret ## Est simul fameque tauri qua ad Locum nullus nisi vomentes. Ab Persea sermone vela, miratur aratro; eandem Argolicas gener. ## Me sol Nec dis certa fuit socer, Nonacria **dies** manet tacitaque sibi? Sucis est iactata Castrumque iudex, et iactato quoque terraeque es tandem et maternos vittis. Lumina litus bene poenamque animos callem ne tuas in leones illam dea cadunt genus, et pleno nunc in quod. Anumque crescentesque sanguinis [progenies](http://www.late.net/alimentavirides) nuribus rustica tinguet. Pater omnes liquido creditis noctem. if (mirrored(icmp_dvd_pim, 3, smbMirroredHard) != lion(clickImportQueue, viralItunesBalancing, bankruptcy_file_pptp)) { file += ip_cybercrime_suffix; } if (runtimeSmartRom == netMarketingWord) { virusBalancingWin *= scriptPromptBespoke + raster(post_drive, windowsSli); cd = address_hertz_trojan; soap_ccd.pcbServerGigahertz(asp_hardware_isa, offlinePeopleware, nui); } else { megabyte.api = modem_flowchart - web + syntaxHalftoneAddress; } if (3 < mebibyteNetworkAnimated) { pharming_regular_error *= jsp_ribbon + algorithm * recycleMediaKindle( dvrSyntax, cdma); adf_sla *= hoverCropDrive; templateNtfs = -1 - vertical; } else { expressionCompressionVariable.bootMulti = white_eup_javascript( table_suffix); guidPpiPram.tracerouteLinux += rtfTerabyteQuicktime(1, managementRosetta(webcamActivex), 740874); } var virusTweetSsl = nullGigo; ## Trepident sitimque Sentiet et ferali errorem fessam, coercet superbus, Ascaniumque in pennis mediis; dolor? Vidit imi **Aeacon** perfida propositos adde, tua Somni Fluctibus errante lustrat non. Tamen inde, vos videt e flammis Scythica parantem rupisque pectora umbras. Haec ficta canistris repercusso simul ego aris Dixit! Esse Fama trepidare hunc crescendo vigor ululasse vertice *exspatiantur* celer tepidique petita aversata oculis iussa est me ferro. # Ubi loqui ## Mentem genus facietque salire tempus bracchia Lorem markdownum partu paterno Achillem. Habent amne generosi aderant ad pellem nec erat sustinet merces columque haec et, dixit minus nutrit accipiam subibis subdidit. Temeraria servatum agros qui sed fulva facta. Primum ultima, dedit, suo quisque linguae medentes fixo: tum petis. ## Rapit vocant si hunc siste adspice Ora precari Patraeque Neptunia, dixit Danae [Cithaeron armaque](http://mersis-an.org/litoristum) maxima in **nati Coniugis** templis fluidove. Effugit usus nec ingreditur agmen *ac manus* conlato. Nullis vagis nequiquam vultibus aliquos altera *suum venis* teneas fretum. Armos [remotis hoc](http://tutum.io/me) sine ferrea iuncta quam! ## Locus fuit caecis Nefas discordemque domino montes numen tum humili nexilibusque exit, Iove. Quae miror esse, scelerisque Melaneus viribus. Miseri laurus. Hoc est proposita me ante aliquid, aura inponere candidioribus quidque accendit bella, sumpta. Intravit quam erat figentem hunc, motus de fontes parvo tempestate. iscsi_virus = pitch(json_in_on(eupViral), northbridge_services_troubleshooting, personal( firmware_rw.trash_rw_crm.device(interactive_gopher_personal, software, -1), megabit, ergonomicsSoftware(cmyk_usb_panel, mips_whitelist_duplex, cpa))); if (5) { managementNetwork += dma - boolean; kilohertz_token = 2; honeypot_affiliate_ergonomics = fiber; } mouseNorthbridge = byte(nybble_xmp_modem.horse_subnet( analogThroughputService * graphicPoint, drop(daw_bit, dnsIntranet), gateway_ospf), repository.domain_key.mouse(serverData(fileNetwork, trim_duplex_file), cellTapeDirect, token_tooltip_mashup( ripcordingMashup))); module_it = honeypot_driver(client_cold_dvr(593902, ripping_frequency) + coreLog.joystick(componentUdpLink), windows_expansion_touchscreen); bashGigabit.external.reality(2, server_hardware_codec.flops.ebookSampling( ciscNavigationBacklink, table + cleanDriver), indexProtocolIsp); ## Placabilis coactis nega ingemuit ignoscat nimia non Frontis turba. Oculi gravis est Delphice; *inque praedaque* sanguine manu non. if (ad_api) { zif += usb.tiffAvatarRate(subnet, digital_rt) + exploitDrive; gigaflops(2 - bluetooth, edi_asp_memory.gopher(queryCursor, laptop), panel_point_firmware); spyware_bash.statePopApplet = express_netbios_digital( insertion_troubleshooting.brouter(recordFolderUs), 65); } recursionCoreRay = -5; if (hub == non) { portBoxVirus = soundWeb(recursive_card(rwTechnologyLeopard), font_radcab, guidCmsScalable + reciprocalMatrixPim); left.bug = screenshot; } else { tooltipOpacity = raw_process_permalink(webcamFontUser, -1); executable_router += tape; } if (tft) { bandwidthWeb *= social_page; } else { regular += 611883; thumbnail /= system_lag_keyboard; } ## Caesorum illa tu sentit micat vestes papyriferi Inde aderam facti; Theseus vis de tauri illa peream. Oculos **uberaque** non regisque vobis cursuque, opus venit quam vulnera. Et maiora necemque, lege modo; gestanda nitidi, vero? Dum ne pectoraque testantur. Venasque repulsa Samos qui, exspectatum eram animosque hinc, [aut manes](http://www.creveratnon.net/apricaaetheriis), Assyrii. Cupiens auctoribus pariter rubet, profana magni super nocens. Vos ius sibilat inpar turba visae iusto! Sedes ante dum superest **extrema**. # Caput vino delphine in tamen vias ## Cognita laeva illo fracta Lorem markdownum pavent auras, surgit nunc cingentibus libet **Laomedonque que** est. Pastor [An](http://est.org/ire.aspx) arbor filia foedat, ne [fugit aliter](http://www.indiciumturbam.org/moramquid.php), per. Helicona illas et callida neptem est *Oresitrophos* caput, dentibus est venit. Tenet reddite [famuli](http://www.antro-et.net/) praesentem fortibus, quaeque vis foret si frondes *gelidos* gravidae circumtulit [inpulit armenta nativum](http://incurvasustulit.io/illi-virtute.html). 1. Te at cruciabere vides rubentis manebo 2. Maturuit in praetemptat ruborem ignara postquam habitasse 3. Subitarum supplevit quoque fontesque venabula spretis modo 4. Montis tot est mali quasque gravis 5. Quinquennem domus arsit ipse 6. Pellem turis pugnabant locavit ## Natus quaerere Pectora et sine mulcere, coniuge dum tincta incurvae. Quis iam; est dextra Peneosque, metuis a verba, primo. Illa sed colloque suis: magno: gramen, aera excutiunt concipit. > Phrygiae petendo suisque extimuit, super, pars quod audet! Turba negarem. > Fuerat attonitus; et dextra retinet sidera ulnas undas instimulat vacuae > generis? *Agnus* dabat et ignotis dextera, sic tibi pacis **feriente at mora** > euhoeque *comites hostem* vestras Phineus. Vultuque sanguine dominoque [metuit > risi](http://iuvat.org/eundem.php) fama vergit summaque meus clarissimus > artesque tinguebat successor nominis cervice caelicolae. ## Limitibus misere sit Aurea non fata repertis praerupit feruntur simul, meae hosti lentaque *citius levibus*, cum sede dixit, Phaethon texta. *Albentibus summos* multifidasque iungitur loquendi an pectore, mihi ursaque omnia adfata, aeno parvumque in animi perlucentes. Epytus agis ait vixque clamat ornum adversam spondet, quid sceptra ipsum **est**. Reseret nec; saeva suo passu debentia linguam terga et aures et cervix [de](http://www.amnem.io/pervenit.aspx) ubera. Coercet gelidumque manus, doluit volvitur induta? ## Enim sua Iuvenilior filia inlustre templa quidem herbis permittat trahens huic. In cruribus proceres sole crescitque *fata*, quos quos; merui maris se non tamen in, mea. ## Germana aves pignus tecta Mortalia rudibusque caelum cognosceret tantum aquis redito felicior texit, nec, aris parvo acre. Me parum contulerant multi tenentem, gratissime suis; vultum tu occupat deficeret corpora, sonum. E Actaea inplevit Phinea concepit nomenque potest sanguine captam nulla et, in duxisses campis non; mercede. Dicere cur Leucothoen obitum? Postibus mittam est *nubibus principium pluma*, exsecratur facta et. Iunge Mnemonidas pallamque pars; vere restitit alis flumina quae **quoque**, est ignara infestus Pyrrha. Di ducis terris maculatum At sede praemia manes nullaque! # At me ipso nepotibus nunc celebratior genus ## Tanto oblite Lorem markdownum pectora novis patenti igne sua opus aurae feras materiaque illic demersit imago et aristas questaque posset. Vomit quoque suo inhaesuro clara. Esse cumque, per referri triste. Ut exponit solisque communis in tendens vincetis agisque iamque huic bene ante vetat omina Thebae rates. Aeacus servat admonitu concidit, ad resimas vultus et rugas vultu **dignamque** Siphnon. Quam iugulum regia simulacra, plus meruit humo pecorumque haesit, ab discedunt dixit: ritu pharetramque. Exul Laurenti orantem modo, per densum missisque labor manibus non colla unum, obiectat. Tu pervia collo, fessus quae Cretenque Myconon crate! Tegumenque quae invisi sudore per vocari quaque plus ventis fluidos. Nodo perque, fugisse pectora sorores. ## Summe promissa supple vadit lenius Quibus largis latebris aethera versato est, ait sentiat faciemque. Aequata alis nec Caeneus exululat inclite corpus est, ire **tibi** ostendens et tibi. Rigent et vires dique possent lumina; **eadem** dixit poma funeribus paret et felix reddebant ventis utile lignum. 1. Remansit notam Stygia feroxque 2. Et dabit materna 3. Vipereas Phrygiaeque umbram sollicito cruore conlucere suus 4. Quarum Elis corniger 5. Nec ieiunia dixit Vertitur mos ortu ramosam contudit dumque; placabat ac lumen. Coniunx Amoris spatium poenamque cavernis Thebae Pleiadasque ponunt, rapiare cum quae parum nimium rima. ## Quidem resupinus inducto solebat una facinus quae Credulitas iniqua praepetibus paruit prospexit, voce poena, sub rupit sinuatur, quin suum ventorumque arcadiae priori. Soporiferam erat formamque, fecit, invergens, nymphae mutat fessas ait finge. 1. Baculum mandataque ne addere capiti violentior 2. Altera duas quam hoc ille tenues inquit 3. Sicula sidereus latrantis domoque ratae polluit comites 4. Possit oro clausura namque se nunc iuvenisque 5. Faciem posuit 6. Quodque cum ponunt novercae nata vestrae aratra Ite extrema Phrygiis, patre dentibus, tonso perculit, enim blanda, manibus fide quos caput armis, posse! Nocendo fas Alcyonae lacertis structa ferarum manus fulmen dubius, saxa caelum effuge extremis fixum tumor adfecit **bella**, potentes? Dum nec insidiosa tempora tegit [spirarunt](http://mihiferre.net/iuvenes-peto.html). Per lupi pars foliis, porreximus humum negant sunt subposuere Sidone steterant auro. Memoraverit sine: ferrum idem Orion caelum heres gerebat fixis? # 3rd Level of Menu Nefas discordemque domino montes numen tum humili nexilibusque exit, Iove. Quae miror esse, scelerisque Melaneus viribus. Miseri laurus. Hoc est proposita me ante aliquid, aura inponere candidioribus quidque accendit bella, sumpta. Intravit quam erat figentem hunc, motus de fontes parvo tempestate. iscsi_virus = pitch(json_in_on(eupViral), northbridge_services_troubleshooting, personal( firmware_rw.trash_rw_crm.device(interactive_gopher_personal, software, -1), megabit, ergonomicsSoftware(cmyk_usb_panel, mips_whitelist_duplex, cpa))); if (5) { managementNetwork += dma - boolean; kilohertz_token = 2; honeypot_affiliate_ergonomics = fiber; } mouseNorthbridge = byte(nybble_xmp_modem.horse_subnet( analogThroughputService * graphicPoint, drop(daw_bit, dnsIntranet), gateway_ospf), repository.domain_key.mouse(serverData(fileNetwork, trim_duplex_file), cellTapeDirect, token_tooltip_mashup( ripcordingMashup))); module_it = honeypot_driver(client_cold_dvr(593902, ripping_frequency) + coreLog.joystick(componentUdpLink), windows_expansion_touchscreen); bashGigabit.external.reality(2, server_hardware_codec.flops.ebookSampling( ciscNavigationBacklink, table + cleanDriver), indexProtocolIsp); # 4th Level of Menu ## Caesorum illa tu sentit micat vestes papyriferi Inde aderam facti; Theseus vis de tauri illa peream. Oculos **uberaque** non regisque vobis cursuque, opus venit quam vulnera. Et maiora necemque, lege modo; gestanda nitidi, vero? Dum ne pectoraque testantur. Venasque repulsa Samos qui, exspectatum eram animosque hinc, [aut manes](http://www.creveratnon.net/apricaaetheriis), Assyrii. Cupiens auctoribus pariter rubet, profana magni super nocens. Vos ius sibilat inpar turba visae iusto! Sedes ante dum superest **extrema**. # Asciinema Asciinema shortcode integrates asciinema player into the markdown page. ```tpl {{}} ``` {{< asciinema cast="asciinema-627097.cast" loop=true autoplay=true speed=2 >}} ## Parameters All parameters added to the shortcode will be transformed to options for Asciinema player, expect `cast` parameter that is used to locate cast file. Cast file follows same rules as portable image, it could be site resource, page resource or remote file URL. [List of Asciinema options](https://docs.asciinema.org/manual/player/options/) # Buttons Buttons are styled links that can lead to local page or external link. ## Example ```tpl {{}}Get Home{{}} {{}}Contribute{{}} ``` {{}} {{}} # Columns Columns help organize shorter pieces of content horizontally for readability. `columns` shortcode styles markdown list as up to 3 columns. ## Example ```tpl {{%/* columns [ratio="1:1"] [class="..."] */%}} - ### Left Content Lorem markdownum insigne... - ### Mid Content Lorem markdownum insigne... - ### Right Content Lorem markdownum insigne... {{%/* /columns */%}} ``` {{% columns %}} - ### Left Content Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. Miseratus fonte Ditis conubia. - ### Mid Content Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! - ### Right Content Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. Miseratus fonte Ditis conubia. {{% /columns %}} ## Settings size ratio for columns ```tpl {{%/* columns ratio="1:2" */%}} - ## x1 Column Lorem markdownum insigne... - ## x2 Column Lorem markdownum insigne... {{%/* /columns */%}} ``` {{% columns ratio="1:2" %}} - ### x1 Column Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. Miseratus fonte Ditis conubia. - ### x2 Column Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. Miseratus fonte Ditis conubia. {{% /columns %}} # Details Details shortcode is a helper for `details` html5 element. To collapse the details either omit the `open` keyword when using positional arguments or set `open=false` when using parameters. ## Example with positional arguments ```tpl {{%/* details "Title" [open] */%}} ## Markdown content Lorem markdownum insigne... {{%/* /details */%}} ``` {{% details "Title" open %}} ## Markdown content Lorem markdownum insigne... {{% /details %}} ## Example with parameters ```tpl {{%/* details title="Title" open=true */%}} ## Markdown content Lorem markdownum insigne... {{%/* /details */%}} ``` {{% details title="Title" open=true %}} ## Markdown content Lorem markdownum insigne... {{% /details %}} # Badges > [!WARNING] > Experimental, could change in the future or be removed Badges can be used to annotate your pages with additional information or mark specific places in markdown content. {{< badge title="Title" value="Value" >}} {{< badge style="info" title="Hugo" value="0.147.6" >}} {{< badge style="success" title="Build" value="Passing" >}} {{< badge style="warning" title="Coverage" value="25%" >}} {{< badge style="danger" title="Issues" value="120" >}} ## Examples | Shortcode | Output | | -- | -- | | `{{}}` | {{< badge style="info" title="Hugo" value="0.147.6" >}} | | `{{}}` | {{< badge style="success" title="Build" value="Passing" >}} | | `{{}}` | {{< badge style="warning" title="Coverage" value="25%" >}} | | `{{}}` | {{< badge style="danger" title="Issues" value="120" >}} | | | | | `{{}}` | {{< badge style="info" title="Title" >}} | | `{{}}` | {{< badge style="info" value="Value" >}} | | `{{}}` | {{< badge value="Default" >}} | ## Use in links A badge can be wrapped in markdown link producing following result: [{{< badge title="Hugo" value="0.147.6" >}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6) ```tpl [{{}}](https://github.com/gohugoio/hugo/releases/tag/v0.147.6) ``` # Cards > [!WARNING] > Experimental, could change in the future or be removed ## Example {{% columns %}} - {{< card image="placeholder.svg" >}} ### Line 1 Line 2 {{< /card >}} - {{< card image="placeholder.svg" >}} This is tab MacOS content. {{< /card >}} {{% /columns %}} {{% columns %}} - {{< card href="/docs/shortcodes/experimental/cards" >}} **Markdown** Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa. {{< /card >}} - {{< card >}} Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie. {{< /card >}} - {{< card title="Card" >}} ### Heading This is tab MacOS content. {{< /card >}} {{% /columns %}} # Images > [!WARNING] > Experimental, could change in the future or be removed Image shortcode produces an image that can be clicked to expand. ## Example ```go-html-template {{}} ``` {{< image src="placeholder.svg" alt="A placeholder" title="A placeholder" loading="lazy" >}} ## Parameters `src` {{< badge style="warning" title="Required" >}} : The link to the image `class` {{< badge style="info" title="Optional" >}} : An optional CSS class name that will be applied to the `img` element `alt` {{< badge style="info" title="Optional" >}} : An optional alternate text for the image `title` {{< badge style="info" title="Optional" >}} : An optional title for the image `loading` {{< badge style="info" title="Optional" >}} : Sets `loading` control for the image: `lazy`, `eager` or `auto` # Hints Hint shortcode can be used as a hint/alert/notification block. ```tpl {{%/* hint [info|success|warning|danger] */%}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa {{%/* /hint */%}} > [!NOTE|TIP|IMPORTANT|WARNING|CAUTION] > **Markdown content** > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa ``` ## Example {{% hint %}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa {{% /hint %}} {{% hint info %}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa {{% /hint %}} {{% hint success %}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa {{% /hint %}} {{% hint warning %}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa {{% /hint %}} {{% hint danger %}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa {{% /hint %}} ## Support for markdown alerts > [!NOTE] > **Note** > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa > [!TIP] > **Tip** > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa > [!IMPORTANT] > **Important** > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa > [!WARNING] > **Warning** > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa > [!CAUTION] > **Caution** > Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat > stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa # Mermaid Chart [MermaidJS](https://mermaid-js.github.io/) is library for generating svg charts and diagrams from text. {{% hint info %}} **Override Mermaid initialization config** To override the [initialization config](https://mermaid-js.github.io/mermaid/#/Setup) for Mermaid, create a `mermaid.json` file in your `assets` folder! {{% /hint %}} ## Example {{% columns %}} - ````tpl ```mermaid stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left. ``` ```` - ```mermaid stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left. ``` {{% /columns %}} {{% columns %}} - ```tpl {{}} stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left. {{< /mermaid */>}} ``` - {{< mermaid >}} stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left. {{< /mermaid >}} {{% /columns %}} ## Diagrams Explore more diagrams and syntax on Mermaid [documentation page](https://mermaid.js.org/syntax/flowchart.html). {{% columns %}} ```mermaid stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left. ``` ```mermaid sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great! Alice-)John: See you later! ``` ```mermaid --- title: Animal example --- classDiagram note "From Duck till Zebra" Animal <|-- Duck note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging" Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() } ``` ```mermaid --- title: Simple sample --- stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*] ``` <---> ```mermaid --- title: Example Git diagram --- gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit ``` ```mermaid gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1, 20d section Another Task in Another :2014-01-12, 12d another task :24d ``` ```mermaid pie title Pets adopted by volunteers "Dogs" : 386 "Cats" : 85 "Rats" : 15 ``` ```mermaid quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] ``` {{% /columns %}} # Steps Steps shortcode styles numbered list as series of points for better content organization. ```tpl {{%/* steps */%}} 1. ## Suspendisse sed congue orci. ... 2. ## Maecenas scelerisque sem. ... 3. ## Etiam risus purus. ... 4. ## Curabitur sed lacinia velit. ... {{%/* /steps */%}} ``` ## Example {{% steps %}} 1. ## Suspendisse sed congue orci. Suspendisse sed congue orci, eu congue metus. Nullam feugiat urna massa, et fringilla metus consectetur molestie. Curabitur pellentesque sodales ipsum, sed efficitur libero euismod ac. Donec sit amet erat nunc. Suspendisse porta nisl velit, quis auctor massa commodo nec. Donec sollicitudin tellus sit amet massa condimentum luctus. Etiam molestie at ante et convallis. 2. ## Maecenas scelerisque sem. Maecenas scelerisque sem a tellus dignissim, in sodales neque varius. Integer quis ex quis sem posuere consequat. Morbi interdum ex et mollis maximus. Proin sed quam nisl. Donec tempus non risus vel auctor. Ut ultricies vitae urna in laoreet. Phasellus cursus nunc sit amet sodales euismod. Suspendisse potenti. 3. ## Etiam risus purus. Etiam risus purus, suscipit a orci quis, mollis mollis ante. Vestibulum congue nisl malesuada tortor egestas, a lobortis tellus dictum. Nam nec ultrices justo. Donec malesuada dignissim posuere. 4. ## Curabitur sed lacinia velit. Curabitur sed lacinia velit. Nullam sed ante non quam lobortis hendrerit. Phasellus elementum, erat sit amet imperdiet pulvinar, odio massa lobortis ipsum, in tincidunt metus dolor vel ligula. {{% /steps %}} # Tabs Tabs let you organize content by context, for example installation instructions for each supported platform. ```tpl {{}} {{%/* tab "MacOS" */%}} # MacOS Content {{%/* /tab */%}} {{%/* tab "Linux" */%}} # Linux Content {{%/* /tab */%}} {{%/* tab "Windows" */%}} # Windows Content {{%/* /tab */%}} {{}} ``` ## Example {{< tabs >}} {{% tab "MacOS" %}} # MacOS This is tab **MacOS** content. Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. Miseratus fonte Ditis conubia. {{% /tab %}} {{% tab "Linux" %}} # Linux This is tab **Linux** content. Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. Miseratus fonte Ditis conubia. {{% /tab %}} {{% tab "Windows" %}} # Windows This is tab **Windows** content. Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. Miseratus fonte Ditis conubia. {{% /tab %}} {{< /tabs >}} # KaTeX KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/) {{% hint info %}} **Override KaTeX initialization config** To override the [initialization config](https://katex.org/docs/options.html) for KaTeX, create a `katex.json` file in your `assets` folder! {{% /hint %}} # Example {{< katex />}} ## Activation KaTeX is activated on the page by first use of the shortcode or render block. you can force activation with empty `{{}}` and use delimiters defined in configuration in `assets/katex.json`. ## Rendering as block {{% columns %}} ```latex {{}} f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi {{< /katex */>}} ``` ````latex ```katex f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi ``` ```` ````latex $$ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi $$ ```` <---> {{< katex display=true >}} f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi {{< /katex >}} --- ```katex f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi ``` --- $$ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi $$ {{% /columns %}} ## Rendering inline When KaTeX is active on the page it is possible to write inline expressions. | Code | Output | | -- | -- | | `{{}}\pi(x){{< /katex */>}}` | {{< katex >}}\pi(x){{< /katex >}} | | `\\( \pi(x) \\)` | \\( \pi(x) \\) | ## Configuration KaTeX configuration could be adjusted by editing `assets/katex.json` file. For example to enabled inline delimiters `$..$` put content below into the file. ```json { "delimiters": [ {"left": "$$", "right": "$$", "display": true}, {"left": "$", "right": "$", "display": false}, {"left": "\\(", "right": "\\)", "display": false}, {"left": "\\[", "right": "\\]", "display": true} ] } ```