File: README.md Copy Chapter

[The Academic CV That Gets You Hired](https://github.com/HugoBlox/hugo-theme-academic-cv)

The Portfolio That Works While You Sleep

Why This Template? Copy Chapter

Most academic CVs are static PDFs that get lost in the pile. This is an always-on portfolio that works 24/7 to advance your career:

• Students & grads applying to top labs and industry roles — stand out with a living portfolio, not a flat PDF
• Researchers who want a citable online presence with publications, projects, and talks in one place
• Faculty & PIs showcasing their lab, group news, and team members
• Anyone with publications who wants auto-imported citations from BibTeX/DOI without manual formatting

"My citations went up 3x after switching to this template. Colleagues started finding my work through Google Scholar links back to my site. The BibTeX auto-sync is a lifesaver."
— Dr. Li Zhang, AI Research Scientist

"I set this up during a weekend and my PhD students had their profiles live by Monday. They just edit Markdown — no tickets to IT, no WordPress logins."
— Prof. Sarah Chen, Computer Science, ETH Zürich

Features Copy Chapter

🚀 Get Started Copy Chapter

Step 1: Deploy Your Site Copy Section

Option A: Launch in browser (fastest — no install needed)

[!TIP]
Deploy a live site in 60 seconds — no software to install:
Deploy Academic CV free

Option B: Use the CLI

# Requires Hugo Extended & Node.js
npx hugoblox create site --template academic-cv

Step 2: Customize With AI + Visual Editing Copy Section

| ✨ Hugo Chat — AI customization

Tell Hugo Chat what you want in plain English. It generates structured pages with the right front matter, shortcodes, and blocks for this template.

"Add a publications page with my 2024 papers from this BibTeX file"

Try Hugo Chat — free | Ownable CMS — visual editing in VS Code

1. Install Ownable CMS
2. Open your project in VS Code
3. Click the Ownable icon to start editing visually |
   | --- | --- |

Ownable CMS: Drag-and-drop page builder inside VS Code.

[!NOTE]
New to Hugo? No problem. You don't need to know Hugo — edit visually or write Markdown. Hugo is the engine under the hood that makes your site fast, secure, and free to host. Learn more →

💎 Go Premium Copy Chapter

Love the free version? Academic CV Pro and Resume Pro take it further:

• Premium designs that make an unforgettable first impression
• Advanced timeline and layout options
• Full-featured course/lecture sections
• Remove attribution, priority support

🏆 Why HugoBlox? Copy Chapter

Why not just use WordPress, Webflow, or an AI builder like Lovable?

[!IMPORTANT]
Your content is plain Markdown files. No lock-in, no database, no vendor dependency. If you ever want to leave, take your files and go.

FAQ Copy Chapter

Do I need to know Hugo?
No. Edit visually with Ownable CMS or write Markdown. Hugo is the build engine — you don't need to touch it.

Can I import my existing publications?
Yes. Drop a BibTeX file and publication pages are generated automatically with proper citations, metadata, and links.

Can I host for free?
Yes. GitHub Pages, Netlify, Vercel, and Cloudflare Pages all have free tiers for static sites.

Can I migrate my content later?
Yes. Your site is just Markdown files in a folder. Copy them anywhere.

What's Hugo Chat?
An AI assistant trained on Hugo and HugoBlox docs. Describe what you want and it generates the right pages with correct front matter. Free to try.

Can I cancel Pro anytime?
Yes. No questions asked.

🚀 Ready to launch?

Community & Support Copy Chapter

• 💬 Discord — ask questions, share your site
• 📚 Docs
• ⭐ Star HugoBlox — help others find it
• 🐦 Follow on X

Sponsors Copy Section

❤️ Sponsor on GitHub | 🏢 Become a Partner

Copyright 2016-present Lore Labs.
Released under the MIT License.

File: content/authors/_index.md Copy Chapter

To publish author profile pages, remove all the `build` and `cascade` settings below.

build:
render: never
cascade:
build:
render: never
list: always

File: content/blog/data-visualization/index.md Copy Chapter

title: 📈 Communicate your results effectively with the best data visualizations
summary: Use popular tools such as HuggingFace, Plotly, Mermaid, and data frames.
date: 2023-10-25
authors:

• me
  tags:
• Hugo
• Hugo Blox
• Markdown
  cover:
  image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
  position:
  x: 50
  y: 40
  overlay:
  enabled: true
  type: "gradient"
  opacity: 0.4
  gradient: "bottom"
  fade:
  enabled: true
  height: "80px"
  icon:
  name: "✨"
  image:
  caption: 'Image credit: Unsplash'

Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.

Use popular tools such as Plotly, Mermaid, and data frames.

Embed Rich Content Copy Chapter

HuggingFace Model

{{< embed platform="huggingface" resource="google/embeddinggemma-300m" type="model" >}}

HuggingFace Dataset

{{< embed platform="huggingface" resource="fka/awesome-chatgpt-prompts" type="dataset" >}}

GitHub Repository

{{< embed platform="github" resource="HugoBlox/kit" type="repo" >}}

Custom embed with manual data

{{< embed url="https://example.com" title="My Custom Resource" description="A great resource for learning" >}}

Custom Images Copy Section

Embed beautiful images from any source with Hugo image processing (Unsplash, custom URLs, etc.):

{{< embed url="https://example.com" title="Data Visualization Guide" description="Beautiful data visualization workspace" image="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=800&h=600&auto=format&fit=crop" width="800" height="600" quality="90" >}}

You can also add images to any platform embed:

{{< embed platform="github" resource="plotly/plotly.py" type="repo" image="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=600&h=400&auto=format&fit=crop" width="600" height="400" >}}

Charts Copy Chapter

Hugo Blox supports the popular Plotly format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!

Save your Plotly JSON in your page folder, for example line-chart.json, and then add the {{</* chart data="line-chart" */>}} shortcode where you would like the chart to appear.

Demo:

{{< chart data="line-chart" >}}

You might also find the Plotly JSON Editor useful.

Diagrams Copy Chapter

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example flowchart:

```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

renders as

graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]

An example sequence diagram:

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```

renders as

sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
    John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!

An example class diagram:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

renders as

classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label

An example state diagram:

```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

renders as

stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]

Data Frames Copy Chapter

Save your spreadsheet as a CSV file in your page's folder and then render it by adding the Table shortcode to your page:

{{</* table path="results.csv" header="true" caption="Table 1: My results" */>}}

renders as

{{< table path="results.csv" header="true" caption="Table 1: My results" >}}

Interactive Buttons Copy Chapter

Add engaging call-to-action buttons to your data visualization posts:

Basic Buttons Copy Section

{{< button url="/" >}}Contact Us{{< /button >}}

{{< button url="https://plotly.com/python/" new_tab="true" style="secondary" >}}Learn Plotly{{< /button >}}

{{</* button url="/" */>}}Contact Us{{</* /button */>}}

{{</* button url="https://plotly.com/python/" new_tab="true" style="secondary" */>}}Learn Plotly{{</* /button */>}}

Styled Buttons for Data Actions Copy Section

{{< button url="#" style="primary" size="lg" align="center" icon="chart-bar" >}}View Dashboard{{< /button >}}

{{< button url="/data/results.csv" style="outline" icon="document-arrow-down" >}}Download Data{{< /button >}}

{{< button url="https://github.com/HugoBlox" new_tab="true" style="ghost" icon="arrow-top-right-on-square" icon_position="right" >}}View Source Code{{< /button >}}

{{</* button url="#" style="primary" size="lg" align="center" icon="chart-bar" */>}}View Dashboard{{</* /button */>}}

{{</* button url="/data/results.csv" style="outline" icon="document-arrow-down" */>}}Download Data{{</* /button */>}}

{{</* button url="https://github.com/HugoBlox" new_tab="true" style="ghost" icon="arrow-top-right-on-square" icon_position="right" */>}}View Source Code{{</* /button */>}}

Multiple Aligned Buttons Copy Section

{{< button url="https://jupyter.org/" new_tab="true" style="secondary" rounded="full" align="center" >}}Try Jupyter{{< /button >}}

{{< button url="https://colab.research.google.com/" new_tab="true" style="primary" rounded="full" align="center" icon="rocket-launch" >}}Open in Colab{{< /button >}}

{{</* button url="https://jupyter.org/" new_tab="true" style="secondary" rounded="full" align="center" */>}}Try Jupyter{{</* /button */>}}

{{</* button url="https://colab.research.google.com/" new_tab="true" style="primary" rounded="full" align="center" icon="rocket-launch" */>}}Open in Colab{{</* /button */>}}

Did you find this page helpful? Consider sharing it 🙌 Copy Chapter

File: content/blog/get-started/index.md Copy Chapter

title: 🎉 Easily create your own simple yet highly customizable blog
summary: Take full control of your personal brand and privacy by migrating away from the big tech platforms!
date: 2023-10-27

Featured image

Place an image named `featured.jpg/png` in this page's folder and customize its options here.

image:
caption: 'Image credit: Unsplash'

cover:
image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
position:
x: 50
y: 40
overlay:
enabled: true
type: "gradient"
opacity: 0.4
gradient: "bottom"
fade:
enabled: true
height: "80px"
icon:
name: "✨"

authors:

• me
• Ted

tags:

• Academic
• Hugo Blox
• Markdown

content_meta: trending: true Copy Chapter

Welcome 👋

{{< toc mobile_only=true is_open=true >}}

Overview Copy Chapter

1. The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site
2. The template can be modified and customised to suit your needs. It's a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a no-code solution (write in Markdown and customize with YAML parameters) and having flexibility to later add even deeper personalization with HTML and CSS
3. You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more

Get Started Copy Section

[!TIP]+ Quick Start Guide
New to Hugo Blox? Follow these steps to get your site up and running in minutes!

• 👉 Create a new site
• 📚 Personalize your site
• 💬 Chat with the Hugo Blox community or Hugo community
• 🐦 Twitter: @GoOwnable #MadeWithHugoBlox
• 💡 Request a feature or report a bug for Hugo Blox
• ⬆️ Updating Hugo Blox? View the Update Guide and Release Notes

[!IMPORTANT]
Remember to backup your site before making major updates!

Crowd-funded open-source software Copy Chapter

To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.

[❤️ Click here to become a sponsor and help support Hugo Blox's future ❤️](https://hugoblox.com/sponsor/) Copy Section

As a token of appreciation for sponsoring, you can unlock these awesome rewards and extra features 🦄✨

Ecosystem Copy Chapter

• Bibtex To Markdown: Automatically import publications from BibTeX

Inspiration Copy Chapter

Learn what other creators are building with this template.

Features Copy Chapter

[!NOTE]+ Enhanced Markdown Support
Hugo Blox now supports GitHub and Obsidian-style callouts! Use standard Markdown alert syntax like > [!NOTE] for better portability.

• Page builder - Create anything with no-code blocks and elements
• Edit any type of content - Blog posts, publications, talks, slides, projects, and more!
• Create content in Markdown, Jupyter, or RStudio
• Plugin System - Fully customizable color and font themes
• Display Code and Math - Code syntax highlighting and LaTeX math supported
• Integrations - Google Analytics, Disqus commenting, Maps, Contact Forms, and more!
• Beautiful Site - Simple and refreshing one-page design
• Industry-Leading SEO - Help get your website found on search engines and social media
• Media Galleries - Display your images and videos with captions in a customizable gallery
• Mobile Friendly - Look amazing on every screen with a mobile friendly version of your site
• Multi-language - 35+ language packs including English, 中文, and Português
• Multi-user - Each author gets their own profile page
• Privacy Pack - Assists with GDPR
• Stand Out - Bring your site to life with animation, parallax backgrounds, and scroll effects
• One-Click Deployment - No servers. No databases. Only files.

[!WARNING]+ Version Requirements
The new Markdown alert syntax requires Hugo v0.132.0 or later. Make sure you're using a compatible version!

Themes Copy Chapter

Hugo Blox and its templates come with automatic day (light) and night (dark) mode built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.

Choose a stunning theme and font for your site. Themes are fully customizable.

License Copy Chapter

Released under the MIT license.

File: content/blog/notebook-onboarding/index.md Copy Chapter

title: ⚡️ Turn Jupyter Notebooks into Blog Posts
summary: Publish your data science and research directly from Jupyter Notebooks. No screenshots required.
date: 2024-07-15
authors:

• me
  tags:
• Hugo Blox
• Jupyter
• Open Science
• Tutorials
  cover:

image: cover.jpg # Auto-detected from cover image in this folder

icon:
name: "📔"
image:
caption: "Image credit: HugoBlox"
focal_point: Center
placement: 1
content_meta:

trending: true Copy Chapter

As a researcher or data scientist, your work often lives in Jupyter Notebooks. But sharing those insights effectively usually means taking screenshots, messy copy-pasting, or exporting to PDF.

Hugo Blox changes that. With the {{</* notebook */>}} shortcode, you can render your actual .ipynb files directly as beautiful, interactive blog posts or project pages. Keep your code, outputs, and narrative in one place.

{{< toc mobile_only=true is_open=true >}}

Why publish notebooks? Copy Chapter

[!TIP]
Reproducible Research: By publishing the actual notebook, you allow others to download and run your code, verifying your results and building upon your work.

• No more screenshots – Render crisp code and vector plots directly from your source.
• Theme consistent – Notebooks automatically adapt to your site's theme (including dark mode).
• Flexible sourcing – Display notebooks from your assets/ folder, page bundles, or even directly from a remote GitHub URL.
• Interactive – Users can copy code blocks or download the full notebook to run locally.

Example: Data Science Workflow Copy Chapter

Below is a live example of a notebook rendered right here in this post. Notice how the markdown, code, and outputs (text, HTML, and JSON) are all preserved and styled.

{{< notebook
src="hugoblox-onboarding.ipynb"
title="Launch Readiness Analysis"
show_metadata=true
line_numbers=true
dense=false
download_label="Download notebook"
show_outputs=true

}}

How to add a notebook Copy Chapter

1. Save your notebook. Place your .ipynb file in assets/notebooks/ (for global access) or inside a page bundle (like content/blog/my-post/analysis.ipynb).
2. Add the shortcode. In any Markdown page, simply use:
   {{</* notebook src="analysis.ipynb" */>}}
3. Customize. You can hide code cells for non-technical audiences (show_code=false) or just show the output (show_outputs=true).

[!IMPORTANT]
Hugo Blox respects your privacy. Notebook rendering happens statically at build time—no third-party services required.

Next steps Copy Chapter

• Try it out: Drop one of your existing notebooks into this site and see how it looks.
• Link your papers: Use the Embed shortcode to link your notebook to your latest arXiv preprint or GitHub repository.
• Get help: Join the community on Discord or check the documentation.

Happy researching! 🚀

File: content/blog/project-management/index.md Copy Chapter

title: ✅ Manage your projects
summary: Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!
date: 2023-10-23
authors:

• me
  tags:
• Hugo Blox
• Markdown
  image:
  caption: 'Image credit: Unsplash'
  cover:
  image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
  position:
  x: 50
  y: 40
  overlay:
  enabled: true
  type: "gradient"
  opacity: 0.4
  gradient: "bottom"
  fade:
  enabled: true
  height: "80px"
  icon:
  name: "✨"

Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!

Ideation Copy Chapter

Hugo Blox supports a Markdown extension for mindmaps.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:

renders as

- Hugo Modules
  - Hugo Blox
  - netlify
  - netlify-cms
  - slides

Diagrams Copy Chapter

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example Gantt diagram:

```mermaid
gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d
```

renders as

gantt
section Section
Completed :done,    des1, 2014-01-06,2014-01-08
Active        :active,  des2, 2014-01-07, 3d
Parallel 1   :         des3, after des1, 1d
Parallel 2   :         des4, after des1, 1d
Parallel 3   :         des5, after des3, 1d
Parallel 4   :         des6, after des4, 1d

Todo lists Copy Chapter

You can even write your todo lists in Markdown too:

- [x] Write math example
  - [x] Write diagram example
- [ ] Do something else

renders as

• Write math example
  • Write diagram example
• Do something else

Did you find this page helpful? Consider sharing it 🙌 Copy Chapter

File: content/blog/second-brain/index.md Copy Chapter

title: 🧠 Sharpen your thinking with a second brain
summary: Create a personal knowledge base and share your knowledge with your peers.
date: 2023-10-26
authors:

• me
  tags:
• Second Brain
• Markdown
  image:
  caption: 'Image credit: Unsplash'
  cover:
  image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
  position:
  x: 50
  y: 40
  overlay:
  enabled: true
  type: "gradient"
  opacity: 0.4
  gradient: "bottom"
  fade:
  enabled: true
  height: "80px"
  icon:
  name: "✨"

Create a personal knowledge base and share your knowledge with your peers.

Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.

Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.

Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.

Mindmaps Copy Chapter

Hugo Blox supports a Markdown extension for mindmaps.

With this open format, can even edit your mindmaps in other popular tools such as Obsidian.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:

renders as

- Hugo Modules
  - Hugo Blox
  - netlify
  - netlify-cms
  - slides

Anh here's a more advanced mindmap with formatting, code blocks, and math:

renders as

- Mindmaps
  - Links
    - [Hugo Blox Docs](https://docs.hugoblox.com/)
    - [Discord Community](https://discord.gg/z8wNYzb)
    - [GitHub](https://github.com/HugoBlox/kit)
  - Features
    - Markdown formatting
    - **inline** ~~text~~ *styles*
    - multiline
      text
    - `inline code`
    - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

Highlighting Copy Chapter

Highlight important text with mark:

<mark>Highlighted text</mark>

Callouts Copy Chapter

Use callouts (aka asides, hints, or alerts) to draw attention to notes, tips, and warnings.

Use the > [!NOTE] syntax to create a callout.

> [!NOTE]
> A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

renders as

[!NOTE]
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

Or use the warning callout type so your readers don't miss critical details:

[!WARNING]
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

Did you find this page helpful? Consider sharing it 🙌 Copy Chapter

File: content/blog/teach-courses/index.md Copy Chapter

title: 👩🏼‍🏫 Teach academic courses
summary: Embed videos, podcasts, code, LaTeX math, and even test students!
date: 2023-10-24
math: true
authors:

• me
  tags:
• Hugo
• HugoBlox Kit
• Markdown
  image:
  caption: 'Embed rich media such as videos and LaTeX math'
  cover:
  image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?q=80&w=2560"
  position:
  x: 50
  y: 40
  overlay:
  enabled: true
  type: "gradient"
  opacity: 0.4
  gradient: "bottom"
  fade:
  enabled: true
  height: "80px"
  icon:
  name: "✨"

HugoBlox Kit is designed to give technical content creators a seamless experience. You can focus on the content and the HugoBlox Kit which this template is built upon handles the rest.

Embed videos, podcasts, code, LaTeX math, and even test students!

On this page, you'll find some examples of the types of technical content that can be rendered with Hugo Blox.

Citation Copy Chapter

Here's an example of citing a publication using the cite shortcode:

{{< cite page="/publications/preprint" view="citation" >}}

You can also use the default view by omitting the view parameter:

{{< cite page="/publications/conference-paper" >}}

Video Copy Chapter

Teach your course by sharing videos with your students. Choose from one of the following approaches:

Youtube:

{{</* youtube D2vj0WcvH5c */>}}

{{< youtube D2vj0WcvH5c >}}

Bilibili:

{{</* bilibili BV1WV4y1r7DF */>}}

Video file

Videos may be added to a page by either placing them in your assets/media/ media library or in your page's folder, and then embedding them with the video shortcode:

{{</* video src="my_video.mp4" controls="yes" */>}}

Podcast Copy Chapter

You can add a podcast or music to a page by placing the MP3 file in the page's folder or the media library folder and then embedding the audio on your page with the audio shortcode:

{{</* audio src="ambient-piano.mp3" */>}}

Try it out:

{{< audio src="ambient-piano.mp3" >}}

Test students Copy Chapter

Provide a simple yet fun self-assessment by revealing the solutions to challenges with the spoiler shortcode:

{{</* spoiler text="👉 Click to view the solution" */>}}
You found me!
{{</* /spoiler */>}}

renders as

{{< spoiler text="👉 Click to view the solution" >}} You found me 🎉 {{< /spoiler >}}

Math Copy Chapter

HugoBlox Kit supports a Markdown extension for $\LaTeX$ math. Enable math by setting the math: true option in your page's front matter, or enable math for your entire site by toggling math in your config/_default/params.yaml file:

features:
  math:
    enable: true

To render inline or block math, wrap your LaTeX math with $...$ or $$...$$, respectively.

Example math block:

$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$

renders as

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left |\nabla F(\mathbf{x}{n}) - \nabla F(\mathbf{x}{n-1}) \right |^2}$$

Example inline math $\nabla F(\mathbf{x}_{n})$ renders as $\nabla F(\mathbf{x}_{n})$.

Example multi-line math using the math linebreak (\\):

$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$

renders as

$$
f(k;p_{0}^{}) = \begin{cases}p_{0}^{} & \text{if }k=1, \
1-p_{0}^{*} & \text{if }k=0.\end{cases}
$$

Code Copy Chapter

HugoBlox Kit utilises Hugo's Markdown extension for highlighting code syntax. The code theme can be selected in the config/_default/params.yaml file.

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

renders as

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

Inline Images Copy Chapter

{{</* icon name="python" */>}} Python

renders as

{{< icon name="python" >}} Python

Did you find this page helpful? Consider sharing it 🙌 Copy Chapter

File: content/courses/hugo-blox/guide/formatting/_index.md Copy Chapter

title: Formatting Copy Chapter

Write rich, engaging content with Markdown and re-usable Hugo Blox components (shortcodes):

{{< cards >}}
{{< card url="button" title="Button" icon="cursor-arrow-rays" >}}
{{< card url="callout" title="Callout" icon="warning" >}}
{{< card url="cards" title="Cards" icon="card" >}}
{{< card url="toggle" title="Spoiler" icon="chevron-right" >}}
{{< card url="steps" title="Steps" icon="one" >}}
{{< /cards >}}