【HTML + CSS + Prism.js】ブログの見た目を整えた話

Sun, 16 Jun 2019 09:00:00 +0900

シンタックスハイライト導入

このブログ、ちょっと前までコードのシンタックスハイライトが効いていませんでした。

正確には対応していない言語が（めちゃくちゃ）ありました。

このとおり、 Goにも対応していませんでした…。

もともと、このブログのテーマは Hugo Themes （Hugo 公式テーマショップ的なの）に
あったものを使わせてもらっているのですが、さすがに対応していない言語が多すぎたので、
シンタックスハイライト部分だけ個別に導入することにしました。

Prism.js

さっそく、「HTML シンタックスハイライト」で調べてみました。

そしたら、だいたい以下の3つが出てきました。

どれにしようか迷ったのですが、見た目が一番好みだった Prism.js を使うことにしました。

導入

導入方法については記事がたくさんあるので、そちらをご覧ください。

導入後

きれいですねー

今回導入した Prism.js のプラグインは、

Line Highlight：行指定した箇所をハイライトする機能（上記画像内では使用していません）
Line Numbers：行番号を表示する機能
Show Language：右上に言語名を表示している機能

の3つです。

困ったこと

行番号が表示されない

行番号を表示するには、

<pre class="line-numbers"><code class="language-c">
コード
</code></pre>

上記コードのように、表示するコードスニペットに対して、
line-numbers というクラスを付与してあげるだけでOKです。

…が、なぜか行番号が他の要素の下にいってしまい、見えなくなっていました。
したがって、prism.css を修正して行番号が他の要素の上に来るようにしました。

リスト表示の行間が異様に広い

Prism.js 導入後…

【Web API（Rails） + Vue.js】ブログのいいねボタン自作してみた

Sat, 08 Jun 2019 09:00:00 +0900

いいねボタンがないブログ

本ブログ、いいねボタンがありませんでした。

だから、作っちゃいました。っていう記事です。

構成

上図のように

記事ページからAPIサーバにリクエストを送り、いいねの数を取得・加算します。

記事ページからAPIサーバへのリクエスト部分（クライアント）には Vue + axios を使用。

APIサーバは Rails で実装しました。

（以前から Slackのスラッシュコマンド用に使用していたAPIサーバを流用しました）

APIサーバ

Rails で APIサーバを建てる方法に関しては、

以前に Qiita で入門記事書いたのでそちらをご覧ください。

（少し古い記事ですが、そんなに問題はないはずです）

DB にテーブル作成

今回、ブログ記事を管理するために、下記のテーブルを作成しました。

mysql> describe blog_posts;
+------------+--------------+------+-----+---------+----------------+
| Field | Type | Null | Key | Default | Extra |
+------------+--------------+------+-----+---------+----------------+
| id | bigint(20) | NO | PRI | NULL | auto_increment |
| title | varchar(255) | NO | | NULL | |
| count | varchar(255) | NO | | 0 | |
| created_at | datetime | NO | | NULL | |
| updated_at | datetime | NO | | NULL | |
+------------+--------------+------+-----+---------+----------------+
5 rows in set (0.00 sec)

titleには、日本語のタイトル（本記事だと『【WEB API（RAILS） + VUE.JS】ブログのいいねボタン自作してみた』）ではなく、記事ファイル（マークダウン）の名前（本記事だと『good_api』, 拡張子抜き）が入ります。

HTML/CSS on yyh-gl's Tech Blog