remarkjs / remark-rehype

plugin that turns markdown into HTML to support rehype
https://remark.js.org
MIT License
258 stars 18 forks source link

HardBreak converting issue #27

Closed SunPj closed 1 year ago

SunPj commented 1 year ago

Initial checklist

Affected packages and versions

^9.1.0

Link to runnable example

No response

Steps to reproduce

When I convert <p>2</p>3<br><p></p> HTML code to Markdown and back to HTML I got <p>2</p>\n<p>3\</p>, the structure is not the same, which is fine but I am concerned about \ symbol which is shown in result HTML.

import {unified} from 'unified'
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeParse from 'rehype-parse'
import rehypeRemark from 'rehype-remark'
import remarkStringify from 'remark-stringify'
import rehypeStringify from "rehype-stringify";

main()

async function main() {
  const text = `<p>2</p>3<br><p></p>`

  console.log("-- Initial HTML code --")
  console.log(text)

  const file = await unified()
    .use(rehypeParse)
    .use(rehypeRemark)
    .use(remarkStringify)
    .process(text)

  const textResult = file.value
  console.log("--- Parsed to Markdown --- ")
  console.log(JSON.stringify(textResult))
  console.log(textResult === "1\\\n\\\n")

  const markdownToHtmlProcessor = unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeStringify);

  const htmlContent = await markdownToHtmlProcessor.process(textResult);
  console.log("--- Converted back to HTML  --- ")
  console.log(String(htmlContent))
}

Output

-- Initial HTML code --
<p>2</p>3<br><p></p>
--- Parsed to Markdown --- 
"2\n\n3\\\n"
false
--- Converted back to HTML  --- 
<p>2</p>
<p>3\</p>

Expected behavior

Lack of / (backslash) symbol in result HTML code

Actual behavior

Presence of / (backslash) symbol in result HTML code

Runtime

Node v16

Package manager

npm 8

OS

No response

Build and bundle tools

Webpack, Next.js

wooorm commented 1 year ago

Thanks, solved!