字幕大王流翻訳原稿作成方法その3

gitシステムの操作にいこうと思ったのだが、かなり面倒なので後回しにする。

ここでは、字幕大王流翻訳原稿作成方法その1に続き、Visual Studio Codeの設定をしていく。使っていくうちに以下の不満が出てきたからだ。

  • エディタのデフォルトのフォントが小さくて見にくい
  • エディタが自動的に色分けしてくれるが、コメント部の色合いが気に入らない。本文と明確に区別できる色にならないか
  • プレビューのデフォルトのフォントが小さくて見にくい
  • プレビューは整形されて表示されるが、これをhtmlやpdfの形で出力できないか

というものである。順に解決していく。

設定画面を開いてエディタフォントを設定する

フォント関連の変更は、以下の設定画面から行う。

以下のように設定画面が表示されるが、エディタのフォントサイズ、フォントの種類は、いきなりここで設定できる。

フォントファミリに何を入力すれば良いかと言えば、そのパソコンにインストール済のフォント名称ということになるので、これはまちまちである。ただ、「meiryo」は、どのWindowsパソコンにもあると思う。

やってみて気に入らない場合には、左上に出てくる「歯車」から「設定をリセット」すれば元に戻る。

これエディタ文字の大きさと種類を設定することができた。

プレビューフォントの設定

上の状態では、編集画面のフォントのみが変更され、プレビューのフォントは変更されない。これも変更してみる。

簡単だ。検索窓に「markdown」を入力すると、Markdown>Previewの設定が出てくるので、全く同じ要領で設定すれば良い。

編集画面とプレビュー画面を並べてみると、以下のようになる。デフォルト状態とは、かなりフォントが違っているはずだ。

 

エディタのコメント色を変更する

さて、エディタは勝手に、その要素を色分け表示してくれるのだが、デフォルトのコメントカラーの薄緑が気に入らない。これを赤系の色にしたい。

これを行うには、設定画面からJSONファイルを編集する。以下のアイコンをクリックする。

すると、以下の表示が現れる。

これを見ると、これまで画面操作で行ってきた設定が、実はこういった文字列の形で残されていることがわかるだろう。例えば、

“editor.fontSize”: 20,
はエディタフォントのサイズを指示しており、
“markdown.preview.fontSize”: 20,
は、Markdownのプレビューのフォントサイズを指示している。だから、上で行った操作ではなく、ここを直接編集してしまっても構わない。
 
次に、ここにエディタのコメント色を変更する指示を書くが、以下である。
 

  “editor.tokenColorCustomizations”: {
    “comments”: “#a2006d”
  }

“#a2006d”というのは色コードを表している。例えば、https://www.colordic.org/に一覧があるので、好きなコードを使えばよい。

これを以下のように挿入する。

{
    “workbench.colorTheme”: “Visual Studio Light”,
    “editor.fontSize”: 20,
    “editor.fontFamily”: “meiryo”,
    “markdown.preview.fontSize”: 20,
    “markdown.preview.fontFamily”: “meiryo”,
 
    “editor.tokenColorCustomizations”: {
      “comments”: “#a2006d”
    }
}

注意しなければならないのは、「”markdown.preview.fontFamily”: “meiryo”,」の下に挿入しているのだが、その最終行にカンマ「,」を書かなければいけないことだ。あるいは、挿入する第一行の行頭に書いてもよい。

 
{
    “workbench.colorTheme”: “Visual Studio Light”,
    “editor.fontSize”: 20,
    “editor.fontFamily”: “meiryo”,
    “markdown.preview.fontSize”: 20,
    “markdown.preview.fontFamily”: “meiryo”
   
    ,”editor.tokenColorCustomizations”: {
      “comments”: “#a2006d”
    }
}

編集ができたら、Ctrl+S(コントロールを押しながらSを押す)して、編集結果をセーブする。これで、コメントの色が変更される。

MarkdownをHtmlに変換する

プレビューでは、Markdownでの整形後の状態を見ることができるのだが、これをhtmlの形で出力したい。これには、VS Codeのプラグインを使う。

次のように、プラグイン管理ボタンを押し、「Markdown PDF」を入力すると、「Markdown PDF」が出てくるのでクリックする。

 

既にインストールされているので以下の表示だが、「インストール」ボタンがあればそれを押す。

インストールできたらプラグイン管理画面を閉じてしまって構わない。次に対象とするmdファイルを開き、コマンドパレットを表示する。

「export」と入力すると、Markdown PDFの機能が出てくるので、その中からhtmlを選ぶ。

初回の実行では、Chromiumが勝手にインストールされるようだ。わからない人は気にしなくてよい。インストール完了まで待つ。

htmlは、元のmdファイルのあるフォルダに、元の名前+htmlで保存される。

設定にもよるのだが、htmlファイルをダブルクリックすれば、ブラウザで内容が見れると思う。

ちなみに、Markdown PDFはそもそもPDF出力のためのプラグインなのだが、PDFを出力させようとしても、いつまでも終了せず、出力ができなかった。何が悪いのか今のところ不明。

字幕大王流翻訳原稿作成方法その4に続く

 

コメント