Hi, how can I use syntaxhighligt?

[zhangqiongyu]

As title, I install the package, but as you can see, the javascript code can not be highlighted, I would like to know what I didn't add and what I should do!Thanks!

[wxd237]

I have the same question

[JeffWeim]

Hi,

I'm having a similar issue with the expected behavior of the syntax highlighting.

My Vue component looks similar to this (shortened for brevity):

<template>
  <div class="post">
    <vue-markdown
      :source="p.body"
    >
    </vue-markdown>
  </div>
</template>

<script>
  import VueMarkdown from 'vue-markdown'
  import 'prismjs'

  export default {
    name: 'Post',
    components: {
      VueMarkdown
    }...
  }
</script>

<style lang="scss" scoped>
  @import '../../node_modules/prismjs/themes/prism.css';
</style>

I'm noticing, after the component renders that the text with the <pre><code class="language-*"></code></pre> is just a single string and doesn't appear to have been parsed by Prismjs.

Is there another piece of configuration that needs to be done for Prismjs to work?? Thanks

UPDATE @zhangqiongyu @wxd237

Found that if you manually call Prism.highlightAll() after vue-markdown is done parsing, it worked. Just make sure you've imported the Prism JS and CSS files and that the language-XXXX class is on the <code></code> element

[patmood]

I actually needed to call Prism.highlightAll() on the mounted() hook, otherwise the HTML isnt on the page yet and Prism can't convert it.

[patmood]

@miaolz123 it'd be great if the emitted and event on update(). Right now the @rendered event happens before it's actually finished

[ghost]

@patmood all you need to do is place required code under nextTick: this.$nextTick(()=>{ // your code });

in my case @rendered event works fine after that.

[program-spiritual]

@strunoder24 thanks ! it works !

[madneal]

@patmood I try to call highlightAll in mounted. But still does not work.

<template>
  <div class="components-container">
    <aside>
      Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html">Documentation</a>
    </aside>
    <div>
      <tinymce v-model="content" :height="300" />
    </div>
    <div class="editor-content" v-html="content" />
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'

export default {
  name: 'TinymceDemo',
  components: { Tinymce },
    mounted() {
      Prism.highlightAll()
  },
  data() {
    return {
      content:
      `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" /><ul>
        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li><li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li><li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
      </ul>`
    }
  }
}
</script>

<style scoped>
.editor-content{
  margin-top: 20px;
}
</style>