Displaying code snippets in Sharepoint wiki

Question

Is there a way to get SharePoint to display code snippets in a pre-formatted way?

Currently if you insert any code, it just looks exactly like the rest of the text. Anything would be better than nothing.

score 59 · Accepted Answer · answered Jan 26 '11 at 16:20

59

I found hilite.me which produces html styled code which you can insert into a sharpoint wiki.

It supports a number of languages and styles and is an online app.

answered Jan 26 '11 at 16:20

skyfoot

20,629
8
49
71

The HTML can be used from Editing Tools > Format Text > HTML > **Edit HTML Source** – ROMANIA_engineer Nov 24 '15 at 12:28
Just to clarify, take the HTML you get from hilite.me , while editing your wikidoc, go to the 'Insert' tab , 'Embed', and paste it there. – mojo-jojo Feb 13 '20 at 16:42

chustedde · Answer 2 · 2017-08-31T17:26:58.730

5

Even though this is an old question, I have yet another solution that possibly didn't exist at the time the question was asked:

You can create a GitHub Gist and use the embed code for the Gist on the SharePoint wiki page. This is especially useful if you are already using Gist, want to share the code snippet in multiple places aside from the wiki, and/or want to keep a history of the code snippet separate from the rest of the wiki page.

To use an embed code without the script tags being stripped, go to Insert > Embed Code in the ribbon when editing the page:

edited Aug 31 '17 at 17:26

answered Mar 17 '16 at 15:52

chustedde

55
2
6

1

Would you elaborate how you got this to work? Since embedding that code uses a ` – ShooShoSha Aug 28 '17 at 19:56
1

@ShooShoSha I edited my answer to show where you can add an embed code in the web editor. – chustedde Aug 31 '17 at 17:28

score 5 · Answer 3 · answered Dec 31 '08 at 21:27

5

No because MOSS's wiki is just a new page with the word "wiki" attached to the link.

answered Dec 31 '08 at 21:27

branchgabriel

4,241
4
34
48

3

not totally true. it supports some subset of wiki syntax like. [[Dogs]] : A link to a page named Dogs in the same folder. [[Animals/Dogs]] : A link to a page named Dogs in a subfolder called Animals. [[List:Announcements/Welcome]] : A link to the item called Welcome in the Announcements list on this site. – felickz Aug 31 '11 at 21:30

score 3 · Answer 4 · answered Jul 25 '14 at 19:33

This solution assumes that you are using an IDE that already formats the code for you. Some of the other answers would be better if you have a raw text file.

While editing a Sharepoint Wiki page:

Copy code from IDE to new MS Word doc
Highlight all in MS Word: Ctrl+A
Copy again inside MS Word
Switch to wiki page, Paste
Continue editing wiki or save

Works fine with Eclipse as IDE. Might be able to paste straight from VS to SharePoint.

If you have code snippets you will reuse in multiple pages, Use a similar copy/paste technique to save or upload htm files into a SharePoint document library and then insert a "Page Viewer Web Part" to view the htm inside a different page.

For those who try the attempt above: **user Internet Explorer**! Chrome 46 converts all colors (from Eclipse) and almost all colors (from IntelliJ IDEA) to grey during the copy-paste from Word to SharePoint. — ROMANIA_engineer, Nov 26 '15 at 12:31

score 1 · Answer 5 · answered Feb 24 '15 at 09:26

1

Best way I have found is to use tohtml.com

You can cut and paste your code into it and it will generate html that you can past into your sharepoint wiki

answered Feb 24 '15 at 09:26

John Babb

931
10
19

score 1 · Answer 6 · answered Dec 31 '08 at 21:40

Not that I'm aware of if you're specifically using the Wiki feature. Your wiki entries are stored like rows in a table as far as I know. If you're not using the wiki you can use the syntax highlighter tool. It's all javascript. http://code.google.com/p/syntaxhighlighter/

score 1 · Answer 7 · answered Jan 08 '09 at 22:51

For several weeks we are using Telerik Rad Editor

One of the tools is "Format Code Block" You may see it here : http://demos.telerik.com/aspnet-ajax/Editor/Examples/Default/DefaultCS.aspx

If you install the RadEditor for MOSS .. we will get this amazing tool in Wiki pages too.

score 0 · Answer 8 · answered Mar 28 '13 at 22:12

So this is not a great answer but for us it was better then the default. You can write your wiki in a tool like Windows Live writer (WLW). WLW has an add in for a code formatter. If you write your wiki page via WLW with the code formatter you can then go to the Wiki page and select "edit HTML source." You can then copy from WLW to the wiki page and get good styling.

score 0 · Answer 9 · answered Jul 26 '17 at 07:44

you can use prisimjs to show code snippets. When you add prisimjs and css you can use like this;

p { color: red }

if you want easier solution to use prisimjs, you can check this:

http://yasingokhanyuksel.blogspot.com.tr/2017/07/sharepoint-code-syntax-highlighting.html

Michael Coxon · Answer 10 · 2020-06-11T02:43:10.020

-1

If you want this for modern pages, there is the Source code content webpart from Qualitem.

https://spfxhub.com/packages/qualitem-source-code-content-web-part

Disclaimer: I am a co-developer.

edited Jun 11 '20 at 02:43

answered Mar 10 '20 at 10:55

Michael Coxon

5,311
1
24
51

Displaying code snippets in Sharepoint wiki

10 Answers10