Visual Studio Code で原稿書き
1. 書籍を作る
実は、今回、書籍を作ろうと思いまして、書こうと思ったのですが、Microsoft Wordや、Pagesでと思ったのですが、
・書式の設定でマウスゴリゴリするのが、ちょっと面倒で、
・かといってHTMLタグで書くのもなんとなく、
・最終的にはテキストベースで入稿だろうと予測してまして
どうしたもんかなと思案していたところ、以前、VSCodeでSFを書く作家さんが話題になったことを思い出しました。
そっか、私達には、最強のテキストエディタVisual Studio Code があるじゃないか！
というわけで、Visual Studio Code で原稿書きに挑戦します。
ただ、原稿用紙ではないのでこのままでは難しい。
2. 記事の要素
原稿の内容を考えてみたとき、以下の要素が主でしょう。
・見出し
・段落
・箇条書き
・画像
これらをマーキングしなければ。。。HTMLではなくて。。。そいやMarkdownってのがあったっけ。と思いだして、調べてみました。
3. Markdown
HTMLのタグは<><>の記号でマークアップしますが、Markdownは次のような仕様です。（行頭に半角スペースの細かいルールがありますが、それは省略しています。どうぞググってみてください。）
見出し
# 大見出し
## 中見出し
### 小見出し
段落
こんにちは。講師の中島です。
順番のない箇条書き
- えんぴつ
- けしごむ
- ボールペン
- 赤色
- 青色
順番のある箇条書き
1. あれして
2. これして
1. さらに
2. あれして
画像
強調
**強調**します
区切り
---
コード
```
function btn1(){
document.getElementById("box1");
}
```
表
| 項目1 | 項目2 | 項目3 |
| --- | --- | --- |
| 項目1 | 項目2 | 項目3 |
リンク（書籍では関係ないですがwww）
[Y!]("https://yahoo.jp")
改ページ（PDF変換時にページを分けてくれます）
<div style="page-break-before:always"></div>
これだけあれば十分でしょう。あとで付け足すかもしれませんが。。
マウスでゴリゴリ書式設定しないで、行頭にマークをつけるんですね。これは便利かも。
4. 作成してプレビューまで
1. VSCodeでファイルを作成。ファイル名の拡張子は「.md」
2. Markdownでコードを記述する
3. ひとしきりコードを書いたら、[command](Winは[control]) + [K] + [V] のショートカットで、サイドにプレビュー画面が表示される。
エディタ部分と同期しているので、確認しながらコードを打ち込めるから便利。
5. 共有
そこでふと気がついた、雑誌編集の方はVSCodeとかは知らないかもしれない。
なにかうまい共有の方法がないかと思い探したところ、Google Chromeに機能拡張をインストールすればMarkdownのファイルをChromeで見ることができるそう。その機能拡張は Markdown Preview Plus
インストールの後、ローカルファイルを使用できるように、Chromeの「機能拡張を管理」にある以下のパネルの「詳細」をクリックして
ファイルのアクセスを許可してください。
そうすれば、mdファイルをChromeにドラッグアンドドロップするだけで、閲覧が可能です。
6. おまけ
6-1. Wordに変換
MarkdownのファイルをWordやPDFに変換保存できる機能拡張もありましたのでご紹介。↓
Pandoc というコンバータも別にインストールしなければなりません。
以下備忘です。
・一度ファイルを変換して出力した後に、再度変換作業した場合、ファイルを上書きできないらしく、エラー表示される
・Google Driveでオンライン編集状態にしていると保存できないらしく、保存しているフォルダをオフライン設定にしておく必要があります。
・当然ですが、生成されたWordは、別途スタイルの設定が必要です。
6-2. 文法チェック
次の機能拡張をVSCodeにインストールすれば、文法チェクしてくれます。試しましたが、なかなか厳しいチェッカーさんですが、修正機能があります！
6-3. MarkdownにCSS
MarkdownにCSSをつけることができるようです。
設定で「markdown.style」を見つけてください。ワークスペース内のmdファイルに対して外部CSSを複数紐付けできるようです。
【PR】
①初心者向けHTML5対面教室（東京・大阪）
②HTML5の検定にチャレンジ！（オンライン）