How to use in vue.js
JummyWu opened this issue · comments
I want to ask how to join vue,thank
Take a look at this #476
TLDR
install via npm but get the master branch. It has the changes.
npm i git://github.com/google/code-prettify#master -- save
In your main.js require your theme. You don't have to use sunburst.
require('code-prettify/styles/sunburst.css') ;
In your component then just require it.
const prettyPrint = require('code-prettify');
In your component mounted
mounted: function() {
var vm = this;
this.$nextTick(function() {
prettyPrint.prettyPrint();
});
},
@Pyronerd62 I am trying to use this in Vue but not working:
import CodePrettify from 'code-prettify'
mounted: function() {
this.$nextTick(function() {
CodePrettify.prettyPrint()
})
}
and I get this error TypeError: code_prettify__WEBPACK_IMPORTED_MODULE_2___default.a.prettyPrint is not a function
If I console.log(CodePrettify)
I get empty object.
@PrimozRome You can use import. It doesn't have the proper exports. However it will work in you require it. Use this.
const prettyPrint = require('code-prettify');
mounted: function() {
var vm = this;
this.$nextTick(function() {
prettyPrint.prettyPrint();
});
},
Don't forget to require a css theme in your main.js like:
require('code-prettify/styles/sunburst.css') ;
If this isn't working show me your code in your main js and component file. Also make sure you're using the master branch. The current branch on npm doesn't contain the exports for require. No branch contain the proper exports to import it.
Oh @PrimozRome you have to require it as prettyPrint since it's exported as such. Take a look here:
module.exports = {
prettyPrint: prettyPrint,
prettyPrintOne: prettyPrintOne,
// include paths for css preprocessor support
includePaths: [
__dirname,
path.resolve(__dirname, '../styles')
]
};
If you use any other constant variable it won't work either.