概要

本記事では、Hexoブログのコードブロックを言語別に色分けする方法について解説していきます。

というのも真っ白なコードブロックって、長いコードを貼ると目が滑って読みづらいですよね（- -;

Qiitaみたいにシンタックスハイライトが効いてるとぐっと読みやすくなります。

実はHexoはhighlight.jsがデフォルトで組み込まれているので、コードブロックの言語指定を1行追加するだけで色分けが効きます。

ここでは具体的な書き方と、対応している言語の一覧を紹介していきます！
それではやっていきましょう！

概要

本記事では、Hexoのコードブロックの上にファイル名を表示する方法について解説していきます。

というのも「このコードはどのファイルに書くの？」って読者は気になるはずなのに、Hexo標準だとファイル名が表示できないんですよね（- -;

Qiitaみたいにコードブロックの上にファイルパスがチョコンと乗ってるあの形、読みやすくていいですよね。

ここではjsを使わず、HTMLとCSSだけで力技で実装する手順を紹介していきます！

これで記事のコードブロックが一気に見やすくなります。
それではやっていきましょう！

概要

本記事では、Hexoブログの各記事に自動で目次を生成する方法について解説していきます。

というのも長めの記事になると目次が無いと「どこに何があるのか」が分からず、読者がすぐ離脱してしまいますよね（- -;

かといって毎回手作業で目次を書くのは現実的じゃありません。

ここではhexo-tocプラグインを使って、コメントタグを1行入れるだけで目次が自動生成される手順と、見栄えを良くするCSS設定までセットで紹介していきます！

これで読者の回遊率もアップします。
それではやっていきましょう！

概要

本記事では、Hexoブログでよく使うMarkdown記法のチートシートについて解説していきます。

というのも記事を書くたびに「あれ、画像のリンクってどう書くんだっけ？」「テーブルの書き方ど忘れした…」とググり直すの、地味に時間取られますよね（- -;

ここではリンク・画像・リスト・コードブロック・見出しなどの基本記法から、Hexo独自の拡張記法まで実例付きでまとめていきます！

このページをブックマークしておけば、もう毎回ググらなくて済みます。
それではやっていきましょう！