やってみた

asciidocそのもので、htmlが書ける。そのうえhugo+themeで書きだすとなった場合、どこで何をしたらいいのか謎。機能が大量にあるので、使いそうなものを、色々さぐりつつ、ここにメモる。随時アップデートされる気がする。

とりあえず自分が使いそうなものを調べてみた。

環境的なもの

1
2

$hugo version
Hugo Static Site Generator v0.69.2/extended linux/amd64 BuildDate: unknown

これに、 notepadium というテーマを入れた。hugoそのもので何か問題が起きてるのか、テーマの側でなのかとかを本当は気にしたほうがいいような気がする。

最初謎だったこと、基本など

ヘッダの無い文章は書けないかもしれない。 Front Matterの後に普通に文章を書いてみる。たとえばこんなかんじ。

tags:
    - hugo
    - asciidoc
--- <- ここまでFront Matter
All your base are belog to us

これをビルドすると、

post/2020-05-08-hugo-adoc-cheatsheet.adoc: asciidoctor: WARNING: <stdin>: line 5: section title out of sequence: expected level 1, got level 2
post/2020-05-08-hugo-adoc-cheatsheet.adoc: asciidoctor: WARNING: <stdin>: line 19: section title out of sequence: expected level 1, got level 2
post/2020-05-08-hugo-adoc-cheatsheet.adoc: asciidoctor: WARNING: <stdin>: line 28: section title out of sequence: expected level 1, got level 2
Rebuild failed:

Logged 3 error(s)

とかいう結果になってビルドできない。

・・・ という結果になったのだが、ファイルによってはエラーとならない場合もあるようだ。たとえば、https://kinoshita-lab.github.io/kazbo/post/2020-06-25-abc-cable/[このpost] では問題なくヘッダ無しの文章がレンダリングされている。

あと、この投稿を作るためには、そもそも{{ と }}でくくった内容(Shortcodeというらしい)をエスケープせずに出す、というのが大変だった。 markdownでは可能なようだ。 hugoのドキュメントがそのように構成されているし。

asciidocでそれをやるには、

こんな感じで /* と */ で Shortcodeの関数的な部分をかこむ。↑を画像でなく、文字で表わせないかという二重にややこしいことを試みる気にはあまりならなかった。。

ヘッダは3レベルから

つまり、

=
==

は使えない。入れると上と同じくビルドできない。エラーメッセージ省略。

基本的な記法

ヘッダ

3レベル以下が使える。

=== あああ
==== いいい
===== ううう
====== えええ

あああ

いいい

ううう
えええ

そんなに深く使わないだろうけど。

リンク

https://www.switch-science.com/catalog/5914/[MIDI野郎]

MIDI野郎

箇条書き

* all
* your
* base
 ** are
  *** belong
   **** to
     ***** us

  • all

  • your

  • base

    • are

      • belong

        • to

          • us

そのまま出てほしいやつ

asciidocの機能を使う。

ここに書く

細かい使いそうな文字列をいじるやつ

強調したいとき

日本語ではイタリックで強調しないような気がするので、太字にするとしたらこんな。太字にしたいところの両側にスペース必要。アスタリスクを二重にすればスペース不要。

だるくない *だるい* だるくない

だるくない だるい だるくない

だるくない**実はだるい**だるくない

だるくない実はだるいだるくない

消したいとき

微妙に特殊だった(markdown比)。

[line-through]#いつもとてもやるきがある#

いつもとてもやるきがある

線が表示されなかったので、cssに以下追加。

1
2
3

.line-through {
  text-decoration: line-through;
}

数式

asciidocの書き方をすると普通に表示されるようだ。記法はlatex。

latexmath:[\int_0^\infty f(x) dx]

\(\int_0^\infty f(x) dx\)

[stem,latexmath]
++++
\int_0^\infty f(x) dx
++++
\[\int_0^\infty f(x) dx\]

表

こんなかんじで書けば表になる。区切りは | 。 末尾に | は不要。タイトルつけられたりするけどこのレベルのpostでは使わなくていい気がする。空欄にも対応してるっぽいが、 各行の項目数はそろっている必要がある。

|===
|a|b|c|d|e|f|g
|h|i|j|k|l|m||
|===

a

b

c

d

e

f

g

h

i

j

k

l

m

ソースコード

asciidocの方でも対応しているけど、hugo内蔵のChroma+splash?を使うと、色がついたりして良さそう。 行番号つけるには、 config.tomlで

[markup.highlight]
lineNos = true

ってやる。

{{< highlight cpp >}}
#include <iostream>

auto main() -> int {
    return 0;
};
{{< /highlight >}}
1
2
3
4
5
6
7
8

#include <iostream>

auto main() -> int {
    using namespace std;
    cout << "unko" << endl;

    return 0;
};

ハイライト可能な言語の一覧はここにある。 List of Chroma Highlighting Languages

自分が使いそうなのは、

言語

書くべき内容

Bash

bash

C

c

C++

cpp

Common Lisp

lisp

Scheme

scheme

とりあえずこのくらい。Makefileやリンカスクリプトは無いのか残念。別のハイライタに変えるかも。

gist

変なシマシマが出て謎だけど、Shortcodeでいける。幅はcssで適当に調節した。.gist-file クラスをいじればOK 

1
2
3

.gist-file {
  max-width: 1024px;
}

{{< gist kinoshita-lab 038354a2b22613ac5ba04f2736324ccd >}}

メディア的なもの

埋め込み系のやつの書き方基本

++++
ここにURLを貼る！
++++

画像

Shortcodeでやる。

ローカルでやる

static/images/teensy_ng_connection.png を表示したいときは、

{{< figure src="//images/teensy_ng_connection.png" >}}

とやると出る。github pagesがprojectになっている場合(=このサイトがそうだ)、config.tomlの頭の方のルートっぽい所に

canonifyurls = "true"

とやっておく必要がある。

センタリングされてもあまりうれしくないので修正するかもしれない。→した。 

1
2
3

.image-container {
  text-align: left;
}

gyazo

生成されるページURLの末尾に.pngつけて、Shortcode。

{{< figure src="https://gyazo.com/46ee8d9ab21612f5b54dde5033c5621f.png" >}}

youtube

Shortcodeでやるとドキュメントの幅いっぱいになってしまうようだ。 ここはasciidocの埋め込みが良さそう。

<iframe width="560" height="315" src="https://www.youtube.com/embed/i9aPY7yWmTg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

soundcloud

埋めこみ。 まあこれも埋めこみでいいんだけど、幅が100%なので適当に狭くしたほうがいいかも。これは50%

<iframe width="50%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/113815988&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>

mixcloud

これも埋めこみでいいんだけど、幅が100%なので適当に狭くしたほうがいいかも。これは50%

<iframe width="50%" height="120" src="https://www.mixcloud.com/widget/iframe/?hide_cover=1&feed=%2Fsaita-kazuki%2Fpop-sounds-museum-bbq-rave-kitchen-mediterraneo-casa-tsudanuma-20190730%2F" frameborder="0" ></iframe>

SNS系

twitter

Shortcodeでやる。tweetを個別に表示してそのURLの末尾を貼りつける。

{{< tweet 1253156914503888897 >}}

choromeにduckduckgoのextension入れてるとうまく表示されない。オプションで "Show Embedded Tweets"をOnにすると見えるようになる。

instagram

埋め込みが長大なコードなので、Shortcodeでやろうと思う。ちょっと幅がでかい。要改造な気がする。 画像をブラウザで表示してそのURLの末尾を貼りつける。

choromeにduckduckgoのextension入れてるとうまく表示されない。こちらはどうしようもないかも。