{"id":14976549,"url":"https://github.com/ytkj/prism-loader","last_synced_at":"2025-10-27T20:32:07.417Z","repository":{"id":20771081,"uuid":"89236508","full_name":"ytkj/prism-loader","owner":"ytkj","description":"Prism.js loader for Webpack","archived":false,"fork":false,"pushed_at":"2023-01-06T02:15:22.000Z","size":675,"stargazers_count":3,"open_issues_count":27,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T08:56:48.159Z","etag":null,"topics":["prismjs","webpack-loader","webpack2","webpack3","webpack4"],"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/ytkj.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-04-24T12:16:36.000Z","updated_at":"2024-09-01T03:38:08.000Z","dependencies_parsed_at":"2023-01-13T21:08:38.067Z","dependency_job_id":null,"html_url":"https://github.com/ytkj/prism-loader","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ytkj%2Fprism-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ytkj%2Fprism-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ytkj%2Fprism-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ytkj%2Fprism-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ytkj","download_url":"https://codeload.github.com/ytkj/prism-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238553303,"owners_count":19491405,"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":["prismjs","webpack-loader","webpack2","webpack3","webpack4"],"created_at":"2024-09-24T13:54:03.396Z","updated_at":"2025-10-27T20:32:07.080Z","avatar_url":"https://github.com/ytkj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# prism-loader\n\nCode brush for [Prism.js](http://prismjs.com/) in build process, with Webpack \u003e= 2.\n\n## Example\n\n### Input\n\n```html\n\u003cpre\u003e\n    \u003ccode class=\"language-typescript\"\u003e\nlet a: number = 1;\n    \u003c/code\u003e\n\u003c/pre\u003e\n```\n\n### Output\n\n```html\n\u003cpre class=\"language-typescript\"\u003e\n    \u003ccode class=\"language-typescript\"\u003e\n\u003cspan class=\"token keyword\"\u003elet\u003c/span\u003e a\u003cspan class=\"token punctuation\"\u003e:\u003c/span\u003e \u003cspan class=\"token keyword\"\u003enumber\u003c/span\u003e \u003cspan class=\"token operator\"\u003e=\u003c/span\u003e \u003cspan class=\"token number\"\u003e1\u003c/span\u003e\u003cspan class=\"token punctuation\"\u003e;\u003c/span\u003e\n    \u003c/code\u003e\n\u003c/pre\u003e\n```\n\n## Features\n\n### Supported Languages\n\nAll the languages listed in [Prism.js Homepage](http://prismjs.com/#languages-list) are available.\nLanguage should be supecified in loader options.\n\n### Supported Plugins\n\nTwo plugins are available.\n\n- [Line Highlight](http://prismjs.com/plugins/line-highlight/)\n- [Line Numbers](http://prismjs.com/plugins/line-numbers/)\n\n## Install\n\n```bash\nnpm install -D prism-loader prismjs\n```\n\n## Usage\n\n1. Configuration for Webpack \u003e= 2\n```javascript\nmodule.exports = function(env) {\n    /* ... */\n    module: {\n        rules: [\n            {\n                test: /\\.html$/,\n                use: [\n                    /* ... */\n                    {\n                        loader: 'prism-loader',\n                        options: {/* */}\n                    }\n                    /* ... */\n                ]\n            }\n        ]\n    },\n    /* ... */\n}\n```\n2. Markup HTML Template file in the same manner as usual Prism.js usage.\n```HTML\n\u003ch1\u003eTypeScript Code Example\u003c/h1\u003e\n\u003cpre class=\"line-numbers\" data-line=\"1\"\u003e\n    \u003ccode class=\"language-typescript\"\u003e\nlet a: number = 1;\n    \u003c/code\u003e\n\u003c/pre\u003e\n```\n\n## API\n\n### `Options.languages`\n\n- Type: `Array\u003cstring\u003e`\n- Default: `[ 'markup', 'typescript', 'javascript', 'css', 'php', 'java']`\n\nSpecify language list you want to highlight.\nAvailable strings are listed in [Prism.js Homepage](http://prismjs.com/#languages-list).\n\n### `Options.fontSize`\n\n- Type: `number`\n- Default: `16`\n\nSpecify CSS `font-size` property.\nThis value is set to inline style of `\u003cpre\u003e` element,\nand 1.5 times value is used to calculate position-top of line highlight block, if line-highlight plugin is enabled.\n\nThis value should be **even number**.\n[see here](https://github.com/PrismJS/prism/blob/v1.6.0/plugins/line-highlight/prism-line-highlight.js#L16).\n\n### `Options.cheerioOptions`\n\n- Type: `Object`\n- Default: `{decodeEntities: false}`\n\nSpecify options for `cheerio`. For full list of options, [see here](https://github.com/cheeriojs/cheerio#loading).\n\n## Note\n\nThis loader only prvide code-highlighting, but CSS style.\nYou must load Prism.js CSS file in some way.\n\n### Example\n\n\na. Using `link` tag\n```HTML\n\u003clink rel=\"stylesheet\" href=\"node_modules/prismjs/themes/prism-coy.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css\"\u003e\n```\nb. Usin CSS module (with css-loader and style-loader)\n```javascript\nimport 'prismjs/themes/prism-coy.css';\nimport 'prismjs/plugins/line-numbers/prism-line-numbers.css';\nimport 'prismjs/plugins/line-highlight/prism-line-highlight.css';\n```\n\n## Setup for Developers\n\n1. Clone repository\n    1. `git clone https://github.com/ytkj/prism-loader.git`\n    2. `cd prism-loader`\n    3. `npm install`\n2. Run unit-test\n    1. `npm test`\n3. Run e2e-test\n    1. `cd test/webpack`\n    2. `npm install`\n    3. `npm test`\n    4. Open http://localhost:3030/test01.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fytkj%2Fprism-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fytkj%2Fprism-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fytkj%2Fprism-loader/lists"}