diff --git a/starters/blog/content/post/writing-technical-content/index.md b/starters/blog/content/post/writing-technical-content/index.md index 4ff9f76b..8d58957e 100644 --- a/starters/blog/content/post/writing-technical-content/index.md +++ b/starters/blog/content/post/writing-technical-content/index.md @@ -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 `{{}}` 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 `{{}}` 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 `{{}}$...${{}}` or `{{}}$$...$${{}}`, 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}$$ +{{}} +$$ +\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 +{{< 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** `{{}}$\nabla F(\mathbf{x}_{n})${{}}` 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, \\\\ +{{}} +$$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, \\\\ +{{< 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 +{{}} ``` 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 diff --git a/starters/blog/content/post/writing-technical-content/line-chart.json b/starters/blog/content/post/writing-technical-content/line-chart.json new file mode 100644 index 00000000..446ce82a --- /dev/null +++ b/starters/blog/content/post/writing-technical-content/line-chart.json @@ -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: Scribblrs
Source: Internet Live Stats", + "showgrid": false, + "autorange": true, + "tickformat": "%Y" + }, + "yaxis": { + "type": "linear", + "range": [ + 0, + 1124750578.9473684 + ], + "title": "", + "autorange": true + }, + "height": 500, + "autosize": false + }, + "frames": [] +} diff --git a/starters/blog/content/post/writing-technical-content/results.csv b/starters/blog/content/post/writing-technical-content/results.csv new file mode 100644 index 00000000..0630ed92 --- /dev/null +++ b/starters/blog/content/post/writing-technical-content/results.csv @@ -0,0 +1,4 @@ +customer_id, score +1,0 +2,0.5 +3,1 diff --git a/starters/blog/go.mod b/starters/blog/go.mod index 6ea51ccf..6a1965e3 100644 --- a/starters/blog/go.mod +++ b/starters/blog/go.mod @@ -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 )