Skip to content

Customize code block class#8

Open
scratchpadjp wants to merge 3 commits intocrz33:mainfrom
scratchpadjp:customize-code-block-class
Open

Customize code block class#8
scratchpadjp wants to merge 3 commits intocrz33:mainfrom
scratchpadjp:customize-code-block-class

Conversation

@scratchpadjp
Copy link

Markdownのコードブロックから生成されるHTMLを変更できるようにしました。

元々のコードでは

```c
int main(int argc, char* argv[]) {
    printf("hello world\n");
    return 0;
}
```

とすると、次のようなHTMLが生成されます。

<pre><code class="language-c">int main(int argc, char* argv[]) {
    printf("hello world\n");
    return 0;
}
</code></pre>

使用しているWordPressのSyntaxHighlighterによっては、うまく認識しない場合があります。そこで、

  • 言語のclass名のプリフィックス
  • 言語をclassをつけるHTMLタグ

を変更できるようにしてみました。
(デフォルトでは従来と同じHTMLが生成されるようにしています)

生成されるHTMLの変更はMarkdown-itのhighlightオプションに関数を渡すことで実現しています。
Markdown-itの初期化時にこのオプションを変更するために、Markdown-itの取り込みを、ソースファイル冒頭のimportから関数中でのrequireに変更しています。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant