SyntaxHighlighter im SharePoint

In diesem Bog verwende ich den Syntax Highlighter von Alex Gorbatchev​ – ich finde Code sieht dann gut aus.

Im SharePoint habe ich den bisher immer vermisst. Das hat nun ein ende: Ich habe eine Sandbox-Solution​ erstellt, die die Dateien des Syntax Highlighter im SharePoint (auf SiteCollectioin-Ebene) bereitstellt und zusätzlich ein Feature (auf Web-Ebene) dass jede angezeigte Seite nach Syntax Highlighter-Formatierungen durchsucht und die entsprechenden Dateien dynamisch lädt.

Dafür habe ich das folgende js-File verwendet:

if (!!window.Type) {
//this is "normal"
Type.registerNamespace("SpSyntaxHighlighter");
} else {
//this happend on i.e. EditBlog.aspx
window.SpSyntaxHighlighter = window.SpSyntaxHighlighter || {};
}
SpSyntaxHighlighter.canApplySyntaxHighlighter = function () {
/// <summary>Check, if SyntaxHighlighter should be applied. I.e. returns false, if something is in edit mode..</summary>
/// <returns type="bool">fals, if loading of SyntaxHighlighter should be disabled</returns>
var rteFields = document.getElementsByClassName('ms-rtefield');
// check if page is in edit-mode or edit-form or something..
// do not (!) modify source in an editor - because that will lead to the modification being saved...
if (rteFields.length > 0) {
SP.UI.Notify.addNotification('Edit-Mode detected. SyntaxHighlighter disabled.', false);
return false;
}
return true;
};
SpSyntaxHighlighter.shAutoConfig = [[ 'applescript' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushAppleScript.js'],
[ 'actionscript3', 'as3' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushAS3.js'],
[ 'bash', 'shell' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushBash.js'],
[ 'coldfusion','cf' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushColdFusion.js'],
[ 'cpp', 'c' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushCpp.js'],
[ 'c#', 'c-sharp', 'csharp' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushCSharp.js'],
[ 'css' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushCss.js'],
[ 'delphi', 'pascal', 'pas' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushDelphi.js'],
[ 'diff', 'patch' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushDiff.js'],
[ 'erl', 'erlang' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushErlang.js'],
[ 'groovy' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushGroovy.js'],
[ 'java' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushJava.js'],
[ 'jfx', 'javafx' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushJavaFX.js'],
[ 'js', 'jscript', 'javascript' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushJScript.js'],
[ 'perl', 'Perl', 'pl' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushPerl.js'],
[ 'php' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushPhp.js'],
[ 'text', 'plain' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushPlain.js'],
[ 'powershell', 'ps' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushPowerShell.js'],
[ 'py', 'python' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushPython.js'],
[ 'ruby', 'rails', 'ror', 'rb' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushRuby.js'],
[ 'sass', 'scss' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushSass.js'],
[ 'scala' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushScala.js'],
[ 'sql' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushSql.js'],
[ 'vb', 'vbnet' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushVb.js'],
[ 'xml', 'xhtml', 'xslt', 'html' , '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/shBrushXml.js']];
SpSyntaxHighlighter.runSyntaxHighlighter = function () {
/// <summary>
/// Re-Run SyntaxHighlighter, make sure SyntaxHighlighter was loaded before calling.
/// i.e. call loadSyntaxHighlighter first.
/// this functions does nothing, if an RichTextEditor is opened in the page!
/// </summary>
if (!SpSyntaxHighlighter.canApplySyntaxHighlighter()) return;
// restore the global SH-object if it was garbage-collected by MDS
if (!window.SyntaxHighlighter) {
window.SyntaxHighlighter = SpSyntaxHighlighter.SyntaxHighlighter;
}
window.SyntaxHighlighter.autoloader.apply(undefined, SpSyntaxHighlighter.shAutoConfig);
window.SyntaxHighlighter.vars.discoveredBrushes = null; // let SyntaxHighlighter re-run brush-discovery
window.SyntaxHighlighter.all();
// There is something itchy in autoloader.. SyntaxHighlighter.all() can not be called twice, if SyntaxHighlighter.autoloader was loaded 🙁
//TODO: don't use autoloader...
window.setTimeout(window.SyntaxHighlighter.highlight.bind(window.SyntaxHighlighter), 100);
};
SpSyntaxHighlighter.loadSyntaxHighlighter = function () {
var csspath = '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/styles/',
scriptpath = '~siteCollection/SiteAssets/SpSyntaxHighlighter/syntaxhighlighter/scripts/',
shTheme = 'shThemeDefault.css', //Possible Themes: shThemeDefault.css, shThemeDjango.css, shThemeEclipse.css, shThemeEmacs.css, shThemeFadeToGrey.css, shThemeMDUltra.css, shThemeMidnight.css, shThemeRDark.css
addEvent = function (elm, evt, func) {
if (elm.addEventListener) {
elm.addEventListener(evt, func);
} else if (elm.attachEvent) {
elm.attachEvent('on' + evt, func);
} else {
elm['on' + evt] = func;
}
},
removeEvent = function (elm, evt, func) {
if (elm.removeEventListener) {
elm.removeEventListener(evt, func);
} else if (elm.detachEvent) {
elm.detachEvent('on' + evt, func);
} else {
elm['on' + evt] = null;
}
},
loadScript = function (url, successHandler, errorHandler) {
var script = document.createElement('script'),
loaded, error;
script.src = url;
script.type = 'text/javascript';
script.language = 'javascript';
loaded = function () {
removeEvent(script, 'load', loaded);
removeEvent(script, 'error', error);
if (successHandler) {
successHandler(script);
}
};
error = function () {
removeEvent(script, 'load', loaded);
removeEvent(script, 'error', error);
if (errorHandler) {
errorHandler();
}
};
addEvent(script, 'load', loaded);
addEvent(script, 'error', error);
document.body.appendChild(script);
},
loadCss = function (url) {
var link = document.createElement('link');
link.href = url;
link.type = 'text/css';
link.rel = 'stylesheet';
document.head.appendChild(link);
},
loadSyntaxHighlighter = function () {
// add SyntaxHighlighter, styles and autoloader, then run autoloader
loadCss(csspath + 'shCore.css');
loadCss(csspath + shTheme);
loadScript(scriptpath + 'shCore.js', function () {
SpSyntaxHighlighter.SyntaxHighlighter = window.SyntaxHighlighter; // store SyntaxHighlighter in namespace...
loadScript(scriptpath + 'shAutoLoader.js', function () {
SpSyntaxHighlighter.runSyntaxHighlighter();
});
});
},
siteLoadFialed = function (err) {
if (!!(console && console.log)) {
console.log('accessing siteCollecion failed. ');
console.log('err was: ' + err);
console.log('execution aborted. :-(');
}
// this is the end of it. sadly.
},
siteLoadSucceded = function () {
var siteCollectionUrl = siteCollection.get_url(),
i, len, brushCfg, brushPath;
// fix up paths...
csspath = csspath.replace("~siteCollection", siteCollectionUrl);
scriptpath = scriptpath.replace("~siteCollection", siteCollectionUrl);
len = SpSyntaxHighlighter.shAutoConfig.length;
for (i = 0; i < len; i += 1) {
brushCfg = SpSyntaxHighlighter.shAutoConfig[i];
brushPath = brushCfg[brushCfg.length - 1];
brushCfg[brushCfg.length - 1] = brushPath.replace("~siteCollection", siteCollectionUrl);
}
// now start loading SyntaxHighlighter
loadSyntaxHighlighter();
},
siteCollection,
clientContext = SP.ClientContext.get_current(),
highlightable = document.getElementsByTagName('pre');
// check if syntaxHighlighter ist needed
if (highlightable.length < 1) return;
if (!SpSyntaxHighlighter.canApplySyntaxHighlighter()) return;
// load siteCollectionData then continue
siteCollection = clientContext.get_site();
clientContext.load(siteCollection);
clientContext.executeQueryAsync(siteLoadSucceded, siteLoadFialed);
};
SpSyntaxHighlighter.preLoadSyntaxHighlighter = function () {
if (!!SpSyntaxHighlighter.SyntaxHighlighter) {
//we've been here before 🙂
SpSyntaxHighlighter.runSyntaxHighlighter();
return;
}
// load all from scratch...
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', SpSyntaxHighlighter.loadSyntaxHighlighter);
};
SpSyntaxHighlighter.register = function () {
var thisUrl;
SpSyntaxHighlighter.preLoadSyntaxHighlighter();
if (!!window._spPageContextInfo) {
thisUrl = '~siteCollection/SiteAssets/SpSyntaxHighlighter/ShLoader.js'.replace('~siteCollection/', window._spPageContextInfo.siteServerRelativeUrl);
window.RegisterModuleInit(thisUrl, SpSyntaxHighlighter.preLoadSyntaxHighlighter);
}
};
//Simulate LoadAfterUi=true
window._spBodyOnLoadFunctionNames.push("SpSyntaxHighlighter.register");
view raw shLoader.js hosted with ❤ by GitHub

Teile des Skriptes (z.B. die Verfügbaren “brushes”) lasse ich dabei auto-generieren mittels eines T4-Templates.

Die Sourcen für das ganze habe ich auf bitbucket​.