HEXOでコードの書き方いろいろ実験
Hexoはジェネレート時にhighlight.jsを適用してくれます。
クライアントサイドでのレンダーではないので、軽いのが嬉しいです。
今回はいろいろMarkdownの書き方を実験してみました。
HTMLコードの掲載
``` html
<html>
<head>
<title>オレのブログ</title>
</head>
<body>
<h1>コンテンツをここに</h1>
<P>ローレンイプサム的ななにか
</body>
</html>
```
↓
<html>
<head>
<title>オレのブログ</title>
</head>
<body>
<h1>コンテンツをここに</h1>
<P>ローレンイプサム的ななにか
</body>
</html>
JSコードの掲載
``` JavaScript
// 普通に問題ない。
!function() {
console.log('OK');
}()
```
↓
// 普通に問題ない。
!function() {
console.log('OK');
}()
CSS(LESS)コードの掲載
``` LESS
// 問題なかった。
.parent {
.child {
background: #FFF;
}
}
```
↓
// 問題なかった。
.parent {
.child {
background: #FFF;
}
}
画像の表示
公式の方法だとpermalink設定に依存するし、なんかなぁ。。。
source/images/ディレクトリを作成- その中に更に記事ごとのディレクトリを作成
- 記事からは絶対パスで記述
- [デメリット]ドラフト扱いができないのでデプロイされちゃう
Markdownの掲載
Markdown記法のバッククォートを載せたいときは、知ってしまえば大したことではなかった。
一番長く連続するバッククォートよりもさらに長いバッククォートで囲う。
コードはバッククォート３つだと思うが、それを表示したければ4つのバッククォートで囲う。
```` md
``` md
```
````
結果↓
``` md
```
まとめ
いろいろやってみて、困ったことはありませんでした。
コード載せるのは簡単ですが、動作するコードを貼り付けるのにうまいことできないかなと模索中。