How to use SyntaxHighlighter on a sharepoint 2013 blog (Office365)?

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 ?

score 1 · Answer 1 · answered Dec 08 '14 at 21:51

_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

enter image description here

I can't find where the init.js is loaded but your alternate approach works fine thank you very much — Loïc MICHEL, Dec 09 '14 at 07:21
I'm sorry but this is not a 100% working answer, i will post my workaround as an answer — Loïc MICHEL, Dec 11 '14 at 09:26

score 1 · Accepted Answer · edited May 23 '17 at 12:31

+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;
});

});

How to use SyntaxHighlighter on a sharepoint 2013 blog (Office365)?

2 Answers2