<code>の説明表示を希望します

[tukiyo]

独自タグでそれっぽくしてみました。よかったら取り込んでください。

/* START_CODE_TITLE */
f {
    display:inline;
    background-color: rgba(0,0,0,0.07); 
    color: #555;
    font-size: 0.8em;
    font-weight: 400;
    padding: .25em .5em;
}
f + pre {
    margin-top: 0;
}
/* END_CODE_TITLE */

fは極力短い文字かつ左手を動かさずに入力できる文字として選びました。

[tatesuke]

ご意見ありがとうございます。

なるほど、cssの修正だけで行うという方法があるのですね。
qiitaのような ```:説明の表記を導入することも考えてました。どちらを採用するにせよ、CSSは大いに参考にさせていただきます。

```:説明

[tukiyo]

参考までに、Qiitaの :説明 は以下の欠点があります。

• Qiitaの独自拡張(?)のため Redmine や Github に互換性がない。(コピペしてもsyntax hilightされない)
• スペースや:を途中に入れられない。
  • :git stauts の結果みたいな説明を入れる場合、空白部分を で書く必要がある

Qiitaのmarkdownを他で実装されているのは https://github.com/rutan/potmum だけでした。

:説明の例はきっと以下のような感じですね。

<style>
code {
    display:inline;
    background-color: rgba(0,0,0,0.07);
    color: #555;
    font-size: 0.8em;
    font-weight: 400;
    padding: 0.1em;
}
</style>

<div id="content" style="background-color:skyblue; width:40em; height:5em">
```php:説明
コンテンツの内容
` `` 
</div>

<br>

<div id="display" style="background-color:skyblue; width:40em; height:5em;">
</div>

<script>
var src = document.getElementById("content").innerHTML;
src = src.replace(/\n```\w+:(.*?)\n/, "<code>$1</code><br>");
src = src.replace(/```\n/, "</pre>");
document.getElementById("display").innerHTML = src;
</script>