diff --git a/src/theme/assets/scss/theme/_docs.scss b/src/theme/assets/scss/theme/_docs.scss
index 527ae30b..6971f287 100644
--- a/src/theme/assets/scss/theme/_docs.scss
+++ b/src/theme/assets/scss/theme/_docs.scss
@@ -284,7 +284,8 @@
 		font-size: 1rem;
 	}
 
-	.content p:last-of-type {
+	// Don't add unnecessary space at the end of a callout block
+	.content > :last-child {
 		margin-bottom: 0;
 	}
 	
diff --git a/src/utils/parseCalloutTags.ts b/src/utils/parseCalloutTags.ts
index f4949c9f..0a8ae97f 100644
--- a/src/utils/parseCalloutTags.ts
+++ b/src/utils/parseCalloutTags.ts
@@ -1,12 +1,16 @@
 import { ReactElement, createElement } from 'react';
+import { DomElement, HTMLReactParserOptions, domToReact } from "html-react-parser";
 import CalloutBlock from '../components/CalloutBlock';
 
 /**
  * Turn [hint] and other callouts into a proper React component.
  * @param data
  */
-const parseCalloutTags = (type: string, content: any): ReactElement|false => {
-    return createElement(CalloutBlock, { type, content });
+const parseCalloutTags = (type: string, domChildren: DomElement[], parseOptions: HTMLReactParserOptions): ReactElement|false => {
+    return createElement(CalloutBlock, {
+        type,
+        content: domToReact(domChildren, parseOptions),
+    });
 };
 
 export default parseCalloutTags;
\ No newline at end of file
diff --git a/src/utils/parseHTML.ts b/src/utils/parseHTML.ts
index 7b7d463b..24afc261 100644
--- a/src/utils/parseHTML.ts
+++ b/src/utils/parseHTML.ts
@@ -55,7 +55,7 @@ const parseHTML = (html: string): ReactElement | ReactElement[] | string => {
                         }
                         // Remove the type marker and render the component
                         firstTextNode.data = firstTextNode.data.replace(calloutTypeRegex, '');
-                        return parseCalloutTags(matches[1], domToReact(children));
+                        return parseCalloutTags(matches[1], children, parseOptions);
                     }
                 }
             }