egoist / Vue Prism Component
Licence: mit
highlight code using prism.js and vue component
Stars: ✭ 126
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Prism Component
prism-pretty
A Chrome Extension to format/highlight/preview HTML/JS/CSS/Markdown code with Prism.js
Stars: ✭ 91 (-27.78%)
Mutual labels: prism, highlight
Hexo Prism Plugin
Hexo plugin for code highlighting by prism.js, supporting JSX syntax
Stars: ✭ 195 (+54.76%)
Mutual labels: prism, highlight
Polyfill Iconv
This component provides a native PHP implementation of the php.net/iconv functions.
Stars: ✭ 1,621 (+1186.51%)
Mutual labels: component
Verte
🎨 A Color picker component. Built from the bottom to work with Vue.js.
Stars: ✭ 117 (-7.14%)
Mutual labels: component
Vue Api Request
Control your API calls by using an amazing component which supports axios and vue-resource
Stars: ✭ 116 (-7.94%)
Mutual labels: component
Ngx Lite
📦 A collection of lightweight Angular libraries in a single mono repo
Stars: ✭ 125 (-0.79%)
Mutual labels: component
Vue Datatables Net
Vue jQuery DataTables.net wrapper component
Stars: ✭ 119 (-5.56%)
Mutual labels: component
Ka Table
Lightweight MIT React Table component for both TS and JS with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Stars: ✭ 117 (-7.14%)
Mutual labels: component
Container Query
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
Stars: ✭ 119 (-5.56%)
Mutual labels: component
Thorui Uniapp
ThorUI组件库,轻量、简洁的移动端组件库。组件文档地址:https://thorui.cn/doc/ 。 最近更新时间:2021-10-01
Stars: ✭ 1,842 (+1361.9%)
Mutual labels: component
Vcomponents
VComponents is a SwiftUI framework that contains 40+ customizable UI components
Stars: ✭ 117 (-7.14%)
Mutual labels: component
Rebirth Ng
rebirth-ng is a ui framework for Angular & bootstrap.
Stars: ✭ 118 (-6.35%)
Mutual labels: component
Vue Calendar Heatmap
A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph
Stars: ✭ 120 (-4.76%)
Mutual labels: component
React Native Gifted Chat
💬 The most complete chat UI for React Native
Stars: ✭ 11,339 (+8899.21%)
Mutual labels: component
vue-prism-component
Install
yarn add vue-prism-component
Usage
First you need to load Prism
somewhere in your app:
// yarn add prismjs
import 'prismjs'
import 'prismjs/themes/prism.css'
OR:
<link rel="stylesheet" href="https://unpkg.com/prismjs/themes/prism.css" />
<script src="https://unpkg.com/prismjs"></script>
Then In SFC:
<template>
<prism language="javascript">{{ code }}</prism>
</template>
<script>
import Prism from 'vue-prism-component'
export default {
data() {
return {
code: 'const a = b'
}
},
components: {
Prism
}
}
</script>
Or In JSX:
<Prism language="html">{`
<div>
<strong>foo</strong>
</div>
`}</Prism>
For inline rendering, pass the inline
prop:
<Prism inline language="javascript" >alert("foo");</Prism>
You can also set the code using a prop:
import 'prismjs/components/prism-rust'
<Prism language="rust" code={ myRustCode } />
Related
- vue-highlight-component: highlight code using highlight.js and vue component.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
vue-prism-component © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @rem_rin_rin
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].