{"id":16922138,"url":"https://github.com/ryanflorence/render-markdown-javascript","last_synced_at":"2025-04-06T07:13:16.411Z","repository":{"id":24771896,"uuid":"102409312","full_name":"ryanflorence/render-markdown-javascript","owner":"ryanflorence","description":"Renders markdown files to HTML with highlighted code blocks BUT ALSO RENDERS THE JAVASCRIPT ONES.","archived":false,"fork":false,"pushed_at":"2022-01-12T22:46:21.000Z","size":677,"stargazers_count":442,"open_issues_count":6,"forks_count":66,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-30T06:05:55.357Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryanflorence.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-04T22:57:00.000Z","updated_at":"2025-03-25T10:25:47.000Z","dependencies_parsed_at":"2022-08-07T11:01:20.949Z","dependency_job_id":null,"html_url":"https://github.com/ryanflorence/render-markdown-javascript","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/ryanflorence%2Frender-markdown-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanflorence%2Frender-markdown-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanflorence%2Frender-markdown-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryanflorence%2Frender-markdown-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryanflorence","download_url":"https://codeload.github.com/ryanflorence/render-markdown-javascript/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445671,"owners_count":20939958,"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-10-13T19:54:17.639Z","updated_at":"2025-04-06T07:13:16.392Z","avatar_url":"https://github.com/ryanflorence.png","language":"JavaScript","readme":"Render Markdown JavaScript\n==========================\n\nRenders markdown files to HTML with highlighted code blocks BUT ALSO RENDERS THE JAVASCRIPT ONES.\n\n![screenshot](./screenshot.png)\n\nWhy?\n---\n\nI've got a bunch of little JavaScript UI libs that don't need much more than a README.md for documentation, but a demo is worth a thousand README.md's, so I'd like the code in the README.md to actually render in a browser. Also great so people can copy/paste from the docs and *know* that it runs.\n\nHow?\n----\n\nWrite normal markdown but for code fence blocks you want to have render in the browser also, use the \"render\" or \"render-babel\" language. Github markdown hates code fenced blocks inside of code fenced blocks, so I don't have an example here, look at the [demo.md](https://raw.githubusercontent.com/ryanflorence/render-markdown-javascript/master/demo.md)\n\nHow do I get JavaScript and CSS onto the page?\n----------------------------------------------\n\nWith `\u003cscript\u003e`, `\u003clink\u003e`, and `\u003cstyle\u003e` of course.\n\n```markdown\n\u003cscript src=\"https://unpkg.com/react@15.6.1/dist/react.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/react-dom@15.6.1/dist/react-dom.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/purecss@1.0.0/build/pure-min.css\"/\u003e\n\u003cstyle\u003ebody { color: red }\u003c/style\u003e\n\n# Then markdown as usual...\n```\n\nYou can place your scripts at the bottom of the markdown file to prevent blocking your content from rendering, all scripts are run after `DOMContentLoaded`.\n\nAlso check out the [demo.md](https://raw.githubusercontent.com/ryanflorence/render-markdown-javascript/master/demo.md) file from the screenshot.\n\nDoes it babel?\n--------------\n\nYes, first include babel standalone at the top of your markdown file and then use the `render-babel` language instead of `render`. Again, github hates code fence blocks inside code fence blocks here so I can't really show you in this README. Check out the [demo](https://raw.githubusercontent.com/ryanflorence/render-markdown-javascript/master/demo.md)\n\nHow Do I Attach Stuff to the DOM?\n---------------------------------\n\nThere will be a variable called `DOM_NODE` available to use, its the node for just that script.\n\n\nCLI Usage\n---------\n\n```sh\nnpm install render-markdown-js\nrender-markdown-js ./some-file.md \u003e output.html\n```\n\nNode API Usage\n--------------\n\n```js\nconst rmj = require('render-markdown-js')\nconst html = rmj('#string of markdown')\n```\n\nOptions\n-------\n\nThere are none. Copy, paste, tweak.\n\nEnjoy!\n------\n\nPlease enjoy!\n","funding_links":[],"categories":["Markdown"],"sub_categories":["React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanflorence%2Frender-markdown-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryanflorence%2Frender-markdown-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryanflorence%2Frender-markdown-javascript/lists"}