Help us understand the problem. What is going on with this article?

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

概要

  • 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カラムに需要があるのかというとよくわからなくなってきた。

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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