File Highlight and dynamically loaded content

Hey,

first of all: great work here!

I got a documentation page where I load some views via AJAX. I know that I must call Prism.highlightAll(); when I want to get Prism working on dynamically loaded content. But somehow this doesn’t work with all the additional plugins like File Highlight or Line Highlight. They just don’t apply.

Is this on purpose, a bug or what can I do to get them also running on dynamically loaded content? 😃

[hiulit]

Hi there! I’m no JavaScript ninja but I did find a solution. I don’t know if it’s the best one, but it worked for me. So here it is:

// File Highlight Plugin - start

var fileHighlight = (function fileHighlight(){  // Reference to fileHighlight function.
                                                // This is a "feature" that doesn't
                                                // come with the default plugin.

    if (!self.Prism || !self.document || !document.querySelector) {
        return;
    }

    var Extensions = {
        'js': 'javascript',
        'html': 'markup',
        'svg': 'markup',
        'xml': 'markup',
        'py': 'python'
    };

    Array.prototype.slice.call(document.querySelectorAll('pre[data-src]')).forEach(function(pre) {
        var src = pre.getAttribute('data-src');
        var extension = (src.match(/\.(\w+)$/) || [,''])[1];
        var language = Extensions[extension] || extension;

        var code = document.createElement('code');
        code.className = 'language-' + language;

        pre.textContent = '';

        code.textContent = 'Loading…';

        pre.appendChild(code);

        var xhr = new XMLHttpRequest();

        xhr.open('GET', src, true);

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {

                if (xhr.status < 400 && xhr.responseText) {
                    code.textContent = xhr.responseText;

                    Prism.highlightElement(code);
                }
                else if (xhr.status >= 400) {
                    code.textContent = '✖ Error ' + xhr.status + ' while fetching file: ' + xhr.statusText;
                }
                else {
                    code.textContent = '✖ Error: File does not exist or is empty';
                }
            }
        };

        xhr.send(null);
    });

    return fileHighlight;   // Reference to fileHighlight function.
                            // This is a "feature" that doesn't
                            // come with the default plugin.

})();;

Basically what I did was turn the self-executing anonymous function into one that you can actually call, called fileHighlight(). Now you just have to call it whenever you need it 😉

I know it’s bad to rewrite third-party code, but I don’t know how to extend it properly.

[Golmote]

I consider this issue was fixed by #514.