diff --git a/changelog_unreleased/markdown/19908.md b/changelog_unreleased/markdown/19908.md new file mode 100644 index 000000000..4014f2e9f --- /dev/null +++ b/changelog_unreleased/markdown/19908.md @@ -0,0 +1,37 @@ +#### Fix fenced code block in a JS templates (#19908 by @Kjubikstronk) + + +````jsx +// Input +const content = markdown` +\`\`\`js +markdown\` + \\\`\\\`\\\`js + console.log('hi'); + \\\`\\\`\\\` +\` +\`\`\` +`; + +// Prettier stable +const content = markdown` +~~~js +markdown\` + ~~~js + console.log("hi"); + ~~~ +\`; +~~~ +`; + +// Prettier main +const content = markdown` +~~~~js +markdown\` + ~~~js + console.log("hi"); + ~~~ +\`; +~~~~ +`; +```` diff --git a/src/language-markdown/embed.js b/src/language-markdown/embed.js index 1701fbd56..2c3b40ecf 100644 --- a/src/language-markdown/embed.js +++ b/src/language-markdown/embed.js @@ -47,7 +47,7 @@ function embed(path, options) { textToDocOptions, ); - const style = printCodeFences(path, options); + const style = printCodeFences(doc, options); return markAsRoot([ style, diff --git a/src/language-markdown/print/code.js b/src/language-markdown/print/code.js index df19a6e0e..81ad25321 100644 --- a/src/language-markdown/print/code.js +++ b/src/language-markdown/print/code.js @@ -1,34 +1,43 @@ -import { align, hardline, replaceEndOfLine } from "../../document/index.js"; +import { + align, + hardline, + printDocToString, + replaceEndOfLine, +} from "../../document/index.js"; import getMaxContinuousCount from "../../utilities/get-max-continuous-count.js"; import { getFencedCodeBlockValue } from "../utilities.js"; -function printCodeFences(path, options) { +function printCodeFences(valueDoc, options) { const styleUnit = options.__inJsTemplate ? "~" : "`"; + const value = + typeof valueDoc === "string" + ? valueDoc + : printDocToString(valueDoc, { + ...options, + printWidth: Number.POSITIVE_INFINITY, + endOfLine: "lf", + }).formatted; return styleUnit.repeat( - Math.max(3, getMaxContinuousCount(path.node.value, styleUnit) + 1), + Math.max(3, getMaxContinuousCount(value, styleUnit) + 1), ); } function printFencedCodeBlock(path, options) { const { node } = path; - const styleUnit = options.__inJsTemplate ? "~" : "`"; - const style = styleUnit.repeat( - Math.max(3, getMaxContinuousCount(node.value, styleUnit) + 1), - ); + const value = + options.parser === "mdx" + ? getFencedCodeBlockValue(node, options.originalText) + : node.value; + const style = printCodeFences(value, options); return [ style, node.lang || "", node.meta ? " " + node.meta : "", hardline, - replaceEndOfLine( - options.parser === "mdx" - ? getFencedCodeBlockValue(node, options.originalText) - : node.value, - hardline, - ), + replaceEndOfLine(value, hardline), hardline, style, ]; diff --git a/tests/config/format-test/failed-format-tests.js b/tests/config/format-test/failed-format-tests.js index 7105e0db7..e4bf02fe1 100644 --- a/tests/config/format-test/failed-format-tests.js +++ b/tests/config/format-test/failed-format-tests.js @@ -10,10 +10,6 @@ const unstableTests = new Map( ], ["js/ignore/semi/head-ignored.js", (options) => options.semi === false], "js/comments/return-statement.js", - [ - "js/multiparser-markdown/codeblock.js", - (options) => options.proseWrap === "always", - ], "flow/hook/declare-hook.js", "flow/hook/hook-type-annotation.js", "flow/comments/type_annotations.js", diff --git a/tests/format/js/multiparser-markdown/__snapshots__/format.test.js.snap b/tests/format/js/multiparser-markdown/__snapshots__/format.test.js.snap index 85a7c04ce..b0330a114 100644 --- a/tests/format/js/multiparser-markdown/__snapshots__/format.test.js.snap +++ b/tests/format/js/multiparser-markdown/__snapshots__/format.test.js.snap @@ -69,15 +69,35 @@ markdown\\\` \\\`\\\`\\\` \`; +md\` +\\\`\\\`\\\`js +markdown\\\` + \\\\\\\`\\\\\\\`\\\\\\\`\\\\\\\`js + console.log('hi'); + \\\\\\\`\\\\\\\`\\\\\\\`\\\\\\\` +\\\` +\\\`\\\`\\\` +\`; + =====================================output===================================== md\` -~~~js +~~~~js markdown\\\` ~~~js console.log("hi"); ~~~ \\\`; -~~~ +~~~~ +\`; + +md\` +~~~~js +markdown\\\` + ~~~js + console.log("hi"); + ~~~ +\\\`; +~~~~ \`; ================================================================================ diff --git a/tests/format/js/multiparser-markdown/codeblock.js b/tests/format/js/multiparser-markdown/codeblock.js index f00c79d6d..ea3ea7382 100644 --- a/tests/format/js/multiparser-markdown/codeblock.js +++ b/tests/format/js/multiparser-markdown/codeblock.js @@ -7,3 +7,13 @@ markdown\` \` \`\`\` `; + +md` +\`\`\`js +markdown\` + \\\`\\\`\\\`\\\`js + console.log('hi'); + \\\`\\\`\\\`\\\` +\` +\`\`\` +`;