diff --git a/lib/run.tsx b/lib/run.tsx
index 95d78a1b1..b817e7450 100644
--- a/lib/run.tsx
+++ b/lib/run.tsx
@@ -40,6 +40,7 @@ const makeUseMDXComponents = (more: ReturnType<UseMdxComponents> = {}): UseMdxCo
     table: Components.Table,
     'code-tabs': Components.CodeTabs,
     'embed-block': Components.Embed,
+    'html-block': Components.HTMLBlock,
     'image-block': Components.Image,
     'table-of-contents': Components.TableOfContents,
     // @ts-expect-error
diff --git a/processor/compile/html-block.ts b/processor/compile/html-block.ts
index 316c63136..167bfe8fe 100644
--- a/processor/compile/html-block.ts
+++ b/processor/compile/html-block.ts
@@ -5,7 +5,7 @@ const htmlBlock = (node: HTMLBlock) => {
   const { runScripts, html } = getHProps<HTMLBlock['data']['hProperties']>(node);
 
   return `<HTMLBlock${runScripts != null ? ` runScripts="${runScripts}"` : ''}>{\`
-${ reformatHTML(html) }
+  ${ reformatHTML(html) }
 \`}</HTMLBlock>`;
 }
 
diff --git a/processor/transform/readme-components.ts b/processor/transform/readme-components.ts
index 2e9d96e0d..fdc2cdc95 100644
--- a/processor/transform/readme-components.ts
+++ b/processor/transform/readme-components.ts
@@ -76,7 +76,7 @@ const coerceJsxToMd =
         children: [{ type: 'text', value: html }],
         type: NodeTypes.htmlBlock,
         data: {
-          hName: 'HTMLBlock',
+          hName: 'html-block',
           hProperties: {
             ...(runScripts && { runScripts }),
             html,
diff --git a/types.d.ts b/types.d.ts
index de5c97ab1..3186340e6 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -48,7 +48,7 @@ interface HTMLBlock extends Node {
   type: NodeTypes.htmlBlock;
   children: Text[];
   data: Data & {
-    hName: 'HTMLBlock';
+    hName: 'html-block';
     hProperties: {
       runScripts?: boolean | string;
       html: string;