Posts | My Blog

Writing technical content in Academic

Fri, 12 Jul 2019 00:00:00 +0000

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

Highlight your code snippets, take notes on math classes, and draw diagrams from textual representation.

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

Examples

Code

Academic supports a Markdown extension for highlighting code syntax. You can enable this feature by toggling the highlight option in your config/_default/params.toml 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()

Math

Academic supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the math option in your config/_default/params.toml file.

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

Diagrams

Academic supports a Markdown extension for diagrams. You can enable this feature by toggling the diagram option in your config/_default/params.toml file or by adding diagram: true to your page front matter.

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

An example class diagram:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}
```

renders as

classDiagram
Class01 <|-- AveryLongClass : Cool
<<interface>> Class01
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
class Class10 {
<<service>>
int id
size()
}

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 --> [*]

Todo lists

You can even write your todo lists in Academic too:

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

renders as

Write math example
Write diagram example
Do something else

Tables

Represent your data in tables:

| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |

renders as

First Header	Second Header
Content Cell	Content Cell
Content Cell	Content Cell

Asides

Academic supports a shortcode for asides, also referred to as notices, hints, or alerts. By wrapping a paragraph in {{% alert note %}} ... {{% /alert %}}, it will render as an aside.

{{% alert note %}}
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
{{% /alert %}}

renders as

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

Spoilers

Add a spoiler to a page to reveal text, such as an answer to a question, after a button is clicked.

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

renders as

Click to view the spoiler

You found me!

Icons

Academic enables you to use a wide range of icons from Font Awesome and Academicons in addition to emojis.

Here are some examples using the icon shortcode to render icons:

{{< icon name="terminal" pack="fas" >}} Terminal
{{< icon name="python" pack="fab" >}} Python
{{< icon name="r-project" pack="fab" >}} R

renders as

Terminal
Python
R

Display Jupyter Notebooks with Academic

Tue, 05 Feb 2019 00:00:00 +0000

from IPython.core.display import Image
Image('https://www.python.org/static/community_logos/python-logo-master-v3-TM-flattened.png')

print("Welcome to Academic!")

Welcome to Academic!

Install Python and JupyterLab

Install Anaconda which includes Python 3 and JupyterLab.

Alternatively, install JupyterLab with pip3 install jupyterlab.

Create or upload a Jupyter notebook

Run the following commands in your Terminal, substituting <MY-WEBSITE-FOLDER> and <SHORT-POST-TITLE> with the file path to your Academic website folder and a short title for your blog post (use hyphens instead of spaces), respectively:

mkdir -p <MY-WEBSITE-FOLDER>/content/post/<SHORT-POST-TITLE>/
cd <MY-WEBSITE-FOLDER>/content/post/<SHORT-POST-TITLE>/
jupyter lab index.ipynb

The jupyter command above will launch the JupyterLab editor, allowing us to add Academic metadata and write the content.

Edit your post metadata

The first cell of your Jupter notebook will contain your post metadata ( front matter).

In Jupter, choose Markdown as the type of the first cell and wrap your Academic metadata in three dashes, indicating that it is YAML front matter:

---
title: My post's title
date: 2019-09-01
# Put any other Academic metadata here...
---

Edit the metadata of your post, using the documentation as a guide to the available options.

To set a featured image, place an image named featured into your post’s folder.

For other tips, such as using math, see the guide on writing content with Academic.

Convert notebook to Markdown

jupyter nbconvert index.ipynb --to markdown --NbConvertApp.output_files_dir=.

Example

This post was created with Jupyter. The orginal files can be found at https://github.com/gcushen/hugo-academic/tree/master/exampleSite/content/post/jupyter

Academic: the website builder for Hugo

Wed, 20 Apr 2016 00:00:00 +0000

Create a free website with Academic using Markdown, Jupyter, or RStudio. Choose a beautiful color theme and build anything with the Page Builder - over 40 widgets, themes, and language packs included!

Check out the latest demo of what you’ll get in less than 10 minutes, or view the showcase of personal, project, and business sites.

👉 Get Started
📚 View the documentation
💬 Ask a question on the forum
👥 Chat with the community
🐦 Twitter: @source_themes @GeorgeCushen #MadeWithAcademic
💡 Request a feature or report a bug
⬆️ Updating? View the Update Guide and Release Notes
❤️ Support development of Academic:
- ☕️ Donate a coffee
- 💵 Become a backer on Patreon
- 🖼️ Decorate your laptop or journal with an Academic sticker
- 👕 Wear the T-shirt
- 👩‍💻 Contribute

Academic is mobile first with a responsive design to ensure that your site looks stunning on every device.

Key features:

Page builder - Create anything with widgets 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 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 - 15+ 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.

Themes

Academic comes with automatic day (light) and night (dark) mode built-in. Alternatively, visitors can choose their preferred mode - click the sun/moon icon in the top right of the Demo to see it in action! Day/night mode can also be disabled by the site admin in params.toml.

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

Ecosystem

Academic Admin: An admin tool to import publications from BibTeX or import assets for an offline site
Academic Scripts: Scripts to help migrate content to new versions of Academic

Install

You can choose from one of the following four methods to install:

Then personalize and deploy your new site.

Updating

View the Update Guide.

Feel free to star the project on Github to help keep track of updates.

License

Released under the MIT license.

Posts | My Blog

Writing technical content in Academic

Examples

Code

Math

Diagrams

Todo lists

Tables

Asides

Spoilers

Icons

Did you find this page helpful? Consider sharing it 🙌

Display Jupyter Notebooks with Academic

Install Python and JupyterLab

Create or upload a Jupyter notebook

Edit your post metadata

Convert notebook to Markdown

Example

Academic: the website builder for Hugo

Table of Contents

Themes

Ecosystem

Install

Updating

License