{"id":17036020,"url":"https://github.com/phucbm/gfm","last_synced_at":"2026-04-11T08:04:01.507Z","repository":{"id":198933482,"uuid":"701684799","full_name":"phucbm/gfm","owner":"phucbm","description":"Turn markdown text into GitHub Flavoured Markdown with light/dark code syntax highlight.","archived":false,"fork":false,"pushed_at":"2023-10-18T03:48:45.000Z","size":2154,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-27T04:46:50.878Z","etag":null,"topics":["gfm","html","markdown","mdast"],"latest_commit_sha":null,"homepage":"https://phucbm.github.io/gfm/","language":"JavaScript","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/phucbm.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-10-07T09:06:52.000Z","updated_at":"2025-03-20T11:02:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"67b9f5c1-d823-46f8-88a2-8b4c7e29972d","html_url":"https://github.com/phucbm/gfm","commit_stats":null,"previous_names":["phucbm/gfm"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/phucbm/gfm","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fgfm","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fgfm/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fgfm/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fgfm/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phucbm","download_url":"https://codeload.github.com/phucbm/gfm/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phucbm%2Fgfm/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31673068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["gfm","html","markdown","mdast"],"created_at":"2024-10-14T08:48:57.479Z","updated_at":"2026-04-11T08:04:01.486Z","avatar_url":"https://github.com/phucbm.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @phucbm/gfm\n\n[![pages-build-deployment](https://github.com/phucbm/gfm/actions/workflows/pages/pages-build-deployment/badge.svg?branch=gh-pages)](https://github.com/phucbm/gfm/actions/workflows/pages/pages-build-deployment)\n[![release](https://badgen.net/github/release/phucbm/gfm/)](https://github.com/phucbm/gfm/releases/latest)\n[![npm](https://badgen.net/npm/v/@phucbm/gfm)](https://www.npmjs.com/package/@phucbm/gfm)\n[![license](https://badgen.net/github/license/phucbm/gfm/)](https://github.com/phucbm/gfm/blob/main/LICENSE)\n\n\u003e Turn Markdown text into [GitHub Flavored Markdown](https://github.github.com/gfm/) (GFM) with light/dark code syntax\n\u003e highlight.\n\n## What is this?\n\nEver want to just write Markdown for your app, then make it to HTML with the styling from GitHub, along with code syntax\nhighlight? This project was made for you.\n\n- Markdown to HTML using [`markdown-loader`](https://www.npmjs.com/package/markdown-loader) (webpack)\n- Light/dark GFM styling\n  from [sindresorhus/generate-github-markdown-css](https://github.com/sindresorhus/generate-github-markdown-css)\n- Code syntax highlight using [`starry-night`](https://github.com/wooorm/starry-night)\n\n## Install\n\nInstall with [npm](https://docs.npmjs.com/cli/install):\n\n```shell\nnpm i @phucbm/gfm\n\n# webpack loader for markdown\nnpm i markdown-loader\n\n# styling for GFM\nnpm i github-markdown-css\n```\n\n## Use\n\n### Convert Markdown format using `markdown-loader` by [`markedjs`](https://marked.js.org/)\n\nSay our document `example.md` contains:\n\n\u003cdetails\u003e\u003csummary\u003eView example.md\u003c/summary\u003e\n\n```markdown\n# GFM\n\n## Autolink literals\n\nwww.example.com, https://example.com, and contact@example.com.\n\n## Footnote\n\nA note[^1]\n\n[^1]: Big note.\n\n## Strikethrough\n\n~one~ or ~~two~~ tildes.\n\n## Table\n\n| a | b | c | d |\n| - | :- | -: | :-: |\n\n## Tasklist\n\n* [ ] to do\n* [x] done\n```\n\n\u003c/details\u003e \n\nTo be able to read the `.md` file format, add [`markdown-loader`](https://www.npmjs.com/package/markdown-loader) to\nyour `webpack.config.js`\n\n```javascript\n// webpack.config.js\nexport default {\n    module: {\n        rules: [\n            // Markdown\n            {\n                test: /\\.md$/,\n                use: [\n                    {\n                        loader: \"html-loader\",\n                    },\n                    {\n                        loader: \"markdown-loader\",\n                        options: {\n                            // Pass options to marked\n                            // See https://marked.js.org/using_advanced#options\n                        },\n                    },\n                ],\n            },\n        ],\n    },\n};\n```\n\n…and our module `example.js` looks as follows:\n\n```js\nimport markdownText from \"./example.md\";\nimport 'github-markdown-css/github-markdown.css';\n\n// the Markdown text will be converted to HTML text using \"markdown-loader\"\nconsole.log(markdownText);\n\nconst content = document.querySelector('#content');\n\n// insert the HTML text to the DOM\ncontent.insertAdjacentHTML('beforeend', markdownText);\n```\n\n...with the `index.html` as below\n\n\u003cdetails\u003e\u003csummary\u003eView index.html\u003c/summary\u003e\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003e@phucbm/gfm\u003c/title\u003e\n    \u003cstyle\u003e\n        body {box-sizing:border-box; margin:0;}\n        .container {\n            min-width:300px;\n            max-width:980px;\n            margin-left:auto;\n            margin-right:auto;\n            padding:45px;\n        }\n\n        @media (max-width:767px) {\n            .container {\n                padding:15px;\n            }\n        }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody class=\"markdown-body\"\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003cdiv id=\"content\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003c/details\u003e\n\nSee [how it looks like](https://phucbm.github.io/gfm/).\n\n### Code highlight\n\nYour Markdown code block must have a language identifier like in the `example.md`, then run `highlightCodeSyntax()` only\nwhen the HTML has loaded.\n\n```javascript\nimport {highlightCodeSyntax} from \"@phucbm/gfm\";\n\n// insert HTML\n\n// code highlight (only run once the HTML as loaded)\nhighlightCodeSyntax().then();\n```\n\n\u003e **Info**\n\u003e Check the folder `example` for demo files.\n\n## API\n\n### `highlightCodeSyntax(codeBlocks)`\n\nLoop through all `\u003ccode\u003e` in the DOM and replace with highlighted code syntax.\n\n###### Parameters\n\n- `codeBlocks` - HTMLElement, optional.\n\n###### Return\n\n`{Promise\u003cHTMLElement[]\u003e}`\n\n## Development\n\nClone this repo, then:\n\n```shell\n# install\nnpm i\n\n# run dev server\nnpm run dev\n```\n\n## License\n\nMIT © [Phuc Bui](https://github.com/phucbm)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fgfm","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphucbm%2Fgfm","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphucbm%2Fgfm/lists"}