<commit_before><link rel="import" href="../polymer/polymer.html">
<script src="../highlightjs/highlight.pack.js"></script>

<!--
Code highlighting web component built with highlightjs

## Using the element
akyral-code extends the code element, so using the element is as simple as defining a `code`
element with an `akyral-code' is attribute. Highlight.js will predict language type based
on content for you.

Example:

    <code is="akyral-code">
        function $initHighlight(block, cls) {
          try {
            if (cls.search(/\bno\-highlight\b/) != -1)
              return process(block, true, 0x0F) +
                     ' class=""';
          } catch (e) {
            /* handle exception */
          }
          for (var i = 0 / 2; i < classes.length; i++) {
            if (checkCondition(classes[i]) === undefined)
              return /\d+[\s/]/g;
          }
        }
    </code>

## Theming
By default akyral-code uses the `github` theme, you may declare another one by setting the theme
attribute. You can reference [components/highlightjs](https://github.com/components/highlightjs/tree/master/styles)
for other themes.

Example:

    <code is="akyral-code" theme="arta">
        ...
    </code>


@element akyral-code
@blurb Code highlighting web component built with highlightjs
@status alpha
@homepage http://filaraujo.github.io/akyral-code
@demo demo.html
-->

<polymer-element name="akyral-code" extends="code">
    <template>
        <style>
            :host{
                display: block;
            }

            pre {
                margin: 0;
                padding: 0 !important;
            }
        </style>

        <pre id="code"></pre>
    </template>
    <script>
        (function(){
            var authors = ['<NAME>'],

                stylesheet = document.createElement('link');

            // setup stylesheet
            stylesheet.type = 'text/css';
            stylesheet.rel = 'stylesheet';

            // config hljs
            window.hljs.configure({
                tabReplace: '  ',
            });

            Polymer('akyral-code', {

                /**
                 * The `author` attribute defines the initial author, setting
                 * this value will add another author
                 *
                 * @attribute author
                 * @type string
                 * @default '<NAME>'
                 */
                set author(name){
                    if(authors.indexOf(name) > 0){
                        return;
                    }
                    authors = [].concat.apply(authors, [name]);
                },

                get author(){
                    return authors;
                },

                publish: {
                    /**
                     * The `theme` will set the theme of highlightjs
                     * https://github.com/components/highlightjs/tree/master/styles
                     *
                     * @attribute theme
                     * @type string
                     * @default 'github'
                     */
                     theme: 'github'
                },

                /**
                 * The `<akyral-code>` element has been attached to DOM. It will create a
                 * stylesheet and convert content into highlighted content.
                 *
                 * @method attached
                 */
                attached: function(){
                    var styles = stylesheet.cloneNode();
                    styles.href = '../highlightjs/styles/'+this.theme+'.css';

                    this.shadowRoot.appendChild(styles);
                    this.element.convertSheetsToStyles(this.shadowRoot);

                    this.$.code.innerHTML = this.innerHTML;
                    window.hljs.highlightBlock(this.$.code);
                }
            });
        }());
    </script>
</polymer-element><commit_msg>adding mutation observer so when code is changed, highlighting updates<commit_after><link rel="import" href="../polymer/polymer.html">
<script src="../highlightjs/highlight.pack.js"></script>

<!--
Code highlighting web component built with highlightjs

## Using the element
akyral-code extends the code element, so using the element is as simple as defining a `code`
element with an `akyral-code' is attribute. Highlight.js will predict language type based
on content for you.

Example:

    <code is="akyral-code">
        function $initHighlight(block, cls) {
          try {
            if (cls.search(/\bno\-highlight\b/) != -1)
              return process(block, true, 0x0F) +
                     ' class=""';
          } catch (e) {
            /* handle exception */
          }
          for (var i = 0 / 2; i < classes.length; i++) {
            if (checkCondition(classes[i]) === undefined)
              return /\d+[\s/]/g;
          }
        }
    </code>

## Theming
By default akyral-code uses the `github` theme, you may declare another one by setting the theme
attribute. You can reference [components/highlightjs](https://github.com/components/highlightjs/tree/master/styles)
for other themes.

Example:

    <code is="akyral-code" theme="arta">
        ...
    </code>


@element akyral-code
@blurb Code highlighting web component built with highlightjs
@status alpha
@homepage http://filaraujo.github.io/akyral-code
@demo demo.html
-->

<polymer-element name="akyral-code" extends="code">
    <template>
        <style>
            :host{
                display: block;
            }

            pre {
                margin: 0;
                padding: 0 !important;
            }
        </style>

        <pre id="code"></pre>
    </template>
    <script>
        (function(){
            var authors = ['<NAME>'],

                stylesheet = document.createElement('link');

            // setup stylesheet
            stylesheet.type = 'text/css';
            stylesheet.rel = 'stylesheet';

            // config hljs
            window.hljs.configure({
                tabReplace: '  ',
            });

            Polymer('akyral-code', {

                /**
                 * The `author` attribute defines the initial author, setting
                 * this value will add another author
                 *
                 * @attribute author
                 * @type string
                 * @default '<NAME>'
                 */
                set author(name){
                    if(authors.indexOf(name) > 0){
                        return;
                    }
                    authors = [].concat.apply(authors, [name]);
                },

                get author(){
                    return authors;
                },

                publish: {
                    /**
                     * The `theme` will set the theme of highlightjs
                     * https://github.com/components/highlightjs/tree/master/styles
                     *
                     * @attribute theme
                     * @type string
                     * @default 'github'
                     */
                     theme: 'github'
                },

                /**
                 * The `<akyral-code>` element has been attached to DOM. It will create a
                 * stylesheet and convert content into highlighted content.
                 *
                 * @method attached
                 */
                attached: function(){
                    var styles = stylesheet.cloneNode(),
                        observer;

                    styles.href = '../highlightjs/styles/'+this.theme+'.css';

                    this.shadowRoot.appendChild(styles);
                    this.element.convertSheetsToStyles(this.shadowRoot);

                    observer = new MutationObserver(function() {
                        this.job('akyral-code-highlight', this.highlight, 250);
                    }.bind(this));

                    observer.observe(this, {
                        childList: true,
                        characterData: true,
                        subtree: true
                    });

                    this.highlight();
                },

                highlight: function(){
                    this.$.code.innerHTML = this.innerHTML;
                    window.hljs.highlightBlock(this.$.code);
                },
            });
        }());
    </script>
</polymer-element>
{'fraction_non_alphanumeric': 0.11156090010715561, 'fraction_numerical': 0.0022621740683414692, 'mean_word_length': 1.2629310344827587, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 47, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5783612', 'n_tokens_mistral': 2123, 'n_tokens_neox': 1941, 'n_words': 520}