remarkjs / remark

markdown processor powered by plugins part of the @unifiedjs collective
https://remark.js.org
MIT License
7.66k stars 358 forks source link

Backtics are missing if code blocks language is not defined #941

Closed AndrejGajdos closed 2 years ago

AndrejGajdos commented 2 years ago

Initial checklist

Affected packages and versions

react-stringify 10.0.2, unified 10.1.1

Link to runnable example

No response

Steps to reproduce

codesandbox

Expected behavior

The second code block without lang parameter is missing backticks:

{
    "stringified": "```javascript\nfunction $initHighlight(block, cls) {\n  return (\n    <div>\n      <web-component>test</web-component>\n    </div>\n  )\n}\nexport  $initHighlight;\n```\n\n    function $initHighlight(block, cls) {\n      return (\n        <div>\n          <web-component>test</web-component>\n        </div>\n      )\n    }\n    export  $initHighlight;\n"
}

The correct output would be:

{
    "stringified": "```javascript\nfunction $initHighlight(block, cls) {\n  return (\n    <div>\n      <web-component>test</web-component>\n    </div>\n  )\n}\nexport  $initHighlight;\n```\n\n    ```function $initHighlight(block, cls) {\n      return (\n        <div>\n          <web-component>test</web-component>\n        </div>\n      )\n    }\n    export  $initHighlight;```\n"
}

Actual behavior

When code block is converted to string, it should be wrapped with backticks ```.

This is the input wuth two code blocks. The lang parameter is defined in the first one.

{
      type: "root",
      children: [
        {
          type: "code",
          lang: "javascript",
          meta: null,
          value:
            "function $initHighlight(block, cls) {\n  return (\n    <div>\n      <web-component>test</web-component>\n    </div>\n  )\n}\nexport  $initHighlight;"
        },
        {
          type: "code",
          lang: null,
          meta: null,
          value:
            "function $initHighlight(block, cls) {\n  return (\n    <div>\n      <web-component>test</web-component>\n    </div>\n  )\n}\nexport  $initHighlight;"
        }
      ]
    }

This is the result:

{
    "stringified": "```javascript\nfunction $initHighlight(block, cls) {\n  return (\n    <div>\n      <web-component>test</web-component>\n    </div>\n  )\n}\nexport  $initHighlight;\n```\n\n    function $initHighlight(block, cls) {\n      return (\n        <div>\n          <web-component>test</web-component>\n        </div>\n      )\n    }\n    export  $initHighlight;\n"
}

Runtime

No response

Package manager

No response

OS

No response

Build and bundle tools

No response

wooorm commented 2 years ago

You can configure remark: https://github.com/remarkjs/remark/tree/main/packages/remark-stringify#unifieduseremarkstringify-options.