diff --git a/lib/util/parseHeaders.js b/lib/util/parseHeaders.js
index 77b701c528..f999bd22bd 100644
--- a/lib/util/parseHeaders.js
+++ b/lib/util/parseHeaders.js
@@ -17,9 +17,15 @@ const removeMarkdownToken = str => String(str)
   .replace(/(`|\*{1,3}|_)(.*?[^\\])\1/g, '$2')  // `{t}` | *{t}* | **{t}** | ***{t}*** | _{t}_
   .replace(/(\\)(\*|_|`)/g, '$2')               // remove escape char '\'
 
-exports.removeTailHtml = (str) => {
-  return String(str).replace(/\s*?<.*>\s*$/g, '')
-}
+exports.removeTailHtml = (str) => String(str)
+  .replace(/\s*?<.*>\s*$/g, '')
+  .replace(/\s`<(.*?)\/>`$/g, ' <code><$1></code>')
+
+exports.removeLeadingHtml = (str) => String(str)
+  .replace(/^(#\s)<.*\/?>./g, '$1')
+  .replace(/^(#)<.*\/?>./g, '$1 ')
+  .replace(/^(#\s)`<(.*?)\/?>`/g, '$1<code><$2></code>')
+  .replace(/^(#)`<(.*?)\/?>`/g, '$1 <code><$2></code>')
 
 // Only remove some md tokens.
 exports.parseHeaders = compose(
@@ -32,6 +38,7 @@ exports.parseHeaders = compose(
 // Since we want to support tailed badge in headers.
 // See: https://vuepress.vuejs.org/guide/using-vue.html#badge
 exports.deeplyParseHeaders = compose(
+  exports.removeLeadingHtml,
   exports.removeTailHtml,
   exports.parseHeaders,
 )
diff --git a/test/util/parseHeaders.spec.js b/test/util/parseHeaders.spec.js
index 3d1eb6a8be..ea3d089194 100644
--- a/test/util/parseHeaders.spec.js
+++ b/test/util/parseHeaders.spec.js
@@ -1,6 +1,7 @@
 import {
   parseHeaders,
   removeTailHtml,
+  removeLeadingHtml,
   deeplyParseHeaders
 } from '@/util/parseHeaders'
 
@@ -39,8 +40,20 @@ describe('parseHeaders', () => {
     expect(removeTailHtml('# H1 <Comp a="b"/>')).toBe('# H1')
   })
 
+  test('should strip leading html correctly', () => {
+    expect(removeLeadingHtml('# <Comp/> H1')).toBe('# H1')
+    expect(removeLeadingHtml('# <Comp></Comp> H1')).toBe('# H1')
+    expect(removeLeadingHtml('#<Comp></Comp> H1')).toBe('# H1')
+    expect(removeLeadingHtml('# `<Comp/>` H1')).toBe('# <code><Comp></code> H1')
+    expect(removeLeadingHtml('#`<Comp/>` H1')).toBe('# <code><Comp></code> H1')
+  })
+
   test('should deeplyParseHeaders transformed as expected', () => {
     expect(deeplyParseHeaders('# `H1` <Comp></Comp>')).toBe('# H1')
     expect(deeplyParseHeaders('# *H1* <Comp/>')).toBe('# H1')
+    expect(deeplyParseHeaders('# *H1* <Badge text="test"/>')).toBe('# H1')
+    expect(deeplyParseHeaders('# `<Comp/>` `H1`')).toBe('# <code><Comp></code> H1')
+    expect(deeplyParseHeaders('# <Comp/> `H1` <Comp/>')).toBe('# H1')
+    expect(deeplyParseHeaders('# `<Comp/>` `H1` `<Comp/>`')).toBe('# <code><Comp></code> H1 <code><Comp></code>')
   })
 })