Merge pull request #5 from marp-team/keep-whitespace

Fix ignored whitespaces and line breaks in fenced code

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Fix ignored whitespaces and line breaks in fenced code ([#4](https://github.com/marp-team/marp-react/issues/4), [#5](https://github.com/marp-team/marp-react/pull/5))
+
 ## v0.0.2 - 2019-03-03
 
 ### Changed

src/utils/parse.ts

@@ -33,5 +33,8 @@ const html = htm.bind((type: string, props, ...children) => {
 })
 
 export default function parse(htmlStr: string) {
-  return html([htmlStr])
+  const lines = htmlStr.split('\n')
+  const breaks = [...Array(lines.length - 1)].map(() => '\n')
+
+  return html(lines, ...breaks)
 }

test/index.tsx

@@ -39,6 +39,27 @@ class: lead
     expect(marp.find('figure')).toHaveLength(1)
   })
 
+  it('renders highlighted fence correctly', () => {
+    const markdown = `
+\`\`\`js
+test({
+  foo: 0,
+  bar: 1,
+});
+\`\`\`
+`.trim()
+
+    const marp = mount(<Marp markdown={markdown} />)
+    expect(marp.text().trim()).toBe(
+      `
+test({
+  foo: 0,
+  bar: 1,
+});
+`.trim()
+    )
+  })
+
   it('injects global style for rendering Marp slide', () => {
     mount(<Marp />)
     expect(document.head.querySelector('style[id^="marp-style"]')).toBeTruthy()
@@ -164,7 +185,7 @@ describe('MarpWorker', () => {
     act(() => {
       worker.interrupt(false)
     })
-    expect(marp.text()).toBe('3')
+    expect(marp.text().trim()).toBe('3')
 
     // 2nd rendering will be skipped
     expect(worker.postQueue).not.toBeCalledWith(expect.arrayContaining(['2']))