├── .babelrc ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["latest", { 4 | "es2015": { "modules": false } 5 | }] 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | /.idea/ 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue-Prism 2 | 3 | 4 | Simple Vue.js Syntax highlighter with [Prism.js](https://github.com/PrismJS/prism) 5 | 6 | ## Usage and Demo 7 | 8 | 9 | Go to http://vue-prism.netlify.com/ 10 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-plugin 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-prism", 3 | "description": "Highlight code with Vue.js and Prism.js", 4 | "version": "1.0.6", 5 | "author": "Ruslan Elisha ", 6 | "scripts": { 7 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 8 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 9 | }, 10 | "keywords": [ 11 | "vue", 12 | "vuejs", 13 | "vue-component", 14 | "prism.js", 15 | "syntax", 16 | "highlight" 17 | ], 18 | "main": "src/index.js", 19 | "peerDependencies": { 20 | "vue": "2.x" 21 | }, 22 | "devDependencies": { 23 | "babel-core": "^6.0.0", 24 | "babel-loader": "^6.0.0", 25 | "babel-preset-latest": "^6.0.0", 26 | "cross-env": "^3.0.0", 27 | "css-loader": "^0.25.0", 28 | "file-loader": "^0.9.0", 29 | "node-sass": "^4.5.0", 30 | "sass-loader": "^5.0.1", 31 | "vue-loader": "^11.1.4", 32 | "vue-template-compiler": "^2.2.1", 33 | "webpack": "^2.2.0", 34 | "webpack-dev-server": "^2.2.0", 35 | "vue": "^2.2.1" 36 | }, 37 | "dependencies": { 38 | "prismjs": "^1.6.0" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 45 | 46 | 152 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/creotip/vue-prism/068b81a160e0bf71f34eae7c51bb5eda9bce0923/src/assets/logo.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Prism from 'prismjs' 2 | 3 | const VuePrism = { 4 | 5 | install (Vue, options) { 6 | 7 | Vue.mixin({ 8 | mounted () { 9 | Prism.highlightAll(); 10 | } 11 | }) 12 | } 13 | } 14 | 15 | export default VuePrism; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.vue$/, 15 | loader: 'vue-loader', 16 | options: { 17 | loaders: { 18 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 19 | // the "scss" and "sass" values for the lang attribute to the right configs here. 20 | // other preprocessors should work out of the box, no loader config like this necessary. 21 | 'scss': 'vue-style-loader!css-loader!sass-loader', 22 | 'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax' 23 | } 24 | // other vue-loader options go here 25 | } 26 | }, 27 | { 28 | test: /\.js$/, 29 | loader: 'babel-loader', 30 | exclude: /node_modules/ 31 | }, 32 | { 33 | test: /\.(png|jpg|gif|svg)$/, 34 | loader: 'file-loader', 35 | options: { 36 | name: '[name].[ext]?[hash]' 37 | } 38 | } 39 | ] 40 | }, 41 | resolve: { 42 | alias: { 43 | 'vue$': 'vue/dist/vue.esm.js' 44 | } 45 | }, 46 | devServer: { 47 | historyApiFallback: true, 48 | noInfo: true 49 | }, 50 | performance: { 51 | hints: false 52 | }, 53 | devtool: '#eval-source-map' 54 | } 55 | 56 | if (process.env.NODE_ENV === 'production') { 57 | module.exports.devtool = '#source-map' 58 | // http://vue-loader.vuejs.org/en/workflow/production.html 59 | module.exports.plugins = (module.exports.plugins || []).concat([ 60 | new webpack.DefinePlugin({ 61 | 'process.env': { 62 | NODE_ENV: '"production"' 63 | } 64 | }), 65 | new webpack.optimize.UglifyJsPlugin({ 66 | sourceMap: true, 67 | compress: { 68 | warnings: false 69 | } 70 | }), 71 | new webpack.LoaderOptionsPlugin({ 72 | minimize: true 73 | }) 74 | ]) 75 | } 76 | --------------------------------------------------------------------------------