prism にファイル名を表示

prism はとても便利ですが、ファイル名を表示したいことがよくあります。

これまでは別に div で作成していましたが、面倒でその上美しくありません。

以下のようにするととても見やすい。

STORAGE_DIR=/storage/fs1
POSTGRES_DB=pacsdb
POSTGRES_USER=pacs
POSTGRES_PASSWORD=pacs

html は

<span class="prism-title">docker-compose.env</span>
<pre><code class="language-bash">
STORAGE_DIR=/storage/fs1
POSTGRES_DB=pacsdb
POSTGRES_USER=pacs
POSTGRES_PASSWORD=pacs
</code>
</pre>

css は

.prism-title{
    background: #4e4e4e;
    font-size: 90%;
    display: inline-block;
    color: #eab4b6;
    letter-spacing: 1px;
    padding: 3px 15px 0px 15px;
    border: 1px solid #4e4e4e;
    border-radius: 0px 5px 0px 0px;
	  margin-bottom:0px;
    margin-left:1px;
}
pre[class*="language-"] {
    margin-top: 0px !important;
    margin-left: 0px !important;
    margin-bottom: 20px !important;
    border-radius: 0em !important;
}
code[class*="language-"] {
    padding: 0px !important;
    margin: 0px !important;
}