NotionからWordPressへの転記 jsx認識をJavaScriptに変換!

2023年4月17日 2023年4月17日

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');