TypeScript prismjs hooks Examples

Example #1

File: highlighting.ts Project: integer32llc/rust-playground

export function configureRustErrors({
  enableFeatureGate,
  getChannel,
  gotoPosition,
  reExecuteWithBacktrace,
}) {
  Prism.languages.rust_errors = { // eslint-disable-line camelcase
    'warning': /^warning:.*$/m,
    'error': {
      pattern: /^error(\[E\d+\])?:.*$/m,
      inside: {
        'error-explanation': /\[E\d+\]/,
        'see-issue': /see issue #\d+/,
      },
    },
    'error-location': /-->\s+(\/playground\/)?src\/.*\n/,
    'rust-errors-help': {
      pattern: /help:.*\n/,
      inside: {
        'feature-gate': /add #\!\[feature\(.+?\)\]/,
      },
    },
    'backtrace': {
      pattern: /at src\/.*\n/,
      inside: {
        'backtrace-location': /src\/main.rs:(\d+)/,
      },
    },
    'backtrace-enable': /Run with `RUST_BACKTRACE=1` for a backtrace/,
  };

  Prism.hooks.add('wrap', env => {
    if (env.type === 'error-explanation') {
      const errorMatch = /E\d+/.exec(env.content);
      const [errorCode] = errorMatch;
      env.tag = 'a';
      env.attributes.href = `https://doc.rust-lang.org/${getChannel()}/error-index.html#${errorCode}`;
      env.attributes.target = '_blank';
    }
    if (env.type === 'see-issue') {
      const errorMatch = /\d+/.exec(env.content);
      const [errorCode] = errorMatch;
      env.tag = 'a';
      env.attributes.href = `https://github.com/rust-lang/rust/issues/${errorCode}`;
      env.attributes.target = '_blank';
    }
    if (env.type === 'error-location') {
      let line;
      let col;
      const errorMatchFull = /(\d+):(\d+)/.exec(env.content);
      if (errorMatchFull) {
        line = errorMatchFull[1];
        col = errorMatchFull[2];
      } else {
        const errorMatchShort = /:(\d+)/.exec(env.content);
        line = errorMatchShort[1];
        col = '1';
      }
      env.tag = 'a';
      env.attributes.href = '#';
      env.attributes['data-line'] = line;
      env.attributes['data-col'] = col;
    }
    if (env.type === 'feature-gate') {
      const [_, featureGate] = /feature\((.*?)\)/.exec(env.content);
      env.tag = 'a';
      env.attributes.href = '#';
      env.attributes['data-feature-gate'] = featureGate;
    }
    if (env.type === 'backtrace-enable') {
      env.tag = 'a';
      env.attributes.href = '#';
      env.attributes['data-backtrace-enable'] = 'true';
    }
    if (env.type === 'backtrace-location') {
      const errorMatch = /:(\d+)/.exec(env.content);
      const [_, line] = errorMatch;
      env.tag = 'a';
      env.attributes.href = '#';
      env.attributes['data-line'] = line;
      env.attributes['data-col'] = '1';
    }
  });

  Prism.hooks.add('after-highlight', env => {
    const links = env.element.querySelectorAll('.error-location, .backtrace-location');
    Array.from(links).forEach((link: HTMLAnchorElement) => {
      const { line, col } = link.dataset;
      link.onclick = e => {
        e.preventDefault();
        gotoPosition(line, col);
      };
    });

    const featureGateEnablers = env.element.querySelectorAll('.feature-gate');
    Array.from(featureGateEnablers).forEach((link: HTMLAnchorElement) => {
      link.onclick = e => {
        e.preventDefault();
        enableFeatureGate(link.dataset.featureGate);
        gotoPosition(1, 1);
      };
    });

    const backtraceEnablers = env.element.querySelectorAll('.backtrace-enable');
    Array.from(backtraceEnablers).forEach((link: HTMLAnchorElement) => {
      link.onclick = e => {
        e.preventDefault();
        reExecuteWithBacktrace();
      };
    });
  });
}

Example #2

File: code-highlight.service.ts Project: ExFlo/ng-boostrap

import {Injectable} from '@angular/core';

import * as prism from 'prismjs';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-bash';

// Prism tries to highlight the whole document on DOMContentLoad.
// Unfortunately with webpack the only way of disabling it
// is by simply forcing it to highlight no elements -> []
prism.hooks.add('before-highlightall', (env) => {
  env['elements'] = [];
});

@Injectable()
export class CodeHighlightService {

  highlight(code: string, lang: string) {
    return prism.highlight(code.trim(), prism.languages[lang]);
  }
}

Example #3

File: prism.ts Project: nicohvi/nicohvi.github.io

import Prism from 'prismjs';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-yaml';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-tsx';
import 'prismjs/components/prism-ruby';
import 'prismjs/plugins/line-numbers/prism-line-numbers';

// Prism hooks
Prism.hooks.add('after-tokenize', function(env) {
  for (var i = 0; i < env.tokens.length; i++) {
    var token = env.tokens[i];

    if (token.type === 'string') continue;
    if (token.type === 'operator' && /^[<]$/.test(token.content)) {
      const keyword = env.tokens[i + 1];
      if (keyword.type) continue;
      env.tokens[i + 1] = new Prism.Token('constant', keyword);
    }
    if (token.type === 'punctuation' && token.content === ':') {
      const keyword = env.tokens[i + 1];
      if (keyword.type) continue;
      env.tokens[i + 1] = new Prism.Token('constant', keyword);
    }
  }
});

Prism.highlightAll();