Mouでpdfエクスポートする際にpre要素を折り返すように設定

普段、MacのMarkdownエディターは Mouを使っているのですが、CSS設定を「GitHub」にした状態でpdfエクスポートを実行すると、pre要素が途中で切れてしまう問題に悩まされていました。

そこで、cssを編集して折り返すように修正しました。

# ファイルの保存場所
/Users/{ユーザ名}/Library/Application Support/Mou/CSS/GitHub.css

24行目にあるpre要素に3行追加

pre {
    margin:1em 0;
    font-size:12px;
    background-color:#eee;
    border:1px solid #ddd;
    padding:5px;
    line-height:1.5em;
    color:#444;
    overflow:auto;
    white-space:pre-wrap;   // 追加
    word-wrap: break-word;  // 追加
    overflow: auto;         // 追加
    -webkit-box-shadow:rgba(0,0,0,0.07) 0 1px 2px inset;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;border-radius:3px;
}

これでpdfエクスポートしてもpre要素内が正しく表示できるようになりました。

参考URL

• pre要素で折り返しをするためのCSS