vue-prism-component

vue-prism-component copied to clipboard

How would you use plugins such as https://prismjs.com/plugins/line-numbers/ with this Vue implementation ?

Casual importing + using line-numbers class works initialy, but after model changes, line numbers disappear.

I would also like to use plugins, how can this be done? I am trying to use the Command Line plugin.

import "prismjs/components/prism-bash"
import "prismjs/plugins/command-line/prism-command-line"

<prism language="bash" class="command-line" data-user="joe">cd /location</prism>

Edit

If I refresh the page, it works once in a while, which to me seems as if Prism is running before render sometimes and after render sometimes...

Support for plugins would be awesome!

+1

Anyone got luck on using file plugin:

https://prismjs.com/plugins/file-highlight/

A few things here. I think the method this library uses does not look at plugins at all since it's just highlighting based on the code. There are other PrismJS methods that run the hooks (which I believe the plugins are called from) but take running prism on the page or an element. When you do this though prism overwrites the HTML and removes vue's ability to update the DOM.

I got the line-numbers plugin to work with this code:

<template>
  <div>
    <PrismComponent
      :class="{
        'line-numbers': lineNumbers,
        'no-numbers': !lineNumbers,
      }"
    >
      <slot />
    </PrismComponent>
  </div>
</template>

<script>

import PrismComponent  from 'vue-prism-component'
import "prismjs";
import "prismjs/plugins/line-numbers/prism-line-numbers";
import "prismjs/plugins/line-numbers/prism-line-numbers.css";
import 'prismjs/components/prism-json'; // need this

export default {
  components: { PrismComponent },
  props: {
    lineNumbers: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    // needed to generate the line numbers html code, which doesn't happen automatically on second and subsequent
    // PrismComponent initialization/mounting
    if (this.lineNumbers) {
      Prism.highlightAll()
    }
  }
}
</script>

<style lang="scss">

pre[class*="language-"].line-numbers {
  position: relative;
  padding-left: 3.8em !important;
  counter-reset: linenumber;
}
.no-numbers .line-numbers-rows {
  display: none;
}
</style>