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

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');
このブログのWordPressテーマはこれ

2022年現在、当サイトではDirverを利用しています。

こんな風にページ最下部の広告を複数パターンを登録して、記事ごとに選ぶこともできます。

効率化を重視するあまり、準備だけで疲弊していませんか?

 

時給換算すると有料テーマを買ったほうが、費用対効果も高いです。

 

Driver運営のサポートがとても親切で、わからないこともメールで聞けばすぐに教えてくれます。

「何サイトまでしか使いまわしてはいけない」なんてセコいことも言いません。

 

ぜひ、詳細を覗てみてください。

おすすめの記事