{"id":21726620,"url":"https://github.com/ipikuka/remark-flexible-code-titles","last_synced_at":"2025-04-12T23:30:31.436Z","repository":{"id":65396250,"uuid":"589722811","full_name":"ipikuka/remark-flexible-code-titles","owner":"ipikuka","description":"Remark plugin to add titles or/and containers for the code blocks with customizable properties","archived":false,"fork":false,"pushed_at":"2025-03-19T08:05:33.000Z","size":460,"stargazers_count":19,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-26T17:41:34.461Z","etag":null,"topics":["code-titles","markdown","remark","remark-plugin","unified"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ipikuka.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-16T19:33:04.000Z","updated_at":"2025-03-19T08:05:37.000Z","dependencies_parsed_at":"2023-12-17T20:41:58.351Z","dependency_job_id":"1b5de9cc-4f14-418d-90c8-b8fc41a0ffb7","html_url":"https://github.com/ipikuka/remark-flexible-code-titles","commit_stats":{"total_commits":38,"total_committers":2,"mean_commits":19.0,"dds":0.02631578947368418,"last_synced_commit":"4facb9df62ef243119ec3811dfbee58ed06d2186"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipikuka%2Fremark-flexible-code-titles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipikuka%2Fremark-flexible-code-titles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipikuka%2Fremark-flexible-code-titles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ipikuka%2Fremark-flexible-code-titles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ipikuka","download_url":"https://codeload.github.com/ipikuka/remark-flexible-code-titles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248647249,"owners_count":21139081,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-titles","markdown","remark","remark-plugin","unified"],"created_at":"2024-11-26T03:38:11.498Z","updated_at":"2025-04-12T23:30:31.429Z","avatar_url":"https://github.com/ipikuka.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# remark-flexible-code-titles\n\n[![NPM version][badge-npm-version]][npm-package-url]\n[![NPM downloads][badge-npm-download]][npm-package-url]\n[![Build][badge-build]][github-workflow-url]\n[![codecov](https://codecov.io/gh/ipikuka/remark-flexible-code-titles/graph/badge.svg?token=LJKU8SQ935)](https://codecov.io/gh/ipikuka/remark-flexible-code-titles)\n[![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage\u0026prefix=%E2%89%A5\u0026suffix=%\u0026query=$.typeCoverage.atLeast\u0026uri=https%3A%2F%2Fraw.githubusercontent.com%2Fipikuka%2Fremark-flexible-code-titles%2Fmaster%2Fpackage.json)](https://github.com/ipikuka/remark-flexible-code-titles)\n[![typescript][badge-typescript]][typescript-url]\n[![License][badge-license]][github-license-url]\n\nThis package is a [unified][unified] ([remark][remark]) plugin to add title or/and container for code blocks with customizable properties in markdown.\n\n**[unified][unified]** is a project that transforms content with abstract syntax trees (ASTs) using the new parser **[micromark][micromark]**. **[remark][remark]** adds support for markdown to unified. **[mdast][mdast]** is the Markdown Abstract Syntax Tree (AST) which is a specification for representing markdown in a syntax tree.\n\n**This plugin is a remark plugin that transforms the mdast.**\n\n## When should I use this?\n\nThis plugin is useful if you want to **add title and container or any of two** for code blocks in markdown. \n\nThe plugin `remark-flexible-code-titles` can:\n\n- add `title` node above the `code` node, providing _custom tag name, custom class name and also additional properties_.\n- add `container` node for the `code` node, providing _custom tag name, custom class name and also additional properties_.\n- correct the syntax of code highligting directives on behalf of related rehype plugins (like [rehype-prism-plus][rehypeprismplus])\n- handle the titles even if there is no language provided,\n- handle the titles composed by more than one word (handle spaces in the title),\n- provide a fallback language as an option if the language is missing.\n\n## Installation\n\nThis package is suitable for ESM only. In Node.js (16.0+), install with npm:\n\n```bash\nnpm install remark-flexible-code-titles\n```\n\nor\n\n```bash\nyarn add remark-flexible-code-titles\n```\n\n## Usage\n\nSay we have the following file, `example.md`, which consists a code block. The code block's language is \"javascript\" and its title is \"file.js\" specified _after a colon_ **`:`**\n\n````markdown\n```javascript:file.js\n/* code block */\n```\n````\n\nAnd our module, `example.js`, looks as follows:\n\n```javascript\nimport { read } from \"to-vfile\";\nimport remark from \"remark\";\nimport gfm from \"remark-gfm\";\nimport remarkRehype from \"remark-rehype\";\nimport rehypeStringify from \"rehype-stringify\";\nimport remarkCodeTitles from \"remark-flexible-code-titles\";\n\nmain();\n\nasync function main() {\n  const file = await remark()\n    .use(gfm)\n    .use(remarkCodeTitles)\n    .use(remarkRehype)\n    .use(rehypeStringify)\n    .process(await read(\"example.md\"));\n\n  console.log(String(file));\n}\n```\n\nNow, running `node example.js` yields:\n\n```html\n\u003cdiv class=\"remark-code-container\"\u003e\n  \u003cdiv class=\"remark-code-title\"\u003etitle.js\u003c/div\u003e\n  \u003c!-- \u003cpre\u003e\u003ccode\u003e elements --\u003e\n\u003c/div\u003e\n```\n\nWithout `remark-flexible-code-titles`, you’d get:\n\n```html\n\u003cpre\u003e\n   \u003ccode class=\"language-javascript:file.js\"\u003e\u003c!-- code block --\u003e\u003c/code\u003e \n\u003c/pre\u003e\n```\n\nYou can use the `remark-flexible-code-titles` **without a language**, _setting the title just after a colon_ **`:`**\n\n````markdown\n```:title\nThis is a line of pseudo code.\n```\n````\n\n## Options\n\nAll options are **optional** and some of them have **default values**.\n\n```tsx\ntype RestrictedRecord = Record\u003cstring, unknown\u003e \u0026 { className?: never };\ntype PropertyFunction = (language?: string, title?: string) =\u003e RestrictedRecord;\n\nuse(remarkCodeTitles, {\n  title?: boolean; // default is true\n  titleTagName?: string; // default is \"div\"\n  titleClassName?: string; // default is \"remark-code-title\"\n  titleProperties?: PropertyFunction;\n  container?: boolean; // default is true\n  containerTagName?: string; // default is \"div\"\n  containerClassName?: string; // default is \"remark-code-container\"\n  containerProperties?: PropertyFunction;\n  handleMissingLanguageAs?: string;\n  tokenForSpaceInTitle?: string;\n} as CodeTitleOptions);\n```\n\n#### `title`\n\nIt is a **boolean** option for whether or not to add a `title` node.\n\nBy default, it is `true`, meaningly adds a `title` node if a title is provided in the language part of the code block.\n\n```javascript\nuse(remarkCodeTitles, {\n  title: false,\n});\n```\n\nIf the option is `false`, the plugin will not add any `title` node.\n\n````markdown\n```javascript:file.js\nconsole.log(\"Hi\")\n```\n````\n\n```html\n\u003cdiv class=\"remark-code-container\"\u003e\n  \u003c!-- there is no title element ! --\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-javascript\"\u003econsole.log(\"Hi\")\u003c/code\u003e\n  \u003cpre\u003e\n\u003c/div\u003e\n```\n\n#### `titleTagName`\n\nIt is a **string** option for providing custom HTML tag name for `title` nodes.\n\nBy default, it is `div`.\n\n```javascript\nuse(remarkCodeTitles, {\n  titleTagName: \"span\",\n});\n```\n\nNow, the title element tag names will be `span`.\n\n````markdown\n```javascript:file.js\nconsole.log(\"Hi\")\n```\n````\n\n```html\n\u003cdiv class=\"remark-code-container\"\u003e\n  \u003cspan class=\"remark-code-title\"\u003efile.js\u003c/span\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-javascript\"\u003econsole.log(\"Hi\")\u003c/code\u003e\n  \u003cpre\u003e\n\u003c/div\u003e\n```\n\n#### `titleClassName`\n\nIt is a **string** option for providing custom class name for `title` nodes.\n\nBy default, it is `remark-code-title`, and all title elements' class names will contain `remark-code-title`.\n\n```javascript\nuse(remarkCodeTitles, {\n  titleClassName: \"custom-code-title\",\n});\n```\n\nNow, the title element class names will be `custom-code-title`.\n\n````markdown\n```javascript:file.js\nconsole.log(\"Hi\")\n```\n````\n\n```html\n\u003cdiv class=\"remark-code-container\"\u003e\n  \u003cdiv class=\"custom-code-title\"\u003efile.js\u003c/div\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-javascript\"\u003econsole.log(\"Hi\")\u003c/code\u003e\n  \u003cpre\u003e\n\u003c/div\u003e\n```\n\n#### `titleProperties`\n\nIt is a **callback** `(language?: string, title?: string) =\u003e Record\u003cstring, unknown\u003e \u0026 { className?: never }` option to set additional properties for the `title` node.\n\nThe callback function that takes the `language` and the `title` as optional arguments and returns **object** which is going to be used for adding additional properties into the `title` node.\n\n**The `className` key is forbidden and effectless in the returned object.**\n\n```javascript\nuse(remarkCodeTitles, {\n  titleProperties(language, title) {\n    return {\n      title,\n      [\"data-language\"]: language,\n    };\n  },\n});\n```\n\nNow, the title elements will contain `title` and `data-color` properties.\n\n````markdown\n```javascript:file.js\nconsole.log(\"Hi\")\n```\n````\n\n```html\n\u003cdiv class=\"remark-code-container\"\u003e\n  \u003cdiv class=\"remark-code-title\" title=\"file.js\" data-language=\"javascript\"\u003efile.js\u003c/div\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-javascript\"\u003econsole.log(\"Hi\")\u003c/code\u003e\n  \u003cpre\u003e\n\u003c/div\u003e\n```\n\n#### `container`\n\nIt is a **boolean** option for whether or not to add a `container` node.\n\nBy default, it is `true`, meaningly adds a `container` node.\n\n```javascript\nuse(remarkCodeTitles, {\n  container: false,\n});\n```\n\nIf the option is `false`, the plugin doesn't add any `container` node.\n\n````markdown\n```javascript:file.js\nconsole.log(\"Hi\")\n```\n````\n\n```html\n\u003c!-- there is no container element ! --\u003e\n\u003cdiv class=\"remark-code-title\"\u003efile.js\u003c/div\u003e\n\u003cpre\u003e\n  \u003ccode class=\"language-javascript\"\u003econsole.log(\"Hi\")\u003c/code\u003e\n\u003cpre\u003e\n\n```\n\n#### `containerTagName`\n\nIt is a **string** option for providing custom HTML tag name for `container` nodes.\n\nBy default, it is `div`.\n\n```javascript\nuse(remarkCodeTitles, {\n  containerTagName: \"section\",\n});\n```\n\nNow, the container element tag names will be `section`.\n\n````markdown\n```javascript:file.js\nconsole.log(\"Hi\")\n```\n````\n\n```html\n\u003csection class=\"remark-code-container\"\u003e\n  \u003cdiv class=\"remark-code-title\"\u003efile.js\u003c/div\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-javascript\"\u003econsole.log(\"Hi\")\u003c/code\u003e\n  \u003cpre\u003e\n\u003c/div\u003e\n```\n\n#### `containerClassName`\n\nIt is a **string** option for providing custom class name for `container` nodes.\n\nBy default, it is `remark-code-container`, and all container elements' class names will contain `remark-code-container`.\n\n```javascript\nuse(remarkCodeTitles, {\n  containerClassName: \"custom-code-container\",\n});\n```\n\nNow, the container element class names will be `custom-code-container`.\n\n````markdown\n```javascript:file.js\nconsole.log(\"Hi\")\n```\n````\n\n```html\n\u003cdiv class=\"custom-code-container\"\u003e\n  \u003cdiv class=\"remark-code-title\"\u003efile.js\u003c/div\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-javascript\"\u003econsole.log(\"Hi\")\u003c/code\u003e\n  \u003cpre\u003e\n\u003c/div\u003e\n```\n\n#### `containerProperties`\n\nIt is a **callback** `(language?: string, title?: string) =\u003e Record\u003cstring, unknown\u003e \u0026 { className?: never }` option to set additional properties for the `container` node.\n\nThe callback function that takes the `language` and the `title` as optional arguments and returns **object** which is going to be used for adding additional properties into the `container` node.\n\n**The `className` key is forbidden and effectless in the returned object.**\n\n```javascript\nuse(remarkCodeTitles, {\n  titleProperties(language, title) {\n    return {\n      title,\n      [\"data-language\"]: language,\n    };\n  },\n});\n```\n\nNow, the container elements will contain `title` and `data-color` properties.\n\n````markdown\n```javascript:file.js\nconsole.log(\"Hi\")\n```\n````\n\n```html\n\u003cdiv class=\"remark-code-container\" title=\"file.js\" data-language=\"javascript\"\u003e\n  \u003cdiv class=\"remark-code-title\"\u003efile.js\u003c/div\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-javascript\"\u003econsole.log(\"Hi\")\u003c/code\u003e\n  \u003cpre\u003e\n\u003c/div\u003e\n```\n\n#### `handleMissingLanguageAs`\n\nIt is a **string** option for providing a fallback language if the language is missing.\n\n```javascript\nuse(remarkCodeTitles, {\n  handleMissingLanguageAs: \"unknown\",\n});\n```\n\nNow, the class name of `\u003ccode\u003e` elements will contain `language-unknown` if the language is missing. If this option was not set, the `class` property would not be presented in the `\u003ccode\u003e`element.\n\n````markdown\n```\nHello from code block\n```\n````\n\n```html\n\u003cdiv class=\"remark-code-container\"\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-unknown\"\u003eHello from code block\u003c/code\u003e\n  \u003cpre\u003e\n\u003c/div\u003e\n```\n\n#### `tokenForSpaceInTitle`\n\nIt is a **string** option for composing the title with more than one word.\n\nNormally, the `remark-flexible-code-titles` can match a code title which is the word that comes after a colon and ends in the first space it encounters. This option is provided to replace a space with a token in order to specify a code title consisting of more than one word.\n\n```javascript\nuse(remarkCodeTitles, {\n  tokenForSpaceInTitle: \"@\",\n});\n```\n\nNow, the titles that have more than one word can be set using the token `@`.\n\n````markdown\n```bash:Useful@Bash@Commands\nmkdir project-directory\n```\n````\n\n```html\n\u003cdiv class=\"remark-code-container\"\u003e\n  \u003cdiv class=\"remark-code-title\"\u003eUseful Bash Commands\u003c/div\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-bash\"\u003emkdir project-directory\u003c/code\u003e\n  \u003cpre\u003e\n\u003c/div\u003e\n```\n\n## Examples:\n\n#### Example for only container\n\n````markdown\n```javascript:file.js\nlet me = \"ipikuka\";\n```\n````\n\n```javascript\nuse(remarkCodeTitles, {\n  title: false,\n  containerTagName: \"section\",\n  containerClassName: \"custom-code-wrapper\",\n  containerProperties(language, title) {\n    return {\n      [\"data-language\"]: language,\n      title,\n    };\n  },\n});\n```\n\nis going to produce the container `section` element like below:\n\n```html\n\u003csection class=\"custom-code-wrapper\" data-language=\"javascript\" title=\"file.js\"\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-javascript\"\u003elet me = \"ipikuka\";\u003c/code\u003e\n  \u003c/pre\u003e\n\u003c/section\u003e\n```\n\n#### Example for only title\n\n````markdown\n```javascript:file.js\nlet me = \"ipikuka\";\n```\n````\n\n```javascript\nuse(remarkCodeTitles, {\n  container: false,\n  titleTagName: \"span\",\n  titleClassName: \"custom-code-title\",\n  titleProperties: (language, title) =\u003e {\n    [\"data-language\"]: language,\n    title,\n  },\n});\n```\n\nis going to produce the title `span` element just before the code block, like below:\n\n```html\n\u003cspan class=\"custom-code-title\" data-language=\"javascript\" title=\"file.js\"\u003efile.js\u003c/span\u003e\n\u003cpre\u003e\n  \u003ccode class=\"language-javascript\"\u003elet me = \"ipikuka\";\u003c/code\u003e\n\u003c/pre\u003e\n```\n\n#### Example for line highlighting and numbering\n\n\u003e [!NOTE]\n\u003e You need a rehype plugin like **rehype-prism-plus** for line highlighting and numbering features.\n\n````markdown\n```javascript:file.js {1,3-6} showLineNumbers\nlet me = \"ipikuka\";\n```\n````\n\nThe `remark-flexible-code-titles` takes the line highlighting and numbering syntax into consideration, and passes that information to other remark and rehype plugins.\n\nBut, if you want to highlight and number the lines **without specifying language**, you will get the language of the code block as for example `language-{2}` like strings. Let me give an example:\n\n````markdown\n```{2} showLineNumbers\nThis is a line which is going to be numbered with rehype-prism-plus.\nThis is a line which is going to be highlighted and numbered with rehype-prism-plus.\n```\n````\n\nThe above markdown, with no language provided, will lead to produce a mdast \"code\" node as follows:\n\n```json\n{\n  \"type\": \"code\",\n  \"lang\": \"{2}\",\n  \"meta\": \"showLineNumbers\"\n}\n```\n\nAs a result, the html `code` element will have wrong language `language-{2}`:  \n_(The class `code-highlight` in the `code` element is added by the rehype plugin `rehype-prism-plus`)_\n\n```html\n\u003ccode class=\"language-{2} code-highlight\"\u003e...\u003c/code\u003e\n```\n\nThe `remark-flexible-code-titles` not only adds `title` and `container` elements but also **corrects the language** producing the below `mdast` which will lead the `\u003ccode\u003e` element has accurate language or not have language as it sould be.\n\n```json\n{\n  \"type\": \"code\",\n  \"lang\": null,\n  \"meta\": \"{2} showLineNumbers\"\n}\n```\n\n```html\n\u003ccode class=\"code-highlight\"\u003e\n  \u003c!-- highlighted and numbered lines --\u003e\n\u003c/code\u003e\n```\n\nIf there is no space between the parts (_title, line range string and \"showLineNumbers\"_), or there is extra spaces inside the _line range string_, line highlighting or numbering features by the rehype plugin will not work. **The `remark-flexible-code-titles` can handles and corrects this kind of mis-typed situations**. \n\n````markdown\n```typescript:title{ 1, 3 - 6 }showLineNumbers\ncontent\n```\n````\n\nThere is mis-typed syntax in above markdown example; and without `remark-flexible-code-titles` will cause to produce the following `mdast`; and the rehype plugin not to work properly:\n\n```json\n{\n  \"type\": \"code\",\n  \"lang\": \"typescript:title{\",\n  \"meta\": \" 1, 3 - 6 }showLineNumbers\"\n}\n```\n\nThe `remark-flexible-code-titles` will correct the syntax and ensure to produce the following `mdast` and `html`:\n\n```json\n{\n  \"type\": \"code\",\n  \"lang\": \"typescript\",\n  \"meta\": \"{1,3-6} showLineNumbers\"\n}\n```\n\n```html\n\u003cdiv class=\"remark-code-container\"\u003e\n  \u003cdiv class=\"remark-code-title\"\u003etitle\u003c/div\u003e\n  \u003cpre\u003e\n    \u003ccode class=\"language-typescript code-highlight\"\u003e\n      \u003c!-- highlighted and numbered lines --\u003e\n    \u003c/code\u003e\n  \u003c/pre\u003e\n\u003c/div\u003e\n```\n\n#### Example for providing a title without any language\n\nYou can provide a `title` without any language just using a colon **`:`** at the beginning.\n\n````markdown\n```:title\ncontent\n```\n````\n\n```html\n\u003cdiv class=\"remark-code-container\"\u003e\n  \u003cdiv class=\"remark-code-title\"\u003etitle\u003c/div\u003e\n  \u003cpre\u003e\n    \u003ccode\u003econtent\u003c/code\u003e\n  \u003c/pre\u003e\n\u003c/div\u003e\n```\n\n### Another flexible usage\n\nYou can use `remark-flexible-code-titles` **just for only correcting language, line highlighting and numbering syntax** on behalf of related rehype plugins.\n\n```javascript\nuse(remarkCodeTitles, {\n  container: false,\n  title: false,\n});\n```\n\nNow, the `remark-flexible-code-titles` will not add any node, but will correct language, line highlighting and numbering syntax.\n\n## Syntax tree\n\nThis plugin only modifies the mdast (markdown abstract syntax tree) as explained.\n\n## Types\n\nThis package is fully typed with [TypeScript][typescript]. The plugin options' type is exported as `CodeTitleOptions`.\n\n## Compatibility\n\nThis plugin works with `unified` version 6+ and `remark` version 7+. It is compatible with `mdx` version 2+.\n\n## Security\n\nUse of `remark-flexible-code-titles` does not involve rehype (hast) or user content so there are no openings for cross-site scripting (XSS) attacks.\n\n## My Plugins\n\nI like to contribute the Unified / Remark / MDX ecosystem, so I recommend you to have a look my plugins.\n\n### My Remark Plugins\n\n- [`remark-flexible-code-titles`](https://www.npmjs.com/package/remark-flexible-code-titles)\n  – Remark plugin to add titles or/and containers for the code blocks with customizable properties\n- [`remark-flexible-containers`](https://www.npmjs.com/package/remark-flexible-containers)\n  – Remark plugin to add custom containers with customizable properties in markdown\n- [`remark-ins`](https://www.npmjs.com/package/remark-ins)\n  – Remark plugin to add `ins` element in markdown\n- [`remark-flexible-paragraphs`](https://www.npmjs.com/package/remark-flexible-paragraphs)\n  – Remark plugin to add custom paragraphs with customizable properties in markdown\n- [`remark-flexible-markers`](https://www.npmjs.com/package/remark-flexible-markers)\n  – Remark plugin to add custom `mark` element with customizable properties in markdown\n- [`remark-flexible-toc`](https://www.npmjs.com/package/remark-flexible-toc)\n  – Remark plugin to expose the table of contents via Vfile.data or via an option reference\n- [`remark-mdx-remove-esm`](https://www.npmjs.com/package/remark-mdx-remove-esm)\n  – Remark plugin to remove import and/or export statements (mdxjsEsm)\n\n### My Rehype Plugins\n\n- [`rehype-pre-language`](https://www.npmjs.com/package/rehype-pre-language)\n  – Rehype plugin to add language information as a property to `pre` element\n- [`rehype-highlight-code-lines`](https://www.npmjs.com/package/rehype-highlight-code-lines)\n  – Rehype plugin to add line numbers to code blocks and allow highlighting of desired code lines\n- [`rehype-code-meta`](https://www.npmjs.com/package/rehype-code-meta)\n  – Rehype plugin to copy `code.data.meta` to `code.properties.metastring`\n\n### My Recma Plugins\n\n- [`recma-mdx-escape-missing-components`](https://www.npmjs.com/package/recma-mdx-escape-missing-components)\n  – Recma plugin to set the default value `() =\u003e null` for the Components in MDX in case of missing or not provided so as not to throw an error\n- [`recma-mdx-change-props`](https://www.npmjs.com/package/recma-mdx-change-props)\n  – Recma plugin to change the `props` parameter into the `_props` in the `function _createMdxContent(props) {/* */}` in the compiled source in order to be able to use `{props.foo}` like expressions. It is useful for the `next-mdx-remote` or `next-mdx-remote-client` users in `nextjs` applications.\n- [`recma-mdx-change-imports`](https://www.npmjs.com/package/recma-mdx-change-imports)\n  – Recma plugin to convert import declarations for assets and media with relative links into variable declarations with string URLs, enabling direct asset URL resolution in compiled MDX.\n- [`recma-mdx-import-media`](https://www.npmjs.com/package/recma-mdx-import-media)\n  – Recma plugin to turn media relative paths into import declarations for both markdown and html syntax in MDX.\n- [`recma-mdx-import-react`](https://www.npmjs.com/package/recma-mdx-import-react)\n  – Recma plugin to ensure getting `React` instance from the arguments and to make the runtime props `{React, jsx, jsxs, jsxDev, Fragment}` is available in the dynamically imported components in the compiled source of MDX.\n\n## License\n\n[MIT License](./LICENSE) © ipikuka\n\n### Keywords\n\n🟩 [unified][unifiednpm] 🟩 [remark][remarknpm] 🟩 [remark plugin][remarkpluginnpm] 🟩 [mdast][mdastnpm] 🟩 [markdown][markdownnpm] 🟩 [remark code titles][remarkcodetitlesnpm]\n\n[unifiednpm]: https://www.npmjs.com/search?q=keywords:unified\n[remarknpm]: https://www.npmjs.com/search?q=keywords:remark\n[remarkpluginnpm]: https://www.npmjs.com/search?q=keywords:remark%20plugin\n[mdastnpm]: https://www.npmjs.com/search?q=keywords:mdast\n[markdownnpm]: https://www.npmjs.com/search?q=keywords:markdown\n[remarkcodetitlesnpm]: https://www.npmjs.com/search?q=keywords:remark%20code%20titles\n\n[unified]: https://github.com/unifiedjs/unified\n[remark]: https://github.com/remarkjs/remark\n[remarkplugins]: https://github.com/remarkjs/remark/blob/main/doc/plugins.md\n[mdast]: https://github.com/syntax-tree/mdast\n[micromark]: https://github.com/micromark/micromark\n[typescript]: https://www.typescriptlang.org/\n[rehypeprismplus]: https://github.com/timlrx/rehype-prism-plus\n\n[badge-npm-version]: https://img.shields.io/npm/v/remark-flexible-code-titles\n[badge-npm-download]: https://img.shields.io/npm/dt/remark-flexible-code-titles\n[npm-package-url]: https://www.npmjs.com/package/remark-flexible-code-titles\n\n[badge-license]: https://img.shields.io/github/license/ipikuka/remark-flexible-code-titles\n[github-license-url]: https://github.com/ipikuka/remark-flexible-code-titles/blob/main/LICENSE\n\n[badge-build]: https://github.com/ipikuka/remark-flexible-code-titles/actions/workflows/publish.yml/badge.svg\n[github-workflow-url]: https://github.com/ipikuka/remark-flexible-code-titles/actions/workflows/publish.yml\n\n[badge-typescript]: https://img.shields.io/npm/types/remark-flexible-code-titles\n[typescript-url]: https://www.typescriptlang.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipikuka%2Fremark-flexible-code-titles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fipikuka%2Fremark-flexible-code-titles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fipikuka%2Fremark-flexible-code-titles/lists"}