Cocoonのpreタグにファイル名を入れたいんじゃ!

Other

Cocoonのpreタグにファイル名を入れたいんじゃ!

ここはWordPressでCocoonを使ってるわけですが

Cocoonでこれ!表示したい!

外観⇒テーマファイルエディタ

にこれを追加

/*
 * コードのタイトル
*/

.entry-content pre {
  position: relative;
  padding-top:1.1em;
}

.entry-content pre::before{
    content: attr(pre-title);
    padding: 0 1em;
    background: #303030;
    color: #C0C0C0;
    font-size: 0.8em;
    border-radius: 3px 0 0 0;
    position: absolute;
    right: 0;
    top: 0;
}

保存したら
実際に表示させたいときは

<pre class="csharp" pre-title="Interfaces/IToast.cs">
namespace DearFutureMe.Interface
{
    public interface IToast
    {
        void Show(string message);
    }
}</pre>

みたいにすれば表示される

コメント

タイトルとURLをコピーしました