[VSCode] 文章を読みやすく! 〜「という」と「こと」に気づいて直せるようにした〜

はじめに

サーバーレス開発部の藤井元貴です。

今朝、日課のインターネット巡回をしていると、次のnoteを見つけました。

タイトルから「あっ(心当たりある)」と気になり、実際に読んでみると、なるほど納得でした。

そこで、普段ブログを書いているVSCode(+Markdown)で、「という」「こと」を強調表示させ、すぐ気づくようにしました。

「という」を強調表示した画像

「こと」を強調表示した画像

環境

項目 バージョン
macOS High Sierra 10.13.6
VSCode 1.33.0 (1.33.0)

強調表示の設定

拡張機能のインストール

下記を使用します。

空白文字を強調表示する拡張機能ですが、下記説明にもあるように、新しいパターンを設定して利用します!

By modifying the configuration, you can add new patterns to be marked, customize the look of the highlights, set the default display mode, and modify the update rate.

設定の追加

VSCodeのコマンドパレットでwhitespaceと入力し、whitespace+ Configを選択します。

VSCodeのコマンドパレットで`whitespace`と入力し、`whitespace+ Config`を選択する画像

選択すると、config.jsonが開くため、次のJSONを追加して保存します。

{
    "name": "blog",
    "enabled": true,
    "pattern": "(という|こと)",
    "style": {
        "borderWidth": "2px",
        "borderRadius": "2px",
        "borderStyle": "solid",
        "light": {
            "backgroundColor": "rgba(255, 140, 0, 0.9)",
            "borderColor": "rgba(255, 165, 0, 0.3)"
        },
        "dark": {
            "backgroundColor": "rgba(255, 140, 0, 0.9)",
            "borderColor": "rgba(255, 165, 0, 0.3)"
        }
    }
}

色の設定はお好みでどうぞ。全体の設定は、本記事の最後に載せておきます。

設定おわり!

こうなります!

「という」を強調表示した画像

「こと」を強調表示した画像

強調表示されないとき

VSCodeのコマンドパレットでwhitespaceと入力し、whitespace+ Toggleを選択して、設定のON/OFFを切り替えてください。

さいごに

論文や報告書ではなくブログなので、すべての文章で「という」や「こと」を無くす必要はないと思っています。

絶対に「という」や「こと」を無くす!!、とは考えず、分かりやすい文章、リズムよく読める文章、気持ちよく読める文章を心がけていきたいです。

参考

全体の設定

次の内容も含んでいます。

{
    "mode": "all",
    "autoStart": true,
    "refreshRate": 100,
    "elements":
    [{
        "name": "space",
        "enabled": false,
        "pattern": "\\s",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "tab",
        "enabled": false,
        "pattern": "\\t",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(170, 53, 53, 0.3)",
                "borderColor": "rgba(170, 53, 53, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(223, 97, 97, 0.3)",
                "borderColor": "rgba(223, 97, 97, 0.4)"
            }
        }
    },{
        "name": "newline",
        "enabled": false,
        "pattern": "\\n",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "borderColor": "rgba(38, 150, 38, 0.3)"
            },
            "dark": {
                "borderColor": "rgba(85, 215, 85, 0.4)"
            }
        }
    },{
        "name": "trailing",
        "enabled": "unlessCursorAtEndOfPattern",
        "pattern": "[^\\S\\r\\n]+$",
        "style": {
            "borderWidth": "1px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(117, 141, 203, 0.3)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "control",
        "enabled": true,
        "pattern": "[\\cA-\\cH\\cK-\\cL\\cN-\\cZ\\u001B-\\u001F\\u007F]+",
        "style": {
            "borderWidth": "5px",
            "borderRadius": "0px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(58, 70, 101, 0.3)",
                "borderColor": "rgba(58, 70, 101, 0.4)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 0, 0, 0.9)",
                "borderColor": "rgba(117, 141, 203, 0.4)"
            }
        }
    },{
        "name": "blog",
        "enabled": true,
        "pattern": "(という|こと)",
        "style": {
            "borderWidth": "2px",
            "borderRadius": "2px",
            "borderStyle": "solid",
            "light": {
                "backgroundColor": "rgba(255, 140, 0, 0.9)",
                "borderColor": "rgba(255, 165, 0, 0.3)"
            },
            "dark": {
                "backgroundColor": "rgba(255, 140, 0, 0.9)",
                "borderColor": "rgba(255, 165, 0, 0.3)"
            }
        }
    }]
}