Academic Resources https://academics.jamesflare.com/docs/shortcodes/ Recent content on Academic Resources Hugo -- gohugo.io zh https://academics.jamesflare.com/docs/shortcodes/buttons/ Mon, 01 Jan 0001 00:00:00 +0000 https://academics.jamesflare.com/docs/shortcodes/buttons/ Buttons # Buttons are styled links that can lead to local page or external link. Example # {{< button relref="/" [class="..."] >}}Get Home{{< /button >}} {{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}} Get Home Contribute https://academics.jamesflare.com/docs/shortcodes/columns/ Mon, 01 Jan 0001 00:00:00 +0000 https://academics.jamesflare.com/docs/shortcodes/columns/ Columns # Columns help organize shorter pieces of content horizontally for readability. {{< columns >}} <!-- begin columns block --> # Left Content Lorem markdownum insigne... <---> <!-- magic separator, between columns --> # Mid Content Lorem markdownum insigne... <---> <!-- magic separator, between columns --> # Right Content Lorem markdownum insigne... {{< /columns >}} Example # Left Content # Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! https://academics.jamesflare.com/docs/shortcodes/details/ Mon, 01 Jan 0001 00:00:00 +0000 https://academics.jamesflare.com/docs/shortcodes/details/ Details # Details shortcode is a helper for details html5 element. It is going to replace expand shortcode. Example # {{< details "Title" [open] >}} ## Markdown content Lorem markdownum insigne... {{< /details >}} {{< details title="Title" open=true >}} ## Markdown content Lorem markdownum insigne... {{< /details >}} Title Markdown content # Lorem markdownum insigne… https://academics.jamesflare.com/docs/shortcodes/expand/ Mon, 01 Jan 0001 00:00:00 +0000 https://academics.jamesflare.com/docs/shortcodes/expand/ Expand # Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it. Example # Default # {{< expand >}} ## Markdown content Lorem markdownum insigne... {{< /expand >}} Expand ↕ Markdown content # Lorem markdownum insigne… With Custom Label # {{< expand "Custom Label" "..." >}} ## Markdown content Lorem markdownum insigne... {{< /expand >}} Custom Label ... Markdown content # Lorem markdownum insigne. https://academics.jamesflare.com/docs/shortcodes/hints/ Mon, 01 Jan 0001 00:00:00 +0000 https://academics.jamesflare.com/docs/shortcodes/hints/ Hints # Hint shortcode can be used as hint/alerts/notification block. There are 3 colors to choose: info, warning and danger. {{< hint [info|warning|danger] >}} **Markdown content** Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa {{< /hint >}} Example # Markdown content Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa Markdown content https://academics.jamesflare.com/docs/shortcodes/katex/ Mon, 01 Jan 0001 00:00:00 +0000 https://academics.jamesflare.com/docs/shortcodes/katex/ KaTeX # KaTeX shortcode let you render math typesetting in markdown document. See KaTeX Example # {{< katex [display] [class="text-center"] >}} f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi {{< /katex >}} \[ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi \] Display Mode Example # Here is some inline example: \(\pi(x)\) , rendered in the same line. And below is display example, having display: block \[ f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi \] Text continues here. https://academics.jamesflare.com/docs/shortcodes/mermaid/ Mon, 01 Jan 0001 00:00:00 +0000 https://academics.jamesflare.com/docs/shortcodes/mermaid/ Mermaid Chart # MermaidJS is library for generating svg charts and diagrams from text. Override Mermaid Initialization Config To override the initialization config for Mermaid, create a mermaid.json file in your assets folder! Example # {{< mermaid [class="text-center"]>}} 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. https://academics.jamesflare.com/docs/shortcodes/tabs/ Mon, 01 Jan 0001 00:00:00 +0000 https://academics.jamesflare.com/docs/shortcodes/tabs/ Tabs # Tabs let you organize content by context, for example installation instructions for each supported platform. {{< tabs "uniqueid" >}} {{< tab "MacOS" >}} # MacOS Content {{< /tab >}} {{< tab "Linux" >}} # Linux Content {{< /tab >}} {{< tab "Windows" >}} # Windows Content {{< /tab >}} {{< /tabs >}} Example # MacOS MacOS # This is tab MacOS content. Lorem markdownum insigne. Olympo signis Delphis!