Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/webdevnerdstuff/vue-code-block
Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.
https://github.com/webdevnerdstuff/vue-code-block
code component javascript neon-bunny pre prism prismjs syntax syntax-highlighting typescript vue vue3
Last synced: about 23 hours ago
JSON representation
Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.
- Host: GitHub
- URL: https://github.com/webdevnerdstuff/vue-code-block
- Owner: webdevnerdstuff
- License: mit
- Created: 2023-03-05T21:50:03.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-12T19:07:47.000Z (13 days ago)
- Last Synced: 2024-12-17T17:05:16.035Z (8 days ago)
- Topics: code, component, javascript, neon-bunny, pre, prism, prismjs, syntax, syntax-highlighting, typescript, vue, vue3
- Language: TypeScript
- Homepage: https://webdevnerdstuff.github.io/vue-code-block/
- Size: 16.3 MB
- Stars: 46
- Watchers: 4
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Vue 3 CodeBlock
## Description
The Vue 3 CodeBlock component leverages the power of [PrismJS](https://prismjs.com/) or [Highlight.js](https://highlightjs.org/) to provide syntax highlighting for code blocks within your application. The component takes a prop, which is the code to be highlighted, and uses PrismJS or Highlight.js to render the code with syntax highlighting. The component supports a variety of programming languages and can be customized with different themes to match your application's design. With this component, your users can display their code snippets with ease and clarity, making it easier to share and collaborate on code within your application.
## Installation
Using [pnpm](https://pnpm.io/):
```
pnpm add @wdns/vue-code-block
```
Using npm:
```
npm i @wdns/vue-code-block
```
## Documentation
[Documentation & Demo](https://webdevnerdstuff.github.io/vue-code-block/)
## Dependencies
[PrismJS](https://prismjs.com/)
[Highlight.js](https://highlightjs.org/)
[Vue 3](https://vuejs.org/)
[UAParser.js](https://www.npmjs.com/package/ua-parser-js)
## Change Log
[CHANGELOG](https://github.com/webdevnerdstuff/vue-code-block/blob/main/CHANGELOG.md)
## License
Copyright (c) 2023 WebDevNerdStuff
Licensed under the [MIT license](https://github.com/webdevnerdstuff/vue-code-block/blob/main/LICENSE.md).