prism-highlighter.html 3.11 KB
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at

<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="prism-import.html">

Syntax highlighting via [Prism](

Place a `<prism-highlighter>` in your document, preferably as a direct child of
`<body>`. It will listen for `syntax-highlight` events on its parent element,
and annotate the code being provided via that event.

The `syntax-highlight` event's detail is expected to have a `code` property
containing the source to highlight. The event detail can optionally contain a
`lang` property, containing a string like `"html"`, `"js"`, etc.

This flow is supported by [`<marked-element>`](
(function() {

  'use strict';

  var HIGHLIGHT_EVENT = 'syntax-highlight';


    is: 'prism-highlighter',

    ready: function() {
      this._handler = this._highlight.bind(this);

    attached: function() {
      (this.parentElement ||, this._handler);

    detached: function() {
      (this.parentElement ||, this._handler);

     * Handle the highlighting event, if we can.
     * @param {!CustomEvent} event
    _highlight: function(event) {
      if (!event.detail || !event.detail.code) {
        console.warn('Malformed', HIGHLIGHT_EVENT, 'event:', event.detail);

      var detail = event.detail;
      detail.code = Prism.highlight(detail.code, this._detectLang(detail.code, detail.lang));

     * Picks a Prism formatter based on the `lang` hint and `code`.
     * @param {string} code The source being highlighted.
     * @param {string=} lang A language hint (e.g. ````LANG`).
     * @return {!prism.Lang}
    _detectLang: function(code, lang) {
      if (!lang) {
        // Stupid simple detection if we have no lang, courtesy of:
        return code.match(/^\s*</) ? Prism.languages.markup : Prism.languages.javascript;

      if (lang === 'js' || lang.substr(0, 2) === 'es') {
        return Prism.languages.javascript;
      } else if (lang === 'css') {
        return Prism.languages.css;
      } else if (lang === 'c') {
        return Prism.langauges.clike;
      } else {
        // The assumption is that you're mostly documenting HTML when in HTML.
        return Prism.languages.markup;