{"id":15696011,"url":"https://github.com/varlinor/magic-md2html","last_synced_at":"2026-05-13T23:36:06.429Z","repository":{"id":82349087,"uuid":"140851397","full_name":"varlinor/magic-md2html","owner":"varlinor","description":"a plugin for generate html from your own template","archived":false,"fork":false,"pushed_at":"2020-06-09T10:02:45.000Z","size":42,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T22:37:48.260Z","etag":null,"topics":["gulp-plugin","markdown","marked","md","md2html","transformer"],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/varlinor.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":"RoadMap.md","authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-13T13:38:07.000Z","updated_at":"2020-06-09T10:02:47.000Z","dependencies_parsed_at":"2023-06-19T03:55:16.635Z","dependency_job_id":null,"html_url":"https://github.com/varlinor/magic-md2html","commit_stats":{"total_commits":8,"total_committers":3,"mean_commits":"2.6666666666666665","dds":0.25,"last_synced_commit":"2ae3f0617712b83267d2409a26fb49e1d86e00f8"},"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varlinor%2Fmagic-md2html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varlinor%2Fmagic-md2html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varlinor%2Fmagic-md2html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varlinor%2Fmagic-md2html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/varlinor","download_url":"https://codeload.github.com/varlinor/magic-md2html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246321794,"owners_count":20758696,"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":["gulp-plugin","markdown","marked","md","md2html","transformer"],"created_at":"2024-10-03T19:06:30.382Z","updated_at":"2025-10-14T03:59:06.852Z","avatar_url":"https://github.com/varlinor.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# magic-md2html\n\n\u003esomething you want to know quickly:\n\u003e\u003e[5 minutes user guide](https://github.com/varlinor/magic-md2html/wiki/5-minutes-User-guide)  \n\u003e\u003e[ChangeLog](https://github.com/varlinor/magic-md2html/wiki/Change-Log)  \n\u003e\u003emagic-md2html default stylesheets [refer to](https://github.com/varlinor/magic-style)  \n\nBased on [marked](https://www.npmjs.com/package/marked);\n\nUse marked.Renderer to control html class\n\nThis tool is used to batch generate html whit your custom html template!\n\nfirstly, you need a html template, just like this:\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n{{meta}}\n{{cssHref}}\n    \u003ctitle\u003e{{title}}\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv\u003e{{content}}\u003c/div\u003e\n{{footer}}\n{{extraScript}}\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nsecondly, write extra content file, just like metaInfo, footer, extraScript, style files, etc. you can find\nexamples in directory `test/attachfiles`.\n\nfinally, prepare some markdown files, set configuration and run gulp task!\nThen you can obtain your html file in dist directory!\n\n## Custom extends for markdown\n\nfor test, perhaps simple to study other tools in npm registry, I add two kinds of extend in md file.\n1. ToC tag\n2. label tag\n\nyou can use them as simple as possible, just like this:\n* add `\u003cToC\u003e` tag in your md file, then this tool will auto create ToC at where you marked the tag.\n* add `\u003ctag label=\"test,测试,md,magicMd2Html,parser\"\u003e` tag in your md file, then this tool will auto create labels with `\u003cul\u003e` at where you marked the tag.\n\nof course, you need your own style file to control how ToC and labels display.\n\n\u003efor example, I write some css for them, you can add see them at `test.html` ( refer to `test/base.css`),\n\u003eit contains full css for content from md file.\n\u003e\u003ePS: the stylesheets in test.html \u003e\u003e [magic-style](https://github.com/varlinor/magic-style)\n\n## html template fields\n\n`{{meta}}` means where to replaced meta info in html, used to SEO information.\n\n`{{author}}` inner setting, you can see it in `index.js`, used to replaced with md file author.\nit will be allowed to get real author in md file if you announced in file, the feature will release on next version.\n\n`{{description}}` inner setting, you can see it in `index.js`, same with field `author`, used to replaced with description in md file.\n\n`{{cssHref}}` used to replaced attached file which contains css link info, just like `\u003clink rel=\"stylesheet\" href=\"some css file url\"/\u003e`\n\n`{{title}}` used to replaced with html title when transform md file.\n\n`{{content}}` used to replaced html tags which transformed by `marked` that the content in md file.\n\n`{{extraScript}}` used to add some common script to html file, this field will be replaced with content in pointed extra file, refer to configuration: `extraScriptPath`\n\n`{{footer}}` used to add some common footer, just like statistics script, common info, links to business partner, etc.\nAlso, this field will be replaced with content in pointed extra file, refer to configuration: `footerPath`\n\n\n## Configuration\n\n    debugMode:false,\n    buildTemplate: false, \n    enableToC:false,\n    templatePath:'',\n    cssFilePath:'',\n    extraScriptPath:'',\n    footerPath:'',\n    metaInfo:{\n        author:'',\n        copyright:''\n    }\n    markedOptions:{},\n\n### debugMode\n\nbool, default is false, to control whether output debug info in console.\n\n### buildTemplate\n\nbool, default is false, to control whether pre build html template or not!\nif set `false`, your html template must has no these fields:\n\n* {{cssHref}}\n* {{footer}}\n* {{extraScript}}\n\nwhether buildTemplate exist or not, the field `{{content}}` is required for replaced with md content.\n\n### enableToC\n\nbool, default is false, to control whether generate ToC tags from `\u003ch1\u003e`,`\u003ch2\u003e`,`\u003ch3\u003e` or not.\n\n### templatePath\n\nstring, this field is required in options, if you hasn't set `buildTemplate:true`,\nthis field must point the path of html template with limited template fields;\n\n\u003efor example, in dir `test`, if I set `buildTemplate:true`,\n\u003ethe field `templatePath` must be filled with `./test/index.template.html`.\n\u003eIf I set `buildTemplate:false`, the field `templatePath` should be pointed at path of `./test/template.html`.\n\n### cssFilePath\n\nstring, if you set `buildTemplate:true`,\nyou can point the file which contains the stylesheet fragment what will be replaced with `{{cssHref}}` in html template.\nJust like `\u003clink rel=\"stylesheet\" href=\"\"/\u003e` or `\u003cstyle\u003e\u003c/style\u003e`.\n\n### extraScriptPath\n\nstring, if you set `buildTemplate:true`,\nyou can point the file which contains the extra script fragment file what will be replaced with `{{extraScript}}` in html template.\n\n### footerPath\n\nstring, if you set `buildTemplate:true`,\nyou can point the file which contains the extra footer html fragment what will be replaced with `{{footer}}` in html template.\n\n### metaInfo\n\nobject, contains two field: `author` and `copyright`, if all md files are from same author,\nyou can set author here globally.\n\n* `author` will be replaced in meta tag like `\u003cmeta name=\"author\" content=\"varlinor\" /\u003e`\n* `copyright` will be formatted in meta tag like `\u003cmeta name=\"copyright\" content=\"varlinor © \" /\u003e`\n\n\u003ePS: if pointed author in md file, this global setting will be covered, perhaps next version will add this feature.\n\n### markedOptions\n\nobject, this object represent `marked` [options](https://marked.js.org/#/USING_ADVANCED.md#options),\nso we can set `markedOptions.renderer` to customize your own style for all these elements below:\n```\nBlock level renderer methods\n- code(*string* code, *string* language)\n- blockquote(*string* quote)\n- html(*string* html)\n- heading(*string* text, *number*  level)\n- hr()\n- list(*string* body, *boolean* ordered)\n- listitem(*string*  text)\n- paragraph(*string* text)\n- table(*string* header, *string* body)\n- tablerow(*string* content)\n- tablecell(*string* content, *object* flags)\n\n`flags` has the following properties:\n{\n    header: true || false,\n    align: 'center' || 'left' || 'right'\n}\n\nInline level renderer methods\n- strong(*string* text)\n- em(*string* text)\n- codespan(*string* code)\n- br()\n- del(*string* text)\n- link(*string* href, *string* title, *string* text)\n- image(*string* href, *string* title, *string* text)\n- text(*string* text)\n```\n\n## Some Ideas\n\nOriginally, I think perhaps I should set css class as variables in this configuration, just like format below:\n```\noptions={\n    ...\n    tagClassDef:{\n        blockquoteClass:'',\n        hrClasss:'',\n        olClass:'',\n        ulClass:'',\n        pClass:'',\n        tableClass:'',\n        strongClass:'',\n        aClass:'',\n        emClass:'',\n        spanClass:'',\n        imgClass:'',\n        delClass:'',\n    }\n}\n```\n\nbut, I think that's so stupid to do this.\nEveryone can set their own styles, why should I limited the html format which transformed by `marked`.\n\n## To User\n\nThis tool may not be so perfect to generate such a beautiful html pages, it comes from an idea by suddenly,\nit is simple, but just matches my requirement. if you have some ideas for it, please let me know, thank you!\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarlinor%2Fmagic-md2html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvarlinor%2Fmagic-md2html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarlinor%2Fmagic-md2html/lists"}