Our Source Code web part – why we built it
Published: 2020-04-21 by qualitem-com-user-prod.
Believe it or not, we started writing this web parts before the Microsoft Code Snippet modern web part came out. Other priorities at the time meant the development was temporarily shelved.
Last week we decided to finish our web part; we used it as a training tool to assist some of our junior staff to gain further experience with developing SPFX web parts. This is a proven hands-on training strategy for us. This is not to say that the web part is not good, in fact, we believe some of the unique features elevate it above the out-of-the-box Microsoft modern Code Snippet web part.
Microsoft’s Code Snippet web part
The Code Snippet web part allows you to easily display code as text on your page for others to use or learn from. You can select the code language and a dark or light theme. The web part even auto-corrects syntax.
This was rolled out to tenants on a Targeted Release program. The Code snippet web part is not available in SharePoint Server 2019 (on-premise) in case you are trying to find it – this is where ours may come in handy!
Similar features
The Qualitem Source Code web part supports very similar features as the Code Snippet web part, specifically:
- Line wrap of code
- Numbered/Unnumbered lines
- Dark/Light mode
- Auto-corrects syntax
- In-line edit of code in to web part
Our unique features
We have added some additional features over-and-above those of Microsoft’s Code Snippet web part, specifically:
- We use Visual Studio Code’s editor (Monaco) for edit-mode, this gives us the power of VSCode in the browser to use the features you would expect in an IDE. Such as;
- Code formatting
- Intellisense (in a few languages)
- Variable name completion
- Realtime syntax checking
- We use Prism as our display surface due to it being lightweight and very fast to load. This allows a richer viewing experience for users with more languages supported than the MS control.
- “Copy”-n-paste button (supported in all modern browsers, not Internet Explorer) to allow you to quickly copy the code into your favourite editor.
- Hide/show Chroming – optionally selectable to allow the Copy button to appear for code snippets.
Value-add for Live Publish customers
Live Publish is our Word add-in that supports publishing your Word article or blog content to SharePoint Online as a Modern Page. Through our single click publish, you can quickly and easily publish a technical blog article that includes code snippets as a modern page.
Live Publish will extract the code in your article and insert the code block in to the Source Code web part – https://spfxhub.com/packages/qualitem-source-code-content-web-part.
Simply create a new style named “Code” and use the style to define your code block in your article. Live Publish will do the rest.
If you would like to learn more about Live Publish, please go to https://www.qualitem.com/livepublish.
A caveat
Many SPFX solutions are deployable to SharePoint 2019 and therefore able to be used on-premises. However, SPFX versioning issues outlined in the following article dictate what supported on-premises is and what isn’t.
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/sharepoint-2019-support
Given we use a newer version of SPFX than SharePoint 2019 supports, we would be required to create a new package using the older version of SPFX framework just to support SharePoint 2019, which we are unwilling to do at this point in time. If anyone would like this web part on-premises for their SharePoint 2019 platform, let us know and am sure when can assist, however, this won’t be free.