WordPress

ブログ原稿のエディタをVS CODE にしてみた,Markdown記法のコマンド付き-WordPress 奮闘記Vol.20

投稿日:

 

どうも、すもわです。
普段は Atom で原稿を書いてます。

Markdownエディタってやつです。

エディタはMarkdawn記法の Atom or MacDown に決定-WordPress 奮闘記Vol.15

  どうも、すもわです。駆け出しのブロガーです。 If you can not read Japanese please use Google Translate right or down ...

今朝、Googleのおすすめ記事で
VS CODE というエディタを使ってみませんか?的な記事がヒット。

VS CODE、Microsoft Visual Studioのエディタですか・・・。

以前仕事でVisual C++を使ってたとき以来のMicrosoftですね。
今はMacを使ってるので、Microsoftとは縁遠かったですが。

 

初期設定

さっそくソフトをダウンロード。

 

 

サイトは英語ですが、ソフトは拡張機能で日本語にできます。
インストール直後に日本語にしますか?的なメッセージが画面右下に出ます。

拡張機能の Markdown All in One を入れると
Markdownの書式が使えるようになります。

あとは作業フォルダを設定すればOK。

 

ブログ原稿の書き方

  1. [新しいファイル]を選択
  2. 画面右下の[言語モード選択]で[M]と入力して[Markdown]を選択
  3. 指定した作業フォルダに保存
  4. 画面上部のファイル名を右クリックしてプレビューを選択して画面右にプレビューを表示

プレビューで体裁を確認しながら、文章を書いていきましょう。

プレビューのショートカットは[Shift + Command + V]です。

 

Markdown記法のコマンド一覧

普段使う基本的なものを載せておきましょう。

見出し

シャープ1つで 見出し1

#見出し1

シャープ2つで 見出し2

##見出し2

シャープ3つで 見出し3

###見出し3

シャープ4つで 見出し4

####見出し4

見出しは6までありますが、だいたい普段遣いは4までです。

強調

ボールド強調:文章の両端に**を付ける (Command + B)
**ボールド強調**

イタリック強調:文章の両端に*を付ける (Command + I)
*イタリック強調*

引用

文頭に>を付けます
>引用

段落

1行開けると、段落分けされます。

同じ段落内で改行する時は
その行の最後に半角スペースを2つ入力します。

リスト表示

文頭に*や+や-を付けます。
TABで入れ子にできます。

  • ABC
    • DEF

*ABC
TAB +DEF

数字リスト

  1. ABCDE
  2. FGHIJ

と、文頭に[数字とピリオドを]入力します。

罫線

3つ以上のアスタリスクを入力します。


***

リンク

[リンク名](URL)と入力します。 ←実際は半角です

Code

コードをそのまま表示したい場合は両端に`(バッククォート)を付けます。
バッククォートは[@キー+Shift]で入力できます。

表は多用します。
ちょっと面倒ですが、一気に覚えてしまいましょう。

|タイトル(左寄せ)|タイトル(中央)|タイトル(右寄せ)|
|:-|:-:|-:|
|ABC|DEF|GHI|
|123|456|789|

このように入力すると以下のようになります。

タイトル(左寄せ) タイトル(中央) タイトル(右寄せ)
ABC DEF GHI
123 456 789

2行目で右寄せ等の書式が決まります。
エディタだけでは頭が混乱しかけますが、プレビューをうまく活用しましょう。

入力例

サントラ 曲名
Before the Fall 混沌の渦動〜蛮神リヴァイアサン討滅戦〜
HEAVENSWARD Heavensward
それは愛くぽ?
英傑〜ナイツ・オブ・ラウンド討滅戦〜
Dragonsong
ライズ〜機工城アレキサンダー:天動編〜
STORMBLOOD 血の嵐
我らの支配権
紅の夜明け〜クガネ:昼〜
紅の夜明け〜クガネ:夜〜

|サントラ|曲名|
|:-|:-|
|Before the Fall|混沌の渦動〜蛮神リヴァイアサン討滅戦〜|
|HEAVENSWARD|Heavensward|
| |それは愛くぽ?|
| |英傑〜ナイツ・オブ・ラウンド討滅戦〜|
| |Dragonsong|
| |ライズ〜機工城アレキサンダー:天動編〜|
|STORMBLOOD|血の嵐|
| |我らの支配権|
| |紅の夜明け〜クガネ:昼〜|
| |紅の夜明け〜クガネ:夜〜|

 

HTMLに変換する方法

???
そーいえばこのHTML出力ってどうすればいいんだ?

・・・、なるほど拡張機能のMarkdown PDFを入れるといいようです。

するとファイルをHTMLやPDFに変換できる模様。
いったん再起動してから

[表示|コマンドパレット]で export と入力して html を選択すると。

おや?
右クリックでも表示されますね。

HTMLファイルを開くというひと手間がありますね。
Atomと比べると。

でも総合力はこっちのほうが上な感じもするし。
悩ましいですね。




熱中症対策、こまめに水を飲みましょ


 

 

あとがき

VS CODE は Atom と比べると文字入力時に多少遅さを感じます。
が、
プレビューがキレイなので、いいかんじです。

しばらくこっちを使ってみようと思います。

んー、見出しに色を付けることはできないだろうか・・・。
まだまだ不明な所が多いですが、新しいおもちゃは新鮮です。

表の例題で載せたのは
FF14(ファイナルファンタジーXIV)のサウンドトラック名です。
現在、FF14でベストアルバムに収録する曲の総選挙中でして。


【FF14】[光の戦士が選ぶ楽曲総選挙]に厳選10曲を投票-紅蓮日記Vol.35

  どうも、すもわです。 今週からFF14に戻ってきました。 マインクラフトでエンダードラゴンを倒したので。   5周年記念 光の戦士が選ぶ楽曲総選挙 A REALM REBORN ...

 

関連コンテンツ

-WordPress

Copyright© すもわ堂 , 2018 All Rights Reserved.