MDX ドキュメント上にて、ちょっとした JavaScript を実行させたい時

MDX は、JSX が書ける Markdown ドキュメントフォーマットです。このサイトも MDX にて書かれています。
仕様上 JSX および import と export そして HTML コメントを Markdown の他に記述できます。そのため、const hoge = 1 とか書いても単なるテキストになってしまいます。

このドキュメント上のみで JavaScript を使うにはどうしたらいいでしょうか。

王道を行くのであれば、このドキュメント自体を表示しているコンポーネントに書くということが考えられますが、このドキュメントのみでちょっとした JavaScript を実行したいという要望があったとします。

JSX と export が使えるということは、ざっと考えると、以下みたいなことにより実行できると思いますよね。
まず、空のコンポーネントを定義し、

export class ExecuteJs extends React.Component {
    render() {
        return null;
    }
}

それを JSX として記述する際に実行するというものです。

<ExecuteJs>{console.log("Hello World!!")}</ExecuteJs>

ただし、これを実行すると Hello World!! がなんどもコンソールに表示されます。これは、コンポーネントのレンダリングのたびに実行されてしまうからです。マウント時に一度だけ実行したい場合はこんな風に書いてみると、実現できます。

まずは export を使って同様にコンポーネントの定義をします。

export class ExecuteJs extends React.Component {
    componentDidMount() {
        if(typeof this.props.fn === 'function') {
            this.props.fn()
        }
    }
    render() {
        return null;
    }
}

ポイントは componentDidMount 時に props に渡ってくる fn という関数を実行するようにしているという部分です。
実際に JSX にて使う場合は以下のように記述します。

<ExecuteJs fn={() => {console.log("Hello World!!")} } />

これで、マウント時に一度だけ実行できるようになりました。

この方法は、邪道かもしれませんが、どうしても JavaScript を MDX ドキュメント上のみで実行したいときに検討してみてください。
この方法はまだ考える余地はいろいろあるかもしれません。導入は慎重に。