How to use in vue.js

[Jummy]

I want to ask how to join vue，thank

[Pyronerd62]

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(); 
        });
    },

[Primož Rome]

@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.

[Pyronerd62]

@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.

[Pyronerd62]

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')
  ]
};

https://github.com/google/code-prettify/blob/b5fa4d1bf0ba91cfa7f12a67b75b047a42d2f91f/src/node_prettify.js#L1707

If you use any other constant variable it won't work either.