diff --git a/packages/ui-default/components/highlighter/highlighter.page.ts b/packages/ui-default/components/highlighter/highlighter.page.ts
index b6eee7d6..c9a2db8c 100644
--- a/packages/ui-default/components/highlighter/highlighter.page.ts
+++ b/packages/ui-default/components/highlighter/highlighter.page.ts
@@ -17,12 +17,13 @@ const highlighterPage = new AutoloadPage('highlighterPage', () => {
       $container.find('pre code').get().forEach((code) => {
         const $code = $(code);
         const $root = $code.parent().parent();
+        const $typo = $code.closest('.typo');
         const language = ($(code).attr('class') || '').trim();
         const m = language.match(/language-input([0-9]+)/);
         if (m?.[1]) {
           const id = +m[1];
           if (Number.isSafeInteger(id)) {
-            const $output = $container.find(`pre.language-output${id}`);
+            const $output = ($typo.length ? $typo : $container).find(`pre.language-output${id}`);
             if ($output.length) {
               const $c = $(document.createElement('div')).addClass('row');
               $root.after($c);