tiennm99/HugoBlox-kit
1
0 Fork 0
mirror of https://github.com/tiennm99/HugoBlox-kit.git synced 2026-10-12 20:15:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

starters(blog): fix unescaped math

Browse Source
This commit is contained in:
George Cushen committed 2022-02-16 21:59:25 +00:00
1 parent 96826d5ea9
commit d0da1f2199
4 files changed
+115 -33
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

starters/blog/content/post/writing-technical-content/index.md
+32 -31
View File
@@ -1,25 +1,25 @@
---
title: Writing technical content in Academic
title: Writing technical content in Markdown
date: 2019-07-12
math: true
diagram: true
highlight: true
image:
placement: 3
placement: 2
caption: 'Image credit: [**John Moeses Bauan**](https://unsplash.com/photos/OGZtQF8iC0g)'
---
Academic is designed to give technical content creators a seamless experience. You can focus on the content and Academic handles the rest.
Wowchemy is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy 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.
On this page, you'll find some examples of the types of technical content that can be rendered with Wowchemy.
## 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.
Wowchemy supports a Markdown extension for highlighting code syntax. You can enable this feature by toggling the `syntax_highlighter` option in your `config/_default/params.toml` file.
```python
import pandas as pd
@@ -37,9 +37,9 @@ data.head()
### Charts
Academic supports the popular [Plotly](https://plot.ly/) chart format.
Wowchemy supports the popular [Plotly](https://plot.ly/) format for interactive charts.
Save your Plotly JSON in your page folder, for example `chart.json`, and then add the `{{</* chart data="chart" */>}}` shortcode where you would like the chart to appear.
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:
@@ -49,40 +49,47 @@ You might also find the [Plotly JSON Editor](http://plotly-json-editor.getforge.
### 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.
Wowchemy supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the `math` option in your `config/_default/params.yaml` file.
To render *inline* or *block* math, wrap your LaTeX math with `$...$` or `$$...$$`, respectively.
To render *inline* or *block* math, wrap your LaTeX math with `{{</* math */>}}$...${{</* /math */>}}` or `{{</* math */>}}$$...$${{</* /math */>}}`, respectively. (We wrap the LaTeX math in the Wowchemy _math_ shortcode to prevent Hugo rendering our math as Markdown. The _math_ shortcode is new in v5.5-dev.)
Example **math block**:
```latex
$$\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}$$
{{</* math */>}}
$$
\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}
$$
{{</* /math */>}}
```
renders as
{{< math >}}
$$\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}$$
{{< /math >}}
Example **inline math** `$\nabla F(\mathbf{x}_{n})$` renders as $\nabla F(\mathbf{x}_{n})$.
Example **inline math** `{{</* math */>}}$\nabla F(\mathbf{x}_{n})${{</* /math */>}}` renders as {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}}.
Example **multi-line math** using the `\\\\` math linebreak:
Example **multi-line math** using the math linebreak (`\\`):
```latex
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\\\
{{</* math */>}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
{{</* /math */>}}
```
renders as
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\\\
{{< math >}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
{{< /math >}}
### 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.
Wowchemy 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**:
@@ -226,37 +233,31 @@ Crash --> [*]
### Todo lists
You can even write your todo lists in Academic too:
You can even write your todo lists in Markdown too:
```markdown
- [x] Write math example
- [x] Write diagram example
- [x] Write diagram example
- [ ] Do something else
```
renders as
- [x] Write math example
- [x] Write diagram example
- [x] Write diagram example
- [ ] Do something else
### Tables
Represent your data in tables:
Save your spreadsheet as a CSV file in your page's folder and then render it by adding the _Table_ shortcode to your page:
```markdown
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
```go
{{</* table path="results.csv" header="true" caption="Table 1: My results" */>}}
```
renders as
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
{{< table path="results.csv" header="true" caption="Table 1: My results" >}}
### Callouts
starters/blog/content/post/writing-technical-content/line-chart.json
+77
View File
@@ -0,0 +1,77 @@
{
"data": [
{
"uid": "babced",
"fill": "tonexty",
"mode": "none",
"name": "Col2",
"type": "scatter",
"x": [
"2000-01-01",
"2001-01-01",
"2002-01-01",
"2003-01-01",
"2004-01-01",
"2005-01-01",
"2006-01-01",
"2007-01-01",
"2008-01-01",
"2009-01-01",
"2010-01-01",
"2011-01-01",
"2012-01-01",
"2013-01-01",
"2014-01-01",
"2015-01-01",
"2016-01-01"
],
"y": [
"17087182",
"29354370",
"38760373",
"40912332",
"51611646",
"64780617",
"85507314",
"121892559",
"172338726",
"238027855",
"206956723",
"346004403",
"697089489",
"672985183",
"968882453",
"863105652",
"1068513050"
],
"fillcolor": "rgb(224, 102, 102)"
}
],
"layout": {
"title": "Total Number of Websites",
"width": 800,
"xaxis": {
"type": "date",
"range": [
946702800000,
1451624400000
],
"title": "Source: <a href=\"http://www.scribblrs.com/\">Scribblrs</a><br>Source: <a href=\"http://www.internetlivestats.com/total-number-of-websites/\">Internet Live Stats</a>",
"showgrid": false,
"autorange": true,
"tickformat": "%Y"
},
"yaxis": {
"type": "linear",
"range": [
0,
1124750578.9473684
],
"title": "",
"autorange": true
},
"height": 500,
"autosize": false
},
"frames": []
}
starters/blog/content/post/writing-technical-content/results.csv
+4
View File
@@ -0,0 +1,4 @@
customer_id, score
1,0
2,0.5
3,1
1 customer_id score
2 1 0
3 2 0.5
4 3 1
starters/blog/go.mod
+2 -2
View File
@@ -3,6 +3,6 @@ module github.com/wowchemy/starter-blog
go 1.14
require (
github.com/wowchemy/wowchemy-hugo-modules/wowchemy-cms/v5 v5.0.0-20220208213309-898507534118 // indirect
github.com/wowchemy/wowchemy-hugo-modules/wowchemy/v5 v5.0.0-20220208213309-898507534118 // indirect
github.com/wowchemy/wowchemy-hugo-modules/wowchemy-cms/v5 v5.0.0-20220216193434-9982c2344082 // indirect
github.com/wowchemy/wowchemy-hugo-modules/wowchemy/v5 v5.0.0-20220216193434-9982c2344082 // indirect
)