Refactored syntax highlighting shortcodes into markdown
This commit is contained in:
parent
9e6bb1a3e5
commit
ea435049b3
71 changed files with 297 additions and 297 deletions
|
@ -14,9 +14,9 @@ On the [about-me]({{< ref "about-me" >}}) page I had hardcoded my age. I wanted
|
|||
|
||||
Added a custom markdown shortcode in hugo in as simple as creating a `layouts/shortcodes/` directory. Each html file created inside will define a shortcode from the filename. In my example I want to calculate my age so I named the shortcode `age.html` and added the following simple template code :
|
||||
|
||||
{{< highlight html >}}
|
||||
```html
|
||||
{{ div (sub now.Unix 493473600 ) 31556926 }}
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
||||
The first number is the timestamp of my birthday, the second represents how many seconds there are in a year.
|
||||
|
||||
|
@ -24,14 +24,14 @@ The first number is the timestamp of my birthday, the second represents how many
|
|||
|
||||
With this `layouts/shortcodes/age.html` file I can just add the following in a page to add my age :
|
||||
|
||||
{{< highlight html >}}
|
||||
```html
|
||||
{{< print "{{% age %}}" >}}
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
||||
And if you are wondering how I am able to display a shortcode code inside this page without having it render, it is because I defined another shortcode that does exactly like this :
|
||||
{{< highlight html >}}
|
||||
```html
|
||||
{{< print "{{ index .Params 0 }}" >}}
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
||||
You can find these examples [here](https://git.adyxax.org/adyxax/www/tree/layouts/shortcodes)! Hugo really is a powerful static website generator, it is amazing.
|
||||
|
||||
|
|
|
@ -12,49 +12,49 @@ This is the website you are currently reading. It is a static website built usin
|
|||
|
||||
## Installing hugo
|
||||
|
||||
{{< highlight sh >}}
|
||||
```sh
|
||||
go get github.com/gohugoio/hugo
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
||||
You probably won't encounter this issue but this command failed at the time I installed hugo because the master branch in one of the dependencies was
|
||||
tainted. I fixed it with by using a stable tag for this project and continue installing hugo from there:
|
||||
{{< highlight sh >}}
|
||||
```sh
|
||||
cd go/src/github.com/tdewolff/minify/
|
||||
tig --all
|
||||
git checkout v2.6.1
|
||||
go get github.com/gohugoio/hugo
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
||||
This did not build me the extended version of hugo that I need for the [docsy](https://github.com/google/docsy) theme I chose, so I had to get it by doing :
|
||||
{{< highlight sh >}}
|
||||
```sh
|
||||
cd ~/go/src/github.com/gohugoio/hugo/
|
||||
go get --tags extended
|
||||
go install --tags extended
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
||||
## Bootstraping this site
|
||||
|
||||
{{< highlight sh >}}
|
||||
```sh
|
||||
hugo new site www
|
||||
cd www
|
||||
git init
|
||||
git submodule add https://github.com/google/docsy themes/docsy
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
||||
The docsy theme requires two nodejs programs to run :
|
||||
{{< highlight sh >}}
|
||||
```sh
|
||||
npm install -D --save autoprefixer
|
||||
npm install -D --save postcss-cli
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
||||
## hugo commands
|
||||
|
||||
To spin up the live server for automatic rebuilding the website when writing articles :
|
||||
{{< highlight sh >}}
|
||||
```sh
|
||||
hugo server --bind 0.0.0.0 --minify --disableFastRender
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
||||
To publish the website in the `public` folder :
|
||||
{{< highlight sh >}}
|
||||
```sh
|
||||
hugo --minify
|
||||
{{< / highlight >}}
|
||||
```
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue