Mediafile Path

Files in public/ can be referenced directly: <img src="001.jpg" />

UIKit Components

This template supports all UIKit components. To check available components, refer to the UIKit documentation. Slideshow example

Grid system example

Fig1 - caption example

Fig2 - caption example

Fig3 - caption example

Video and Slider component example

Image-Comparison-Slider example

Here's our demo text showcasing the power of markdown and KaTeX integration! Markdown allows you to easily format text using simple syntax.

• bold
• italic
• inline code.

You can also create headings of various levels:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Markdown allows you to create tables like the following:

Fictitious AI Benchmark Results

Of course, you can also directly write tables in HTML if needed. For more details, refer to the UIKit Table documentation.

Code blocks are automatically highlighted by highlight.js. To change the theme, import a preferred .css.

// src/components/body.jsx
import { markedHighlight } from "marked-highlight";
import hljs from 'highlight.js';
//import 'highlight.js/styles/base16/gruvbox-dark-hard.css';
import 'highlight.js/styles/base16/github.css';

const renderer = new marked.Renderer();
renderer.code = (code, language) => {
  return `<pre class="hljs"><code class="hljs language-${language}">${code}</code></pre>`
}

$\KaTeX$ enables you to write mathematical expressions beautifully within your text (e.g. $\alpha$, $\beta$, $\gamma$ ). $$ax^2 + bx + c = 0$$ $$\int \oint \sum \prod$$ $$\begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD}$$ KaTeX supports a wide range of mathematical symbols and equations, ensuring your technical content is both clear and visually appealing. With markdown for text formatting and KaTeX for mathematical expressions, our template empowers you to communicate complex ideas effectively. Whether you're writing a scientific paper or a technical blog post, harnessing these tools will elevate your content and engage your readers.

To customize the theme, edit UIkit variables in theme.scss. Material Design colors are available as variables (e.g. $clr-blue-50 ). For the full set of colors, please visit Material Design Color System.

This template is provided under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license. You are free to use and modify the code in your project as long as you include a link to this GitHub repository in your footer.