HEXOでコードの書き方いろいろ実験
create: 2018-11-13
Hexo Blog Markdown

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/ディレクトリを作成
  • その中に更に記事ごとのディレクトリを作成
  • 記事からは絶対パスで記述
  • [デメリット]ドラフト扱いができないのでデプロイされちゃう
![](/images/site/cat.png)

猫

Markdownの掲載

Markdown記法のバッククォートを載せたいときは、知ってしまえば大したことではなかった。
一番長く連続するバッククォートよりもさらに長いバッククォートで囲う。
コードはバッククォート3つだと思うが、それを表示したければ4つのバッククォートで囲う。

```` md
``` md
![猫](/images/site/cat.png)
```
````

結果↓

``` md
![猫](/images/site/cat.png)
```

まとめ

いろいろやってみて、困ったことはありませんでした。
コード載せるのは簡単ですが、動作するコードを貼り付けるのにうまいことできないかなと模索中。