
Notionにマークダウン記法で記載されたJavaScriptのコードブロックをコピーして、WordPressやVSCode、その他のテキストエディタに貼り付けると、jsxとして認識されてしまう。
WP Githuber MDなどのプラグインを使ってマークダウンでブログを書いている場合なんかはjsxとして認識されるとコードがハイライトされないので結構困る。
functions.phpに下記を追記したら解決する。
//コードブロックのjsxをJavaScriptに置き換える
function inline_replace_jsx_with_javascript() {
echo <<<JS
<script>
document.addEventListener('DOMContentLoaded', function () {
const codeBlocks = document.querySelectorAll('pre code');
codeBlocks.forEach((block) => {
if (block.classList.contains('language-jsx')) {
block.classList.remove('language-jsx');
block.classList.add('language-javascript');
}
});
// Prism.jsのカスタムイベントを発行
const event = new CustomEvent('PrismHighlight');
document.dispatchEvent(event);
});
</script>
JS;
}
add_action('wp_footer', 'inline_replace_jsx_with_javascript');