diff --git a/addon/utils/compile-markdown.js b/addon/utils/compile-markdown.js
index d17369655..a2848a32f 100644
--- a/addon/utils/compile-markdown.js
+++ b/addon/utils/compile-markdown.js
@@ -133,6 +133,10 @@ function compactParagraphs(tokens) {
     let tokenText = token.text || '';
     let textWithoutCode = tokenText.replace(/`[\s\S]*?`/g, '');
 
+    if (token.type === 'code') {
+      textWithoutCode = ''
+    }
+
     balance += count(/{{#/g, textWithoutCode);
     balance += count(/<[A-Z]/g, textWithoutCode);
     balance -= count(/[A-Z][^<>]+\/>/g, textWithoutCode);
diff --git a/tests-node/unit/utils/compile-markdown-test.js b/tests-node/unit/utils/compile-markdown-test.js
index 4223c3c3c..ef7699f35 100644
--- a/tests-node/unit/utils/compile-markdown-test.js
+++ b/tests-node/unit/utils/compile-markdown-test.js
@@ -179,4 +179,46 @@ describe('Unit | compile-markdown', function(hooks) {
 
     assert.equal(result, expected);
   });
+
+  it('using code block simple case', function() {
+    let input = stripIndent`
+      \`\`\`hbs
+        <FooBar>Hello</FooBar>
+      \`\`\`
+
+      This is after code block
+    `;
+
+    let result = compileMarkdown(input, { targetHandlebars: true });
+    let expected = stripIndent`
+      <div class="docs-md"><pre class="docs-md__code"><code class="undefinedhbs"><span class="xml">  <span class="hljs-tag">&lt;<span class="hljs-name">FooBar</span>&gt;</span>Hello<span class="hljs-tag">&lt;/<span class="hljs-name">FooBar</span>&gt;</span></span></code></pre>
+      <p>This is after code block</p></div>
+    `;
+
+    assert.equal(result, expected);
+  });
+
+  it('using code block with self-closing tag inside', function() {
+    let input = stripIndent`
+      \`\`\`hbs
+      <form.Text
+        @fieldName="name.first"
+        @label="First Name"
+      />
+      \`\`\`
+
+      This is after code block
+    `;
+
+    let result = compileMarkdown(input, { targetHandlebars: true });
+    let expected = stripIndent`
+      <div class="docs-md"><pre class="docs-md__code"><code class="undefinedhbs"><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">form.Text</span>
+        @<span class="hljs-attr">fieldName</span>=<span class="hljs-string">"name.first"</span>
+        @<span class="hljs-attr">label</span>=<span class="hljs-string">"First Name"</span>
+      /&gt;</span></span></code></pre>
+      <p>This is after code block</p></div>
+    `;
+
+    assert.equal(result, expected);
+  });
 });
diff --git a/tests/dummy/app/pods/docs/quickstart/template.md b/tests/dummy/app/pods/docs/quickstart/template.md
index e2e082610..767654168 100644
--- a/tests/dummy/app/pods/docs/quickstart/template.md
+++ b/tests/dummy/app/pods/docs/quickstart/template.md
@@ -88,17 +88,17 @@ AddonDocs is unopinionated about how you style your application, so you can use
 
 The `docs` route is the entry point for your guides and API docs. Create a new `docs/template.hbs` file for the `docs` route and add the `<DocsViewer />` component:
 
-  {{#docs-snippet name="quickstart-skeleton.hbs" language="htmlbars" title="tests/dummy/app/templates/docs.hbs"}}
-    {{#docs-viewer as |viewer|}}
-      {{#viewer.nav as |nav|}}
-        {{nav.item "Introduction" "docs.index"}}
-      {{/viewer.nav}}
-
-      {{#viewer.main}}
-        {{outlet}}
-      {{/viewer.main}}
-    {{/docs-viewer}}
-  {{/docs-snippet}}
+{{#docs-snippet name="quickstart-skeleton.hbs" language="htmlbars" title="tests/dummy/app/templates/docs.hbs"}}
+  {{#docs-viewer as |viewer|}}
+    {{#viewer.nav as |nav|}}
+      {{nav.item "Introduction" "docs.index"}}
+    {{/viewer.nav}}
+
+    {{#viewer.main}}
+      {{outlet}}
+    {{/viewer.main}}
+  {{/docs-viewer}}
+{{/docs-snippet}}
 
 If you visit `/docs` or click the Documentation link in the header, you should see the viewer's nav on the left-hand side and an area in the center where your guides content will go.