元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事とブログのカスタマイズについてアウトプットしています。

 menu

Atomで書いたコードを印刷する3つの方法

はじめに

Atomエディタには、デフォルトで印刷機能が付いていないようです。しかし、コードをプリントアウトしたかったので、Atomで印刷する方法を調べました。ここでは3つの方法を書き残します。それ以外の方法については、各自で調べてください。

markdown-previewパッケージを使う

手順

  • マークダウンファイルを作成する。
  • プレビュー画面を表示する。
  • プレビュー画面上で右クリックし、「HTMLを保存」を選択。
  • 保存したHTMLをブラウザで開く。
  • ブラウザから印刷する。

シンタックスハイライトが効いていないので、この方法での印刷は断念しました。設定を変更すればできそうですが、そこまで調べませんでした。

参考サイト

素のテキストを印刷します。綺麗に印刷できましたが、文章のスタイルを変更できるかは分かりません。

参考サイト

markdown-pdfパッケージを使う

マークダウンファイルをPDFに変換して印刷します。

手順

  • マークダウンファイルを作成する。
  • 「パッケージ」→「Markdown to PDF」→「Convert」でPDFに変換する。
  • PDFを印刷する。

マークダウンファイルからHTMLを経て、PDFに変換されるようです。PDFに変換するとスタイルが適用されていました。多分、CSSが反映されているのだと思います。文章が装飾され見やすくなりました。

スタイルのカスタマイズ

Atomエディタのスタイル設定ファイル「styles.less」を編集すると、PDF出力時のスタイルをカスタマイズできるようです。styles.lessは、「ファイル」→「設定」→「テーマ」の「your stylesheet」をクリックすると編集できます。以下が記述例です。

/* .markdown-body{...}の中にスタイルを記述する */
.markdown-body {
  html, body{
    font-size: 16px;
  }
  h2{
    font-size: 0.875rem;
  }
}

改ページを入れる

印刷時に改ページを入れたい位置に、下記のコードを追加します。

<div style="page-break-after: always;"></div>

参考サイト

まとめ

今回、調べた中で目的にあった方法は、「markdown-pdfパッケージを使ってPDFに変換してから印刷する方法」でした。目的に合わせて手段を選べればと思います。