見出し画像

（小ネタ）vscodeでマークダウンの表のプレビューを見やすくしてｎｏｔｅにはる

makokon

（小ネタ）vscodeでマークダウンの表のプレビューを見やすくしてｎｏｔｅにはる

こんにちは、makokonです。
多くの人が書いていますが、ここのnote記事を書いていて、表をうまくかけない問題を気にしている人は多いと思います。大量に出てきます。
試しにgoogleで「note 表 埋め込み」で検索してみると、代表的な方法は、

  1. エクセルで表を作って、画像として貼り付け
    https://note.com/yasmizohawks/n/n37ab09fb822b

  2. KaTe(LaTeXの簡易版)で書く。
    https://note.com/yuuka_ai/n/n191733a80cd3
    いささか面倒ですが、最近はAIが支援してくれるので書くだけならだいぶ楽になりました。

  3. GitHubのgistを埋め込んで表示する。
    https://note.com/yaju/n/n2050ac693119

  4. マークダウンの表のプレビューのスクショを貼り付ける
    これを、今回紹介するわけですが、いかにもカッコ悪い方法ですね。

などが代表的なもののようです。
いずれの方法も一長一短ですが、表の特徴によって、使い分ければよいでしょう。これらの詳細は解説記事を読んでください。


vscodeでマークダウンの表をプレビューして、スクショを貼り付ける

いかにも素人ぽい、泥臭いやり方ですが、何度も記事に表を貼り付けていると、上の3つの方法より、もっと手軽な方法が欲しくなりました。

表を作るときの状況


つまり、記事のための表を作るにあたって、以下の状況を考えると面倒になったわけです。

  • 常に立ち上がっているアプリが決まっている。
    普段使いするPC環境は多岐にわたりますが、どの環境でも常に起動しているアプリがあります。それが、次の3つです。

    • VSCODE

    • チャットAIアプリ（AIStudio、ChatGPT、自作アプリ　環境によって異なる）

    • ブラウザ

  • 表の内容は、数値よりテキストが多い。
    作成する表は、計算に基づく数値ではなく、特徴のまとめなどテキスト情報であることが圧倒的に多い。

  • 表の形式はマークダウンになることが圧倒的。
    表の形にまとめるときには、圧倒的にチャットAIアプリに作ってもらうことが多いです。多くのLLMを利用するため、その表はほぼマークダウン形式になります。また、マークダウンの表はLLMが読んで、評価することも容易であることも見逃せません。

  • 表の見栄えはすぐに確認したい。
    実際にnote記事に貼り付けるまで見栄えが確認できないのがストレスで表を作ったときにすぐに見栄えを確認したいです。

チャットAIでサンプルの表を作る。

表の内容

まあ、なんでもいいのですが、ＡＩに表のネタも作ってもらいました。
Pythonで文字列を操作する際に有用なメソッドを以下に10個紹介します。これらのメソッドは、文字列データを扱う際に非常に便利です。

  1. str.lower()

    • 説明: 文字列をすべて小文字に変換します。

    • 注意: 元の文字列は変更されず、新しい小文字の文字列が返されます。

  2. str.upper()

    • 説明: 文字列をすべて大文字に変換します。

    • 注意: 元の文字列は変更されないため、結果を変数に保存する必要があります。

  3. str.strip()

    • 説明: 文字列の先頭と末尾の空白や改行を削除します。

    • 注意: 中間の空白は削除されません。

  4. str.split(separator)

    • 説明: 指定した区切り文字で文字列を分割し、リストを返します。

    • 注意: デフォルトでは空白文字で分割されます。

  5. str.join(iterable)

    • 説明: イテラブル内の要素を文字列として結合します。

    • 注意: 要素は文字列である必要があります。

  6. str.replace(old, new)

    • 説明: 文字列中の指定した部分文字列を別の文字列に置換します。

    • 注意: 置換はすべての出現箇所に対して行われます。

  7. str.find(substring)

    • 説明: 指定した部分文字列が最初に出現する位置を返します。見つからない場合は-1を返します。

    • 注意: インデックスが0から始まることに注意。

  8. str.format(*args, **kwargs)

    • 説明: 文字列中のプレースホルダーを指定した値でフォーマットします。

    • 注意: フォーマット指定子の数と引数の数を一致させる必要があります。

  9. str.startswith(prefix)

    • 説明: 文字列が指定した接頭辞で始まるかどうかをチェックします。

    • 注意: 大文字小文字の区別を行うため、比較前に適宜lower()などを使用することができます。

  10. str.endswith(suffix)

    • 説明: 文字列が指定した接尾辞で終わるかどうかをチェックします。

    • 注意: startswith()同様、大文字小文字の区別があります。

マークダウンの表に変換する。

たとえば、こんな感じのマークダウンになります。

| メソッド | 説明 | 使用上の注意 |
|-------------------------|--------------------------------------------------------------------------------|-------------------------------------------------------|
| `str.lower()` | 文字列をすべて小文字に変換します。 | 元の文字列は変更されません。 |
| `str.upper()` | 文字列をすべて大文字に変換します。 | 結果を変数に保存する必要があります。 |
| `str.strip()` | 文字列の先頭と末尾の空白や改行を削除します。 | 中間の空白は削除されません。 |
| `str.split(separator)` | 指定した区切り文字で文字列を分割し、リストを返します。 | デフォルトでは空白文字で分割されます。 |
| `str.join(iterable)` | イテラブル内の要素を文字列として結合します。 | 要素は文字列である必要があります。 |
| `str.replace(old, new)` | 文字列中の指定した部分文字列を別の文字列に置換します。 | 置換はすべての出現箇所に対して行われます。 |
| `str.find(substring)` | 指定した部分文字列が最初に出現する位置を返します。見つからない場合は-1を返します。| インデックスが0から始まることに注意。 |
| `str.format(*args, **kwargs)` | 文字列中のプレースホルダーを指定した値でフォーマットします。 | フォーマット指定子の数と引数の数を一致させる必要があります。 |
| `str.startswith(prefix)`| 文字列が指定した接頭辞で始まるかどうかをチェックします。 | 大文字小文字の区別を行います。 |
| `str.endswith(suffix)` | 文字列が指定した接尾辞で終わるかどうかをチェックします。 | `startswith()`同様、大文字小文字の区別があります。 |

プレビューで結果を見てみる１　あまりうまくいかない編

VSCODEで新しいマークダウンのファイルを使って、プレビューしてみましょう。Markdownドキュメントをプレビューするには、
同一エディタに別タブとしてプレビューを表示するなら、

  • ［Ctrl］＋［Shift］＋［V］(windows)

  • ［Shift］＋［Command］＋［V］(mac)

さて、その結果は、ご覧の通り表が１画面に収まらずにイマイチのものでした。列の幅のバランスも悪いし、文字も大きすぎるのかもしれませんね。

プレビュー画面を見やすく調整するには

vscodeのプレビューにはCSSを設定することができます。
例えば、下記のリンクには、ワークスペース内にstyle.cssというファイルを作る方法が紹介されています。これは非常に優れた方法ですが、作成そのものも大変だし、適切に適用するための方法も（たいしたことないけど）把握しておく必要があります。また、ちょっと変更したときに同じワークスペースにあるすべてのファイルに適用されてしまうという問題もあり、自分のプレビュースタイルが固まっている人が使う方法でしょう。

今回の目的は、今作っている表だけを簡単に見やすくする方法です。
そのためには、全体のサイズとセルサイズのバランス、フォントサイズ、折り返し表示などが調整できれば十分でしょう。

ファイル内にＣＳＳを記述する

実は、このＣＳＳ設定は、個別のファイルに直接書き込むことができます。リンクのような詳細な設定をいちいち書くのはたとえコピペでも大変だし、見通しも悪くなるでしょう。だから、表の設定だけを書くことにします。

若干試行錯誤してこれくらいの設定を常にコピーして、使うことにしました。この<style>を適当に調整するのが現在の環境では一番お手軽だと感じました。


<style>
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* カラム幅を固定 */
}

th, td {
border: 1px solid #ddd ;
padding: 8px;
font-size: 14px; /* フォントサイズを調整 */
word-wrap: break-word; /* テキストの折り返し */
}

th {
background-color: #82f2f2 ;
text-align: left;
}
/* 各カラムの最大幅と文字配置を設定 */
/* セルに比率、left,center,right*/
th:nth-child(1), td:nth-child(1) {
width: 15%;
text-align: center;
}
th:nth-child(2), td:nth-child(2) {
width: 50%;
text-align: left;
}
th:nth-child(3), td:nth-child(3) {
width: 35%;
text-align: left;
}

</style>

プレビューで結果を見てみる　うまくいきました。


出来上がったプレビューのスクリーンショットです。
一応セルのバランスと文字サイズの調整、文字配置など判定していますね。

なお、小ネタの小ネタですがmacで選択範囲をクリップボードにスクショするには、「Control + command + shift + 4」のようにすればできます。押すボタンが多くて、指がつりそうですが、知っていると便利ですよ。

まとめ

いかがでしたか、今回はｎｏｔｅように、見やすい表を貼り付けるために、

  1. マークダウンで表を作成し、

  2. ｖｓｃｏｄｅでプレビュー

  3. ＣＳＳでみやすさを調整

    1. ＣＳＳはファイル内に直接必要最小限を書く

  4. プレビュー画面をスクリーンショット

という方法を紹介しました。個人的には一番手間がかからない上に、作った表そのものはマークダウンなので再利用しやすいということで重宝しています。
ただし、以下のような状況の人にはこの手法は十分ではないのですでに紹介した方法をご検討ください。

  • 非常にきれいな表が必要。

  • 表のレイアウトが複雑。

  • 膨大な解析データなど数値の再処理が後で必要

  • 表のテキストを読者がコピーする事がある。


#note    #表   #見やすい   #vscode   #CSS   #スクリーンショット   #プレビュー   #個別設定   #フォントサイズ   #セル幅調整   #文字配置   


いいなと思ったら応援しよう！