{"id":19782426,"url":"https://github.com/steadylearner/react-easy-md","last_synced_at":"2025-10-30T11:48:12.956Z","repository":{"id":34442352,"uuid":"179099897","full_name":"steadylearner/react-easy-md","owner":"steadylearner","description":"Write markdown easily with React and some JavaScript modules.","archived":false,"fork":false,"pushed_at":"2023-01-03T18:58:10.000Z","size":1934,"stargazers_count":0,"open_issues_count":47,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-11T02:32:55.517Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.steadylearner.com/blog","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/steadylearner.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}},"created_at":"2019-04-02T14:50:22.000Z","updated_at":"2019-08-28T15:30:30.000Z","dependencies_parsed_at":"2023-01-15T07:15:41.165Z","dependency_job_id":null,"html_url":"https://github.com/steadylearner/react-easy-md","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Freact-easy-md","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Freact-easy-md/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Freact-easy-md/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/steadylearner%2Freact-easy-md/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/steadylearner","download_url":"https://codeload.github.com/steadylearner/react-easy-md/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241113292,"owners_count":19911859,"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":[],"created_at":"2024-11-12T06:05:07.645Z","updated_at":"2025-10-30T11:48:07.923Z","avatar_url":"https://github.com/steadylearner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- Shortcut --\u003e\r\n\r\n[react-marked-markdown]: https://github.com/Vincent-P/react-marked-markdown\r\n[React Easy Markdown Github Repository]: https://github.com/steadylearner/react-easy-md\r\n[examples]: https://github.com/steadylearner/react-easy-md/tree/master/examples\r\n[Codesandbox for react-easy-md]: https://codesandbox.io/s/wz9pp1xpn8\r\n[How to enable code syntax highlight in React App]: https://medium.com/@steadylearner/how-to-enable-code-syntax-highlight-in-react-app-38463498fa6e\r\n[How to write less code for links in markdown with React]: https://www.steadylearner.com/blog/read/How-to-write-less-code-for-links-in-markdown-with-React\r\n[marked]: https://github.com/markedjs/marked\r\n[convertdir.js]: https://github.com/steadylearner/react-easy-md/blob/master/convert_directory/convertdir.js\r\n\r\n\u003c!-- \\Shortcut --\u003e\r\n\r\n\u003c!-- Steadylearner --\u003e\r\n\r\n[Steadylearner]: https://www.steadylearner.com/\r\n[Blog]: https://www.steadylearner.com/blog\r\n[Markdown]: https://www.steadylearner.com/markdown\r\n[prop-passer]: https://www.npmjs.com/package/prop-passer\r\n\r\n\u003c!-- \\Steadylearner --\u003e\r\n\r\n\u003c!-- [![Travis branch](https://img.shields.io/travis/Steadylearner/react-easy-md/master.svg?maxAge=2592000)]() --\u003e\r\n\r\n [![npm version](https://badge.fury.io/js/react-easy-md.svg)](https://badge.fury.io/js/react-easy-md) [![npm](https://img.shields.io/npm/dt/react-easy-md.svg?maxAge=2592000)](https://img.shields.io/npm/dt/react-easy-md.svg)\r\n\r\n# React Easy Markdown(react-easy-md)\r\n\r\nWrite Markdown with React easily with some JavaScript modules for it.\r\n\r\n---\r\n\r\n\u003c!-- NPM turns a link to absolute path when publish --\u003e\r\n\r\n\u003c!-- Use main image later --\u003e\r\n[![react-easy-md-example](static/images/react-easy-md.png)](https://github.com/steadylearner/react-easy-md/tree/master/examples/react-easy-markdown-example)\r\n\r\nThis is forked version of [react-marked-markdown]. But the differences are\r\n\r\n1. It solved the problem of showing `null` title.\r\n2. `set` prop is included for **MarkdownPreview** to help you write shortcuts for `\u003ca\u003e` inside markdown.\r\n3. The modules used here became functional components.\r\n4. LiveMarkdownEditor is removed from the package to reduce package size(Refer to [examples] from [Markdown Editor Page][Markdown] at [Steadylearner] instead.)\r\n5. **API** such as **copy(ToClipBoard)**, **html**, **makrdown**, **readLocalFileWithHow** and **saveTextFromWeb** to help you handle .md file.\r\n\r\nThe original Github repository is archived so this package was made to share the code from the former repository with some improvements.\r\n\r\n[Steadylearner] uses markdown intensively and it may have more features later.\r\n\r\nTo explain more about `1.`, You can define title for links with the syntax below\r\n\r\n```md\r\n[Website](https://www.steadylearner.com/ \"Website\")\r\n```\r\n\r\nBut having default value solves the problem of showing **null** title when users forget to define it or when third party data doesn't send it.\r\n\r\n## Install\r\n\r\n1. Type `$npm install --save react-easy-md` or `$yarn add react-easy-md` in your **CLI**\r\n\r\n2. Then,import component(s) you want\r\n\r\n```js\r\nimport {\r\n  MarkdownInput,\r\n  MarkdownPreview,\r\n  //\r\n  html,\r\n  markdown,\r\n  copy,\r\n  readLocalFileWithHow,\r\n  saveTextFromWeb,\r\n  //\r\n  substitute,\r\n  // reverseSet,\r\n  // unsubstitute,\r\n} from 'react-easy-md';\r\n```\r\n\r\n## Version Specific\r\n\r\n1. Main image for react-easy-md and it will be the last main update for it.\r\n2. **set** will be used for shortcuts(You may use **substitute** to use entire paths when you save file.)\r\n3. Test and examples are updated.\r\n4. It will be the last main update for this package.\r\n\r\n## Demo\r\n\r\n1. [Live Editor at Steadylearner][Markdown] or [CRA Version](https://github.com/steadylearner/react-easy-md/tree/master/examples/react-easy-markdown-example)\r\n\r\n2. [Steadylearner Blog Posts](https://www.steadylearner.com/blog)\r\n\r\n[![react-easy-md-example](static/images/react-easy-md-example.png)](https://github.com/steadylearner/react-easy-md/tree/master/examples/react-easy-markdown-example)\r\n\r\n[![react-easy-md-example](static/images/react-easy-md-post.png)](https://www.steadylearner.com/blog/read/React-Easy-Markdown)\r\n\r\n## Example\r\n\r\n```js\r\n// index.js\r\nimport React from \"react\";\r\nimport ReactDOM from \"react-dom\";\r\nimport { MarkdownPreview, copy, } from \"react-easy-md\";\r\n\r\nconst example = \"## React Easy Markdown\"\r\n\r\nconst set = [\r\n  [\"s-\", \"https://www.steadylearner.com\"],\r\n  [\"l-\", \"https://www.linkedin.com/in\"],\r\n  [\"y-\", \"https://www.youtube.com/channel/\"],\r\n  [\"t-\", \"https://twitter.com/\"],\r\n  [\"g-\", \"https://www.github.com\"],\r\n];\r\n\r\nfunction App() {\r\n  return (\r\n    \u003csection className=\"App\"\u003e\r\n      \u003cMarkdownPreview\r\n        value={markdown(html(example))}\r\n        markedOptions={{\r\n          langPrefix: \"hljs \", // 1.\r\n          sanitize: false, // // 2.\r\n          breaks: true, // 3.\r\n        }}\r\n        set={set} // 4.\r\n      /\u003e\r\n      \u003cbutton onClick={() =\u003e copy(example)} \u003eCopy\u003c/button\u003e\r\n    \u003c/section\u003e\r\n  );\r\n}\r\n\r\nconst rootElement = document.getElementById(\"root\");\r\nReactDOM.render(\u003cApp /\u003e, rootElement);\r\n```\r\n\r\nYou can Refer to www.steadylearner.com/markdown page for live example.\r\n\r\nThe important points here are\r\n\r\n1. hljs prefix to style code blocks.\r\n\r\n2. false to allow html\r\n\r\n3. You can use [enter] instead of \\n\r\n\r\n4. You can define shortcut for links with **set** prop\r\n\r\nFor code syntax highlight process in **1.**, you may read [How to enable code syntax highlight in React App].\r\n\r\nThen, Include link below in your index.html.\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/foundation.min.css\" /\u003e\r\n```\r\n\r\n## Main API\r\n\r\n1. Main API is **MarkdownPreview** and **set** is used to define shortcuts for links.\r\n2. You can refer to documentations from [react-marked-markdown] and [marked] first.\r\n\r\n### set\r\n\r\nDefine set of shortcuts and links for your .md files.\r\n\r\n```js\r\nconst set = [\r\n  [\"s-\", \"https://www.steadlyearner.com\"],\r\n  [\"l-\", \"https://www.linkedin.com/in\"],\r\n  [\"y-\", \"https://www.youtube.com/channel/\"],\r\n  [\"t-\", \"https://twitter.com/\"],\r\n  [\"g-\", \"https://www.github.com\"]\r\n];\r\n```\r\n\r\nThen, pass it to `MarkdownPreview` for set prop and it will convert\r\n\r\n```md\r\n[Blog](s-/blog)\r\n[LinkedIn](l-/steady-learner-3151b7164)\r\n[YouTube](y-/UCt_jsJOe91EVjd58kHpgTfw)\r\n[Twittter](t-/steadylearner_p)\r\n[Github](g-/steadylearner)\r\n```\r\n\r\nequal to\r\n\r\n```md\r\n[Blog](https://www.steadylearner.com/blog)\r\n[LinkedIn](https://www.linkedin.com/in/steady-learner-3151b7164/)\r\n[YouTube](https://www.youtube.com/channel/UCt_jsJOe91EVjd58kHpgTfw)\r\n[Twittter](https://twitter.com/steadylearner_p)\r\n[Github](https://github.com/steadylearner)\r\n```\r\n\r\nWith `set` from this package, **you don't have to type the entire paths anymore**.\r\n\r\nIt helps you **not to repeat what you know they will do**.\r\nYou can use it wherever you use link. For example,\r\n\r\n```md\r\n[code]: s-/code \"Steadylearner Code\"\r\n```\r\n\r\n### substitute, unsubstitue, reverseSet\r\n\r\nYou can use shortcuts you define in **set** and use **substitute** before you use .md file where\r\ndon't have code to convert them.\r\n\r\n```jsx\r\nimport { substitute, unsubstitute } from \"react-easy-md\";\r\n\r\nconst set = [\r\n  [\"s-\", \"https://www.steadlyearner.com\"],\r\n  [\"l-\", \"https://www.linkedin.com/in\"],\r\n  [\"y-\", \"https://www.youtube.com/channel/\"],\r\n  [\"t-\", \"https://twitter.com/\"],\r\n  [\"g-\", \"https://www.github.com\"]\r\n];\r\n\r\nconst short = \": s-, (s-)\";\r\nconst long = \": www.steadylearner.com, (https://www.steadylearner.com)\";\r\nsubstitute(set)(short); // equals to long\r\nunsubstitue(set)(long); // eqauls to short\r\n```\r\n\r\nWhat you need is just to wrap .md file **value** with `substitute(set)(value)`.\r\n\r\nunsubstitue is just reverse API of substitute. You can make it with substitute and reverseSet.\r\nBut it is included for your convenience.\r\n\r\nYou can refer to [example code][examples] to understand it better or [tests](https://github.com/steadylearner/react-easy-md/tree/master/src/__tests__) for it.\r\n\r\nThey use regex so you have to use it with caution and test for your .md file before you use them.\r\n\r\nIf you want to use it for all .md files in directory, please refer to [convertdir.js].\r\n\r\n### html and markdown\r\n\r\n```js\r\nimport { html, markdown } from \"react-easy-md\";\r\n\r\nconst package = \"# react easy md\";\r\nconst HTML = html(package); // \u003ch1 id=\"react-easy-md\" \u003ereact easy md\u003c/h1\u003e\r\nconst react-easy-md = markdown(HTML) // \"# react easy md\"\r\n```\r\n\r\n## API to read and save .md files\r\n\r\nYou can use them for .md files or other usages.\r\n\r\n### readLocalFileWithHow, saveTextFromWeb\r\n\r\n```js\r\nimport React, { Component } from \"react\";\r\nimport { readLocalFileWithHow, saveTextFromWeb } from \"react-easy-md\";\r\n\r\nclass ReadSave extends Component {\r\n\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      value: \"# React Easy Markdown\",\r\n    };\r\n  }\r\n\r\n  readLocalFile(e) {\r\n      readLocalFileWithHow(e, (value) =\u003e this.setState({\r\n          value,\r\n      }));\r\n  } // 1.\r\n\r\n  // 2.\r\n  render() {\r\n    const { value } = this.state;\r\n\r\n    return (\u003csection\u003e\r\n      \u003cspan\u003e\r\n          \u003cinput\r\n              className=\"md-file-input\"\r\n              type=\"file\"\r\n              id=\"md-file-input\"\r\n              name=\"md-file-input\"\r\n              accept=\".md\"\r\n              onClick={(e) =\u003e this.readLocalFile(e)}\r\n          /\u003e\r\n          \u003clabel\r\n            htmlFor=\"md-file-input\"\r\n          \u003e\r\n          \u003c/label\u003e\r\n      \u003c/span\u003e\r\n      \u003cspan\r\n          onClick={() =\u003e saveTextFromWeb(value)}\r\n      \u003e\r\n          \u003ci\r\n              className={`fas fa-file`}\r\n          /\u003e\r\n      \u003c/span\u003e\r\n    \u003c/section\u003e);\r\n  }\r\n}\r\n```\r\n\r\nYou can refer to [examples] for them.\r\n\r\nThe important parts here are\r\n\r\n1. **e** and **value** is mandatory for `readLocalFileWithHow`.(Then, You can define function for how to use it)\r\n2. You just need to pass **data** you want to save in your machine for saveTextFromWeb.\r\n\r\n## Problem with Webpack?\r\n\r\nIf you see some warnings and errors with this package while you use webpack, you may include\r\n\r\n```js\r\n// Refer to webpack.config.js at\r\n// https://github.com/steadylearner/react-easy-md/blob/master/examples/config/webpack.config.js\r\n\r\n// Remove errors in developement\r\nconst FilterWarningsPlugin = require('webpack-filter-warnings-plugin');\r\n// For production mode work, use it instead of uglifyjsplugin\r\nconst TerserPlugin = require('terser-webpack-plugin'); //\r\n\r\nmoudle.exports = () =\u003e {\r\n  return({\r\n    module: {\r\n\r\n      rules: [\r\n        {// to exclude source map error from third part libraires.\r\n          test: /\\.(js|jsx)$/,\r\n          exclude: /node_modules/,\r\n          use: [\"source-map-loader\"],\r\n          enforce: \"pre\",\r\n        },\r\n      ],\r\n\r\n\r\n      node: {\r\n        fs: \"empty\",\r\n        tls: \"empty\",\r\n        net: \"empty\",\r\n        child_process: \"empty\",\r\n      },\r\n\r\n      optimization: {\r\n        minimizer: [new TerserPlugin()],\r\n      },\r\n\r\n      // To remove warning from 'jsdom' used inside react-easy-md\r\n      plugins: [\r\n        new FilterWarningsPlugin({\r\n          exclude: /Critical dependency: the request of a dependency is an expression/,\r\n        }),\r\n      ],\r\n\r\n    }\r\n  })\r\n}\r\n\r\n```\r\n\r\nIt is mainly to remove warnigns from the package written in TypeScript.\r\n\r\nYou won't need them if you use CRA.\r\n\r\n(This package upgraded dependencies from [react-marked-markdown] and one of new dependency use TypeScript and it makes dependency problems. So you have to enable it for your bundler.\r\n)\r\n\r\n## What is Next?\r\n\r\n1. Test\r\n2. Post\r\n\r\n## Read More\r\n\r\n1. [Steadylearner Blog Posts for .md file examples][blog]\r\n2. [React Easy Markdown Live example](https://www.steadylearner.com/markdown)\r\n\r\n## Substitute shortcuts for every .md files?\r\n\r\nRefer to [convertdir.js] and `$node convertdir.js \u003cwithshorcut\u003e \u003cwithoutit\u003e`.\r\n\r\nIt will substitute shorcuts and use whole link for your .md files.\r\n\r\n## Where to learn and use markdown?\r\n\r\n [Markdown-Tutorial]: https://www.markdowntutorial.com/\r\n\r\n 1. [Start with markdown][Markdown-Tutorial]\r\n 2. [Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)\r\n 3. [How to use markdown for Github page](https://help.github.com/articles/getting-started-with-writing-and-formatting-on-github/)\r\n 4. [Learn markdown in X Minutes](https://learnxinyminutes.com/docs/markdown)\r\n 5. [Steadylearner Markdown Live Editor][markdown]\r\n 6. [Markdown to html](https://markdowntohtml.com/)\r\n 7. [Markdown Interpreter](https://dillinger.io/)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Freact-easy-md","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsteadylearner%2Freact-easy-md","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsteadylearner%2Freact-easy-md/lists"}