Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Markdownで2カラムの文書を作りたい

More than 1 year has passed since last update.

概要

  • htmlの記法を導入してしまえばmarkdownでも2カラムの文章を作れる。
  • 簡単に手早くPDFに変換するにはどうすればいいのか悩まれる。(拡張機能だと崩れる)

2カラムの文章をMarkdownで作る

本当はTexで書く2カラム文書のようにしたいがどうも厳しそうなので単に領域を左右に2分割して文章を綴る形式にする。

前提

VS Codeと下記のパッケージを使って2カラムの文書を作る。

  • Markdown All in One
  • Markdown PDF

2カラム表記にする

以下のようにstyleで予め宣言することで左右の配分を替えられる。右上の記述もstyleで設定できる。

<style>
.column-left{
  float: left;
  width: 47.5%;
  text-align: left;
}
.column-right{
  float: right;
  width: 47.5%;
  text-align: left;
}
.column-one{
  float: left;
  width: 100%;
  text-align: left;
}
</style>

その後本文中では次のように書く。

<div class="column-left">

# Left Column

</div>
<div class="column-right">

# Right Column

</div>

Preview上での表記

Preview上ではきちんと2カラムで表示される。

頭の弱い文章が書いてあるが許してほしい。ここにある通り図の貼り付けなどもhtmlの記法を使うと捗る。参考

image.png

PDFへの変換

PDFに一発できれいに変換できていない。pandocもあまり使いたくないので拡張機能内で処理できると嬉しいのだが…

Markdown-PDFでのPDF変換

VScodeにはMarkdown-PDFという便利な拡張機能が存在するが,PDFに直接変換すると2カラムが崩れてしまう。

image.png

Markdown-PDFでのHTML変換

HTML変換では2カラムは崩れないのでHTMLにしてから印刷なりPDFに変換なりする。
文字がギュッと詰まってこっちのほうが好み。

image.png

Markdown Preview Enhancedからブラウザを介してPDF変換

Previewの高機能版を使えばPDF変換もできるが,一番見た目が良かったのはブラウザでPreviewを開いてそこから印刷するという手法。回りくどいがきれいなPDFが出来上がる。

image.png

まとめ

あまり手間取るならTexで書けば良くね?となるので加減が難しい。あと別にこのタイプの2カラムに需要があるのかというとよくわからなくなってきた。

ossyaritoori
電機・ロボット・制御・画像その他
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away