{"id":41506149,"url":"https://github.com/ichsanputr/vue-code-highlighter","last_synced_at":"2026-01-23T19:34:06.244Z","repository":{"id":225472883,"uuid":"766098759","full_name":"ichsanputr/vue-code-highlighter","owner":"ichsanputr","description":"Vue component for highlighting code or syntax with modern style, copy functionality, multicode and powered by Highlight.js","archived":false,"fork":false,"pushed_at":"2025-03-03T02:39:26.000Z","size":694,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-19T08:30:02.282Z","etag":null,"topics":["code-highlighter","vue","vue-syntax-highlighter"],"latest_commit_sha":null,"homepage":"https://ichsanputr.github.io/vue-code-highlighter","language":"Vue","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/ichsanputr.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-03-02T10:36:02.000Z","updated_at":"2025-06-12T01:47:22.000Z","dependencies_parsed_at":"2024-03-02T10:45:17.898Z","dependency_job_id":"559d1600-c784-46af-9a5a-1eaecb14f479","html_url":"https://github.com/ichsanputr/vue-code-highlighter","commit_stats":null,"previous_names":["ichsanputr/vue-code-highlighter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ichsanputr/vue-code-highlighter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ichsanputr%2Fvue-code-highlighter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ichsanputr%2Fvue-code-highlighter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ichsanputr%2Fvue-code-highlighter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ichsanputr%2Fvue-code-highlighter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ichsanputr","download_url":"https://codeload.github.com/ichsanputr/vue-code-highlighter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ichsanputr%2Fvue-code-highlighter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28698896,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T17:25:48.045Z","status":"ssl_error","status_checked_at":"2026-01-23T17:25:47.153Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["code-highlighter","vue","vue-syntax-highlighter"],"created_at":"2026-01-23T19:34:06.182Z","updated_at":"2026-01-23T19:34:06.236Z","avatar_url":"https://github.com/ichsanputr.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue Code Highlighter\n\u003cp align=\"left\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/vue-code-highlighter\"\u003e\u003cimg\n          src=\"https://img.shields.io/bundlephobia/minzip/vue-code-highlighter\" /\u003e \u003c/a\u003e\n      \u003ca class=\"mx-2\" href=\"https://www.npmjs.com/package/vue-code-highlighter\"\u003e\u003cimg\n          src=\"https://img.shields.io/npm/dt/vue-code-highlighter.svg\" alt=\"NPM Downloads\"\u003e\u003c/a\u003e\n      \u003ca href=\"http://opensource.org/licenses/MIT\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue.svg\"\n          alt=\"License\"\u003e\u003c/a\u003e\n  \n\u003c/p\u003e\n\nVue component for highlighting code or syntax with modern style, copy functionality, multicode and powered by Highlight.js\n\u003cp align=\"center\" width=\"100%\"\u003e\n    \u003cimg width=\"80%\" src=\"https://i.ibb.co/2MgrHV0/image.png\"\u003e \n\u003c/p\u003e\n\n## Installation\n\n```bash\nnpm install vue-code-highlighter highlight.js\n\n// or use yarn\nyarn add vue-code-highlighter highlight.js\n```\n\n## Usage\n\n### Importing\n\nThis package support either composition and options api with typescript or javascript.\n\n```ts\nimport { VueCodeHighlighter, VueCodeHighlighterMulti } from 'vue-code-highlighter';\nimport 'vue-code-highlighter/dist/style.css'\n```\n\nThis package does not need to call CSS from the highlight.js package because I have already wrapped it. What you need to do is install the highlight.js package.\n### Example \u0026 Demo\n\nExample code and demo available in \u003ca href=\"https://ichsanputr.github.io/vue-code-highlighter\"\u003eichsanputr.github.io/vue-code-highlighter\u003c/a\u003e\n\n\n## Props\n\nThere are 2 types of components, namely VueCodeHighlighter and VueCodeHighlighterMulti, both of them have different props.\n\n\u003cb\u003eVueCodeHighlighter\u003c/b\u003e\n\n| Attribute    |   Type   |    Is Required     | Description                                                                   |\n|:-------------|:--------:|:------------------:|:------------------------------------------------------------------------------|\n| lang         |  String  |       true         | Code language from Highlighter cheatset, see [Supported language](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) |\n| code         |  String  |       true         | Plain code which will be displayed, please wrap your code using backticks (``) |\n| title        |  String  |        no          | Custom title in header                                                         |\n| disableCopy  |  Boolean |        no          | Disable copy button and copy functionality to code                             |\n| maxHeight    |  Number  |        no          | (ex :max-height=300) Maximum height of the code block, which will enable scrolling if exceeded     |\n\n\u003cp\u003eExample for lang props in Multi Code.\u003c/p\u003e\n\n```js\nconst codeMulti = [\n  {\n    lang: \"js\",\n    title: \"vue\",\n    code: codeVue.value\n  },\n  {\n    lang: \"html\",\n    code: codeHtml.value,\n    title: 'html'\n  },\n  {\n    lang: \"css\",\n    code: codeCss.value,\n  },\n]\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fichsanputr%2Fvue-code-highlighter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fichsanputr%2Fvue-code-highlighter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fichsanputr%2Fvue-code-highlighter/lists"}