macOS|Visual Studio CodeのMarkdownプレビューを使いながらブログを下書きする

これまでブログの下書きはBywordScrapboxを使ってきました。でも、下書きをWordPressにコピーしてからプレビューすると、「なんかここ変えたい」という箇所があって、いつもスマートに公開できていません。

そんなある日、閃きます。

「書いているときに常にプレビュー確認できれば良いのでは?」

ということで、VS CodeのMarkdownプレビューを使うことにしました。

また、今使っているWordPressテーマ、Snow Monkeyでは投稿の属性を「1カラム(スリム幅)」にしているので、できるだけそれに近づけるよう「Markdown Preview GitHub Styling」をインストールしてプレビュー用のCSSも調整しました。

結論、かなりいいです!

設定方法

拡張機能をインストール

Markdownのプレビューは標準機能でできますが、プレビューをカスタムするためには拡張機能のインストールが必要です。

といってもとても簡単。拡張機能タブから「Markdown Preview GitHub Styling」をインストールするだけ。

sc190601

プレビューをカスタムするためにCSSを編集

こちらも簡単。以下にある「base.css」に書き込むだけ。

/Users/USERNAME/.vscode/extensions/bierner.markdown-preview-github-styles-x.x.x/

僕は自分の記事を見ながらbody/h1/h2/p/imgを追加で設定しました。

聞くところによると、「!important」を多用するのは好ましくないらしいですが、自分の環境なんだし自由でOK!(笑)

body {
    background: white;
    /* 追加 */
    max-width: 750px !important;
    font-family: '游明朝体', 'YuMincho', '游明朝', 'Yu Mincho', serif !important;
    font-size: 16px;
    font-weight: 500;
    color: #404040;
    letter-spacing: .05em;
    line-height: 2 !important;
}

/* 追加 */
h2 {
    margin: 0;
    margin-top: 3.73913rem;
    margin-bottom: 2.33696rem;
    padding: .46739rem .46739rem .46739rem .93478rem;
    background-color: #f7f7f7;
    border-left: solid 8px #32bab3;
    border-bottom: solid 1px #ccc;
    border-radius: 2px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.57971;
}

h3 {
    margin: 0;
    margin-bottom: 1.40217rem;
    border-bottom: solid 1px #ccc;
    padding: 0 0 .46739rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.57971;
}

p {
    padding-top: 1.1rem;
}

img {
    height: auto;
    max-width: 100%;
}

するとこんなふうになります。

sc190601-2

メリット

  • 公開されている記事のごとくな見た目になっていい感じ!(最大の目的達成)
  • WordPressでは最終的な整形をやるだけでいい。
  • 株式会社ICSさん謹製の拡張機能「テキスト公正くん」が利用できるので日本語のミスが低減される。
  • ローカルにもmdファイルが残るのでバックアップとして安心。(以下のディレクトリ構成で保管します)
  • くわえて、拡張機能「Local History」が利用できるので複数バージョン保存されていざって時も安心。

_published(公開済みはこちらに格納)

2019

0601(記事データ)

img(アイキャッチ画像など)

0601.jpg

0601.psd

0601.md(記事本体)

デメリット

  • Snow Monkey Blocks独自の機能であるブログカードやアコーディオンなどが使えない。
  • 蛍光ペンは使えない。(文字装飾はWordPress側でやればOK)
  • Enlighterなどシンタックスハイライト用のプラグインを使っている場合は後編集が必要。(かと思いきやそうでもない【後述】)

いずれも当たり前のことですね。でも、記事全体をプレビューできるのはとてもいい。

WordPressに貼り付けるときはプレビュー画面をコピーしよう

sc190601-3

ブロックエディターを使っている場合、Markdownファイルの内容をコピーすると「1ブロックにすべてがコピペされてしまう」ので注意。

なので、プレビュー画面からテキストなどを選択してコピーすると良いです。1行ごとブロックに分けられ、見出しやリンクもそのまま変換されます。

そしてなんと!

Markdownのコード記法にしておけば、(僕の環境では)Enlighterプラグインのブロックに自動で変換されました。すごい!

結論、かなりいい!

VS CodeはPythonやJavaScriptのコーディングに使ってきて、今回からブログでも使うようにしました。このエディター、多機能すぎて素晴らしい。

今回のブログ用ワークスペースでは日本語フォントの「クレー」を使うようにしました。鉛筆でビシッと書いたかのようなこのフォントが好きなんですよ。最新のmacOSなら使えます。

先日、写真素材noteの公開作業を効率的に進めるためPythonスクリプトを組みました。

今回も自分の効率化のための作業です。最初は手間がかかりましたが、これからはスムーズになることでしょう。

【出張撮影のご依頼、承ってます】

あなたの行きたい場所に出張してポートレイトやプロフィール写真を撮影します。出張エリアは関西エリア(神戸・大阪・京都など)、関東エリア(神奈川、東京など)です。

★詳細:ポートレイト/プロフィール撮影(Photo Session)
★詳細:Photo Shooting

撮影予約可能日

【関西エリア】
・当面の間は関西にいます。ご依頼お待ちしています。

【関東エリア】
・7月上旬、8月上旬に関東予定です。

まずはお気軽にご相談ください

この記事を書いた人

花村貴史|Takashi Q. Hanamura

人物や風景、街並み、小物を好んで撮っている空気感フォトグラファー。本職であるPhotographerのかたわら、Engineer、Creatorとしても活動中。
その人・その場の「空気感をそっとすくい撮る」写真が好評。「自分の素敵に気づける写真」を撮る。数年間の心のお稽古によるカウンセラーマインドによって、撮影は「心のセッション」になることも。
オシゴトについては「撮影サービス」からどうぞ。

撮影|Photo Session

お話しながらのポートレイト撮影です。「今」そして「これから」のあなたにフォーカスして撮影します。SNSやサイト用のプロフィール写真に。

撮影|Photo Shooting

「友達と楽しんでいる」「セミナーで講演している」「パーティーを主催している」など、皆さんが大切な時間を過ごしている瞬間をスナップします。

写真術|Photo Lecture

カメラの使い方、撮影術、Lightroomの使い方などの「マンツーマンレクチャ」や「少人数制のワークショップ」について。写真に関する疑問の解決に。

販売:Photo Sales

A3ノビ〜A4程度のサイズの額装販売および、壁紙などの写真データの販売。ご自宅やコミニュティスペースに飾り、癒しになれば嬉しい。