2025年2月7日金曜日

MarkdownファイルをHTMLに変換してBloggerに掲載する方法

このブログではMarkdownファイルをローカルでHTMLに変換してBloggerにアップしています。その手順を説明します。

1. Pandocのインストール

私はMac miniをメインで使っているのでMacで作業する場合について説明します。 まずMarkdownファイルを変換するためのPandocをインストールします。 macOSではHomebrewを使用してPandocをインストールできます。

brew install pandoc

または公式サイトからダウンロードできます。

Pandoc 公式サイト

2. MarkdownをHTMLに変換する

最も基本的なコマンドでMarkdownをHTMLに変換できます。

pandoc -o output.html input.md

3. シンタックスハイライトを適用する

Bloggerでテーマの「HTMLを編集」を選択してテーマのHTMLを編集します。

<head> に以下を追加します。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/kotlin.min.js"></script>
<script>hljs.highlightAll();</script>

4. 記事をコピー

作成したHTMLファイルをエディタで開き、ファイルの内容をBloggerのHTMLビューへコピペします。最初のh1タグの内容はタイトルなので本文ではなくタイトルの方にコピペします(タグは不要)。

これでMarkdownファイルからBloggerの記事を作成することができます。

ラベル: