如何在sharepoint 2013博客（Office365）上使用SyntaxHighlighter？

Question

I'm trying to allow code highlighting using SyntaxHighlighter on a sharepoint 2013 blog site (office365 portal).

Here is the code I have put in the head of the masterpage (js and css ressources are loaded before) :

<script type="text/javascript">
    function sh(){
        SyntaxHighlighter.highlight();
    };

    // executed when SP load completes
    _spBodyOnLoadFunctionNames.push("sh");
</script>

The _spBodyOnLoadFunctionNames should provide a mechanism to run functions after the load page event, but it seems it's never executed. Running my sh function from the developper tool (console) is working as expected.

Does anybody have a clue, am I using the right event ?

Answer 1

_spBodyOnLoadFunctionNames array declared in init.js (it is a part of SharePoint JavaScript Library)

According to init.js :

AttachEvent("DOMContentLoaded", _spBodyOnLoadWrapper, document);
window.onload = _spBodyOnLoadWrapper;

where

function _spBodyOnLoadWrapper() {
    ExecuteOrDelayUntilScriptLoaded(ProcessDefaultOnLoad, "core.js");
    //the remaining code is omitted for clarity..
}


function ProcessDefaultOnLoad() {
    ProcessOnLoadFunctionNames(_spBodyOnLoadFunctionNames);
    //the remaining code is omitted for clarity..
}
function ProcessOnLoadFunctionNames(onLoadFunctionNames) {
    if (onLoadFunctionNames != null) {
        for (var i = 0; i < onLoadFunctionNames.length; i++) {
            var expr = "if(typeof(" + onLoadFunctionNames[i] + ")=='function'){" + onLoadFunctionNames[i] + "();}";

            eval(expr);
        }
        onLoadFunctionNames = [];
    }
}

To summarize, the specified approach is a proper mechanism to run functions after the load page event.

In fact it works for me just fine (see the picture below)

Make sure init.js library is loaded before _spBodyOnLoadFunctionNames is initialized.

Alternatively you could try the following approach:

<script type="text/javascript">
    function sh(){
        SyntaxHighlighter.highlight();
    };

    ExecuteOrDelayUntilScriptLoaded(sh, "core.js");
</script>

Results

Answer 2

+Vadim Gremyachev's answer is valid with IE, but doesnt work with chrome, here is the workaround I've used (inspirated from https://stackoverflow.com/a/2956980/381149 ):

function sh(){
    SyntaxHighlighter.highlight();
};

function setIntervalX(callback, delay, repetitions) {
    var x = 0;
    var intervalID = window.setInterval(function () {

       callback();

       if (++x === repetitions) {
           window.clearInterval(intervalID);
       }
    }, delay);
}

$(document).ready(function () {
    if( $('.syntaxhighlighter').length == 0 ){
        setIntervalX(function() { sh() }, 1000,5);
}

$("a").on("click",function () {
if( $('.syntaxhighlighter').length == 0 ){
    setIntervalX(function() {
      sh()
    }, 1000,5);
}
return true;
});

});