How to use the prismjs.plugins function in prismjs

To help you get started, we’ve selected a few prismjs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github mcguffin / wp-rainbow-hilite / src / js / main / index.js View on Github external
import Prism from 'prismjs';
import 'current-script-polyfill';
import 'prismjs/plugins/autoloader/prism-autoloader';
import 'prismjs/plugins/line-numbers/prism-line-numbers';

// setup autoloader
Prism.plugins.autoloader.languages_path = document.currentScript.src.replace(/\/([^\/]+)$/,'/prism/components/');

Prism.highlightAll();
github Foveluy / ReStory / src / rscomponent / codeblock.js View on Github external
var range = currentRange.split('-')

      var start = +range[0],
        end = +range[1] || start

      var line =
        pre.querySelector('.line-highlight[data-range="' + currentRange + '"]') || document.createElement('div')

      line.setAttribute('aria-hidden', 'true')
      line.setAttribute('data-range', currentRange)
      line.className = (classes || '') + ' line-highlight'

      //if the line-numbers plugin is enabled, then there is no reason for this plugin to display the line numbers
      if (hasLineNumbers && Prism.plugins.lineNumbers) {
        var startNode = Prism.plugins.lineNumbers.getLine(pre, start)
        var endNode = Prism.plugins.lineNumbers.getLine(pre, end)

        if (startNode) {
          line.style.top = startNode.offsetTop + 'px'
        }

        if (endNode) {
          line.style.height = endNode.offsetTop - startNode.offsetTop + endNode.offsetHeight + 'px'
        }
      } else {
        line.setAttribute('data-start', start)

        if (end > start) {
          line.setAttribute('data-end', end)
        }

        line.style.top = (start - offset - 1) * lineHeight + 'px'
github tig / winprint / proto / node / winprint.js View on Github external
const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');

loadLanguages(['csharp']);
Prism.plugins =  "line-numbers" ;

const code = 'using System';
const html = Prism.highlight(code, Prism.languages.csharp, 'csharp');
console.log(html);
console.log('done');
github Foveluy / ReStory / src / rscomponent / codeblock.js View on Github external
for (var i = 0, currentRange; (currentRange = ranges[i++]); ) {
      var range = currentRange.split('-')

      var start = +range[0],
        end = +range[1] || start

      var line =
        pre.querySelector('.line-highlight[data-range="' + currentRange + '"]') || document.createElement('div')

      line.setAttribute('aria-hidden', 'true')
      line.setAttribute('data-range', currentRange)
      line.className = (classes || '') + ' line-highlight'

      //if the line-numbers plugin is enabled, then there is no reason for this plugin to display the line numbers
      if (hasLineNumbers && Prism.plugins.lineNumbers) {
        var startNode = Prism.plugins.lineNumbers.getLine(pre, start)
        var endNode = Prism.plugins.lineNumbers.getLine(pre, end)

        if (startNode) {
          line.style.top = startNode.offsetTop + 'px'
        }

        if (endNode) {
          line.style.height = endNode.offsetTop - startNode.offsetTop + endNode.offsetHeight + 'px'
        }
      } else {
        line.setAttribute('data-start', start)

        if (end > start) {
          line.setAttribute('data-end', end)
        }
github gocd / gocd / server / webapp / WEB-INF / rails / webpack / views / pages / pac / preview_pane.tsx View on Github external
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import classnames from "classnames";
import {MithrilComponent} from "jsx/mithril-component";
import m from "mithril";
import * as Prism from "prismjs";
import defaultStyles from "views/pages/pac/styles.scss";

import "prismjs/components/prism-json";
import "prismjs/components/prism-yaml";
import "prismjs/plugins/custom-class/prism-custom-class";

Prism.plugins.customClass.map(defaultStyles);

interface Attrs {
  content: () => string;
  mimeType: () => string;
}

interface LanguageSpec {
  grammar: Prism.Grammar;
  name: string;
  comment: string;
}

export class PreviewPane extends MithrilComponent {
  view(vnode: m.Vnode) {
    const language = Language.from(vnode.attrs.mimeType());
    return <pre class="{classnames(defaultStyles.previewPane,"><code></code></pre>
github intraxia / wp-gistpen / client / prism / plugins / filename.ts View on Github external
use() {
    Prism.plugins.toolbar.registerButton('filename', filenameButton);
  },
github moetezch / moetez.me / src / templates / post.js View on Github external
componentDidMount() {
    Prism.plugins.customClass.prefix('prism--')
    Prism.highlightAll()
  }
  showCategories(categories) {
github intraxia / wp-gistpen / client / prism / index.ts View on Github external
export const setAutoloaderPath = (path: string) =>
  (Prism.plugins.autoloader.languages_path = path);
github devisephp / cms / vue / src / installer / installer.js View on Github external
import AlertIcon from 'vue-ionicons/dist/ios-alert.vue';
Vue.component('alert-icon', AlertIcon);

import Prism from 'prismjs';
import 'prismjs/themes/prism-okaidia.css';
import 'prismjs/components/prism-ini.min.js';
import 'prismjs/components/prism-javascript.min.js';
import 'prismjs/components/prism-bash.min.js';
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';

Prism.highlightAll();

Prism.plugins.NormalizeWhitespace.setDefaults({
  'remove-trailing': true,
  'remove-indent': true,
  'left-trim': true,
  'right-trim': true
  /*'break-lines': 80,
	'indent': 2,
	'remove-initial-line-feed': false,
	'tabs-to-spaces': 4,
	'spaces-to-tabs': 4*/
});

new Vue({
  el: '#installer-app',
  store: store
});
github intraxia / wp-gistpen / client / prism / plugins / edit.ts View on Github external
use() {
    Prism.plugins.toolbar.registerButton('edit', editButton);
  },