diff --git a/packages/mdx/md-ast-to-mdx-ast.js b/packages/mdx/md-ast-to-mdx-ast.js
index ad62895f0..1537f8e3c 100644
--- a/packages/mdx/md-ast-to-mdx-ast.js
+++ b/packages/mdx/md-ast-to-mdx-ast.js
@@ -1,9 +1,16 @@
 const visit = require('unist-util-visit')
 
+const commentOpen = '<!--'
+const commentClose = '-->'
+
 module.exports = options => tree => {
   visit(tree, 'html', node => {
-    if (node.value.startsWith('<!--') && node.value.endsWith('-->')) {
+    if (
+      node.value.startsWith(commentOpen) &&
+      node.value.endsWith(commentClose)
+    ) {
       node.type = 'comment'
+      node.value = node.value.slice(commentOpen.length, -commentClose.length)
     } else {
       node.type = node.mdxType || 'jsx'
     }
diff --git a/packages/mdx/mdx-hast-to-jsx.js b/packages/mdx/mdx-hast-to-jsx.js
index 6d09ac292..3597968c7 100644
--- a/packages/mdx/mdx-hast-to-jsx.js
+++ b/packages/mdx/mdx-hast-to-jsx.js
@@ -161,7 +161,7 @@ function toJSX(node, parentNode = {}, options = {}) {
   }
 
   if (node.type === 'comment') {
-    return node.value.replace('<!--', '{/*').replace('-->', '*/}')
+    return `{/*${node.value}*/}`
   }
 
   if (node.type === 'import' || node.type === 'export' || node.type === 'jsx') {
diff --git a/packages/mdx/test/index.test.js b/packages/mdx/test/index.test.js
index a3d9cffed..0bbda2352 100644
--- a/packages/mdx/test/index.test.js
+++ b/packages/mdx/test/index.test.js
@@ -107,6 +107,18 @@ it('Should render blockquote correctly', async () => {
   parse(result)
 })
 
+it('Should properly expose comments', async () => {
+  const result = await mdx('<!--foo-->', {
+    hastPlugins: [
+      () => tree => {
+        tree.children[0].value = 'bar'
+      }
+    ]
+  })
+
+  expect(result).toContain('{/*bar*/}')
+})
+
 it('Should render HTML inside inlineCode correctly', async () => {
   const result = await mdx('`<div>`')