にしもと.blog

色々してます。

Slackのバッククオートで囲むやつをCSSで再現する

こんなやつ

この↓のソース囲んでいる灰色の箱をHTMLで再現したかった。

ソースコード

css部分だけ。

div.slack_block {
    display: block;
    background: #f9f9f9;
    padding: .5rem;
    border: 1px solid rgba(0,0,0,.15);
    white-space: pre-wrap; 
    border-radius: 4px;
}

サンプルコード

<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css" media="screen">
        /*
            white-space: pre-wrap があるとテキストの折返しが有効になる
            https://developer.mozilla.org/ja/docs/Web/CSS/white-space
        */
        div.slack_block {
            display: block;
            background: #f9f9f9;
            padding: .5rem;
            border: 1px solid rgba(0,0,0,.15);
            white-space: pre-wrap; 
            border-radius: 4px;
        }

    </style>    

<div class="slack_block">1行目はここにかかないと駄目です
2行目もスペース空いていると駄目です
インデントがごちゃごちゃになるのが難点…
</div>

</body>
</html>

よくわかんなかったところ

white-space: pre-wrap があるとテキストの折返しが有効になるらしい https://developer.mozilla.org/ja/docs/Web/CSS/white-space