{"id":10575,"date":"2024-03-03T10:30:00","date_gmt":"2024-03-03T10:30:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10575"},"modified":"2024-03-04T08:30:43","modified_gmt":"2024-03-04T03:30:43","slug":"live-markdown-editor-with-preview-using-codemirror-js","status":"publish","type":"post","link":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/","title":{"rendered":"Live Markdown Editor With Preview Using Codemirror JS"},"content":{"rendered":"

This code creates a live Markdown editor with a preview using Codemirror JS. It allows you to write Markdown in one textarea, see the HTML output in another, and preview the rendered content in an iframe. The major functionality includes real-time Markdown-to-HTML conversion, live preview updates, and syntax highlighting. This tool is helpful for users who want to write and visualize Markdown content simultaneously, ensuring a seamless editing experience.<\/p>\n

How to Create Live Markdown Editor With Preview Using Codemirror Js<\/h2>\n

1. First of all, load the following assets into the head tag of your HTML document.<\/p>\n

<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.26.0\/codemirror.css'>\r\n<link rel='stylesheet' href='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.26.0\/theme\/material.css'><\/pre>\n
2. Copy the following HTML structure. It consists of three sections: the Markdown input textarea, the HTML output textarea, and a preview iframe. Make sure to include the required classes for styling.<\/p>\n
<div class=\"grid\">\r\n\r\n  <div class=\"grid__row\">\r\n\r\n    <div class=\"grid__col grid__col--4\">\r\n      <textarea class=\"js-input\"># An exhibit of Markdown\r\n\r\nThis note demonstrates some of what [Markdown][1] is capable of doing.\r\n\r\n*Note: Feel free to play with this page. Unlike regular notes, this doesn't automatically save itself.*\r\n\r\n## Basic formatting\r\n\r\nParagraphs can be written like so. A paragraph is the basic block of Markdown. A paragraph is what text will turn into when there is no reason it should become anything else.\r\n\r\nParagraphs must be separated by a blank line. Basic formatting of *italics* and **bold** is supported. This *can be **nested** like* so.\r\n\r\n## Lists\r\n\r\n### Ordered list\r\n\r\n1. Item 1\r\n2. A second item\r\n3. Number 3\r\n4. \u2163\r\n\r\n*Note: the fourth item uses the Unicode character for [Roman numeral four][2].*\r\n\r\n### Unordered list\r\n\r\n* An item\r\n* Another item\r\n* Yet another item\r\n* And there's more...\r\n\r\n## Paragraph modifiers\r\n\r\n### Code block\r\n\r\n    Code blocks are very useful for developers and other people who look at code or other things that are written in plain text. As you can see, it uses a fixed-width font.\r\n\r\nYou can also make `inline code` to add code into other things.\r\n\r\n### Quote\r\n\r\n> Here is a quote. What this is should be self explanatory. Quotes are automatically indented when they are used.\r\n\r\n## Headings\r\n\r\nThere are six levels of headings. They correspond with the six levels of HTML headings. You've probably noticed them already in the page. Each level down uses one more hash character.\r\n\r\n### Headings *can* also contain **formatting**\r\n\r\n### They can even contain `inline code`\r\n\r\nOf course, demonstrating what headings look like messes up the structure of the page.\r\n\r\nI don't recommend using more than three or four levels of headings here, because, when you're smallest heading isn't too small, and you're largest heading isn't too big, and you want each size up to look noticeably larger and more important, there there are only so many sizes that you can use.\r\n\r\n## URLs\r\n\r\nURLs can be made in a handful of ways:\r\n\r\n* A named link to [MarkItDown][3]. The easiest way to do these is to select what you want to make a link and hit `Ctrl+L`.\r\n* Another named link to [MarkItDown](http:\/\/www.markitdown.net\/)\r\n* Sometimes you just want a URL like http:\/\/www.markitdown.net\/.\r\n\r\n## Horizontal rule\r\n\r\nA horizontal rule is a line that goes across the middle of the page.\r\n\r\n---\r\n\r\nIt's sometimes handy for breaking things up.\r\n\r\n## Images\r\n\r\nMarkdown can also contain images. I'll need to add something here sometime.\r\n\r\n## Finally\r\n\r\nThere's actually a lot more to Markdown than this. See the official [introduction][4] and [syntax][5] for more information. However, be aware that this is not using the official implementation, and this might work subtly differently in some of the little things.\r\n\r\n\r\n  [1]: http:\/\/daringfireball.net\/projects\/markdown\/\r\n  [2]: http:\/\/www.fileformat.info\/info\/unicode\/char\/2163\/index.htm\r\n  [3]: http:\/\/www.markitdown.net\/\r\n  [4]: http:\/\/daringfireball.net\/projects\/markdown\/basics\r\n  [5]: http:\/\/daringfireball.net\/projects\/markdown\/syntax\r\n<\/textarea>\r\n    <\/div>\r\n\r\n    <div class=\"grid__col grid__col--4\">\r\n      <textarea class=\"js-output\"><\/textarea>\r\n    <\/div>\r\n    <div class=\"grid__col grid__col--4\">\r\n      <iframe class=\"js-preview\"><\/iframe>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n<\/div>\r\n<\/pre>\n
3. Copy the CSS styles provided to ensure proper layout and styling of the editor. The styles include grid layout, CodeMirror configuration, and other essential design elements.<\/p>\n
\/* helpers\/grid.css *\/\r\n\r\n.grid {\r\n  width: 100%;\r\n}\r\n\r\n.grid__row {\r\n  display: -webkit-box;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n}\r\n\r\n.grid__col {\r\n  -webkit-box-flex: 1;\r\n      -ms-flex-positive: 1;\r\n          flex-grow: 1;\r\n}\r\n\r\n.grid__col--4 {\r\n  width: calc(100% \/ 3);\r\n}\r\n\r\n\/* layout\/base.css *\/\r\n\r\n* {\r\n  -webkit-box-sizing: inherit;\r\n          box-sizing: inherit;\r\n}\r\n\r\nhtml {\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n  height: 100%;\r\n}\r\n\r\nbody {\r\n  font-family: sans-serif;\r\n  line-height: 1.5;\r\n  margin: 0;\r\n  min-height: 100%;\r\n}\r\n\r\n\/* modules\/code.css *\/\r\n\r\n.pre {\r\n  height: 100vh;\r\n}\r\n\r\n\/* modules\/embed.css *\/\r\n\r\niframe {\r\n  border: 0;\r\n  height: 100%;\r\n  width: 100%;\r\n}\r\n\r\n\/* modules\/form.css *\/\r\n\r\ntextarea {\r\n  background: none;\r\n  border: 0;\r\n  height: 100vh;\r\n  margin: 0;\r\n  padding: 0.5em;\r\n  width: 100%;\r\n}\r\n\r\n\/* vendor\/codemirror.css *\/\r\n\r\n.CodeMirror {\r\n  height: 100vh;\r\n}\r\n\r\n.CodeMirror-readonly .CodeMirror-cursor {\r\n  display: none;\r\n}<\/pre>\n
4. Load the codemirror.js<\/a>, xml.js,\u00a0 matchbrackets.js<\/a>, matchbrackets.js<\/a>, and marked.js following scripts before closing the body tag:<\/p>\n
<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.26.0\/codemirror.js'><\/script>\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.26.0\/mode\/xml\/xml.js'><\/script>\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.26.0\/addon\/edit\/matchbrackets.js'><\/script>\r\n<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/marked\/0.3.6\/marked.js'><\/script>\r\n<\/pre>\n
5. Finally, copy the JavaScript code into your project. This code initializes CodeMirror instances for the input and output textareas, configures them for Markdown and HTML modes, and sets up the live preview in the iframe.<\/p>\n
\/\/ import 'CodeMirror\/mode\/xml\/xml';\r\n\/\/ import 'CodeMirror\/addon\/edit\/matchbrackets';\r\n\/\/ import CodeMirror from 'CodeMirror';\r\n\/\/ import marked     from 'marked';\r\n\r\nclass App {\r\n  constructor(options) {\r\n    this.init();\r\n    this.addEventListeners();\r\n  }\r\n\r\n  init() {\r\n    const input = this.input = CodeMirror.fromTextArea(\r\n    document.querySelector(\".js-input\"),\r\n    {\r\n      lineNumbers: true,\r\n      matchBrackets: true,\r\n      mode: \"text\/x-markdown\",\r\n      theme: \"material\" });\r\n\r\n\r\n\r\n    const output = this.output = CodeMirror.fromTextArea(\r\n    document.querySelector(\".js-output\"),\r\n    {\r\n      lineNumbers: true,\r\n      matchBrackets: true,\r\n      mode: \"text\/html\",\r\n      theme: \"material\",\r\n      readOnly: true });\r\n\r\n\r\n\r\n    this.preview = document.querySelector(\".js-preview\");\r\n\r\n    output.getWrapperElement().classList.add(\"CodeMirror-readonly\");\r\n\r\n    this.compile(input.getValue());\r\n  }\r\n\r\n  compile(source) {\r\n    const previewDocument = this.preview.contentDocument;\r\n    const output = marked(source);\r\n\r\n    previewDocument.open();\r\n    previewDocument.write(output);\r\n    previewDocument.close();\r\n\r\n    this.output.setValue(output);\r\n  }\r\n\r\n  addEventListeners() {\r\n    const { input } = this;\r\n    let delay;\r\n\r\n    input.on(\"change\", () => {\r\n      clearTimeout(delay);\r\n      delay = setTimeout(() => this.compile(input.getValue()), 300);\r\n    });\r\n  }}\r\n\r\n\r\nnew App();<\/pre>\n
That’s all! hopefully, you have successfully created Live Markdown Editor With Preview on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a live Markdown editor with a preview using Codemirror JS. It allows you to write Markdown in…<\/p>\n","protected":false},"author":1,"featured_media":10582,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[97],"tags":[],"class_list":["post-10575","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-text-input"],"acf":[],"yoast_head":"\nLive Markdown Editor With Preview Using Codemirror JS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Live Markdown Editor With Preview Using Codemirror JS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Live Markdown Editor With Preview Using Codemirror JS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Live Markdown Editor With Preview Using Codemirror JS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-03T10:30:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-04T03:30:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Live Markdown Editor With Preview Using Codemirror JS\",\"datePublished\":\"2024-03-03T10:30:00+00:00\",\"dateModified\":\"2024-03-04T03:30:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/\"},\"wordCount\":243,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png\",\"articleSection\":[\"Text & Input\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/\",\"url\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/\",\"name\":\"Live Markdown Editor With Preview Using Codemirror JS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png\",\"datePublished\":\"2024-03-03T10:30:00+00:00\",\"dateModified\":\"2024-03-04T03:30:43+00:00\",\"description\":\"Here is a free code snippet to create a Live Markdown Editor With Preview Using Codemirror JS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png\",\"width\":1280,\"height\":960,\"caption\":\"Live Markdown Editor With Preview Using Codemirror JS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Text & Input\",\"item\":\"https:\/\/codehim.com\/category\/text-input\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Live Markdown Editor With Preview Using Codemirror JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Live Markdown Editor With Preview Using Codemirror JS — CodeHim","description":"Here is a free code snippet to create a Live Markdown Editor With Preview Using Codemirror JS. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/","og_locale":"en_US","og_type":"article","og_title":"Live Markdown Editor With Preview Using Codemirror JS — CodeHim","og_description":"Here is a free code snippet to create a Live Markdown Editor With Preview Using Codemirror JS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-03T10:30:00+00:00","article_modified_time":"2024-03-04T03:30:43+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Live Markdown Editor With Preview Using Codemirror JS","datePublished":"2024-03-03T10:30:00+00:00","dateModified":"2024-03-04T03:30:43+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/"},"wordCount":243,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png","articleSection":["Text & Input"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/","url":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/","name":"Live Markdown Editor With Preview Using Codemirror JS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png","datePublished":"2024-03-03T10:30:00+00:00","dateModified":"2024-03-04T03:30:43+00:00","description":"Here is a free code snippet to create a Live Markdown Editor With Preview Using Codemirror JS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Live-Markdown-Editor-With-Preview-Using-Codemirror-JS.png","width":1280,"height":960,"caption":"Live Markdown Editor With Preview Using Codemirror JS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/text-input\/live-markdown-editor-with-preview-using-codemirror-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Text & Input","item":"https:\/\/codehim.com\/category\/text-input\/"},{"@type":"ListItem","position":3,"name":"Live Markdown Editor With Preview Using Codemirror JS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1274,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10575"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10575\/revisions"}],"predecessor-version":[{"id":11276,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10575\/revisions\/11276"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10582"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10575"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10575"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}