'
+// The trailing newline is important. Without it, the line immediately after
+// the `` will be considered part of the previous block, which means the Markdown following the `` will not be rendered to HTML correctly. For example:
+//
+//
Here's some stuff
+// And *here* us also some stuff.
+//
+// Another **sentence** here.
+//
+// Will yield:
+//
+//
Here's some stuff
+// And *here* us also some stuff.
+//
+//
Another sentence here.
+//
+// when rendering this template with unified.
+// If you instead inject an extra newline after the ``, you
+// go from:
+//
+//
Here's some stuff
+//
+// And *here* us also some stuff.
+//
+// Another **sentence** here.
+//
+// which yields:
+//
+//
Here's some stuff
+//
+//
And here us also some stuff.
+//
+//
Another sentence here.
+//
+// The Tool Liquid tags are a little bit fragile because we hope and assume
+// that the author of the Liquid+Markdown *don't* do this:
+//
+// {% vscode %}Bla bla.{% endvscode %}Next stuff here...
+//
+const template = '
{{ output }}
\n'
export const Tool = {
type: 'block',
diff --git a/src/fixtures/fixtures/content/get-started/liquid/tool-platform-switcher.md b/src/fixtures/fixtures/content/get-started/liquid/tool-platform-switcher.md
index 3d3c89288e7d..81b11eb2f508 100644
--- a/src/fixtures/fixtures/content/get-started/liquid/tool-platform-switcher.md
+++ b/src/fixtures/fixtures/content/get-started/liquid/tool-platform-switcher.md
@@ -78,3 +78,11 @@ Bla bla
`linux` specific content.
{% endlinux %}
+
+## Misc testing
+
+{% linux %}
+It's important to test that immediately after the end tag, the Markdown
+there renders to HTML.
+{% endlinux %}
+On *this* line is `Markdown` too.
diff --git a/src/fixtures/tests/liquid.js b/src/fixtures/tests/liquid.js
index 49b7a8b6a80c..63e2c60dcb09 100644
--- a/src/fixtures/tests/liquid.js
+++ b/src/fixtures/tests/liquid.js
@@ -224,6 +224,17 @@ describe('misc Liquid', () => {
expect(texts[0]).toBe(url)
expect(texts[1]).toBe('Pricing')
})
+
+ test('page with tool Liquid tag followed by Markdown', async () => {
+ // This test tests Markdown being correctly rendered when the
+ // Markdown directly follows a tool tag like `{% linux %}...{% endlinux %}`.
+ // The next line immediately after the `{% endlinux %}` should not
+ // leave the Markdown unrendered
+ const $ = await getDOM('/get-started/liquid/tool-platform-switcher')
+ const innerHTML = $('#article-contents').html()
+ expect(innerHTML).not.toMatch('On *this* line is `Markdown` too.')
+ expect(innerHTML).toMatch('
+ setIsSearchOpen(!isSearchOpen)}
- aria-label="Open Search Bar"
- aria-expanded={isSearchOpen ? 'true' : 'false'}
- icon={SearchIcon}
- />
- setIsSearchOpen(!isSearchOpen)}
- aria-label="Close Search Bar"
- aria-expanded={isSearchOpen ? 'true' : 'false'}
- icon={XIcon}
- sx={
- isSearchOpen
- ? {
- // The x button to close the small width search UI when search is open, as the
- // browser width increases to md and above we no longer show that search UI so
- // the close search button is hidden as well.
- // breakpoint(md)
- '@media (min-width: 768px)': {
- display: 'none',
- },
- }
- : {
+ data-testid="mobile-search-button"
+ onClick={() => setIsSearchOpen(!isSearchOpen)}
+ aria-label="Open Search Bar"
+ aria-expanded={isSearchOpen ? 'true' : 'false'}
+ icon={SearchIcon}
+ />
+ setIsSearchOpen(!isSearchOpen)}
+ aria-label="Close Search Bar"
+ aria-expanded={isSearchOpen ? 'true' : 'false'}
+ icon={XIcon}
+ sx={
+ isSearchOpen
+ ? {
+ // The x button to close the small width search UI when search is open, as the
+ // browser width increases to md and above we no longer show that search UI so
+ // the close search button is hidden as well.
+ // breakpoint(md)
+ '@media (min-width: 768px)': {
display: 'none',
- }
- }
- />
+ },
+ }
+ : {
+ display: 'none',
+ }
+ }
+ />
- {/* The ... navigation menu at medium and smaller widths */}
-