Title: Source Code Widget plugin for syntax highlighting

You can write program code and script in the Source Code widget to display it in your article with syntax highlighting.



Examples



SDL (TeamPage's markup language that is used to render view content)

<#example title="Using view properties">
  <var.set name="foo" value="bar" />
  <foreach list="<config.view.value name=authors>" set="name">
    <loop.first>Prepared by </loop.first>
      ${name}
    <loop.last not> and <else>.</loop.last>
  </foreach>
</#example>


JavaScript

(function() {
  function tryHighlightingAll() {
    try {
      Prism.highlightAll();
    }
    catch (e) {
      console.log(e);
    }
  }
  const eventsToListenFor = [ "load", "auto-refresh-load", "comment-insert", "comment-update", "feed-item-expand" ];
  for (let i = 0; i < eventsToListenFor.length; i ++) {
    Proteus.addHandler(eventsToListenFor[i], tryHighlightingAll);
  }
})();


How to use



Select "Source Code" in the "Insert/Edit Widget" tool bar menu.



Select the name of the language in "Syntax", put your code into "Source Code", and click "OK".



The widget is inserted into the body area of the form. Submit the form.



Your code is colored and shows up in the widget embedded in the entry.



Choose a Color Theme



Click the "Configure" link in the "Source Code Widget" slot in Server Settings > Plugins to open the plugin's configuration dialog.

Choose a color theme as you like.



Here is a screenshot of the widget with the "Monakai" theme.



Download



This plug-in is bundled and included in a TeamPage installer and it is automatically available on your TeamPage server.

However, you can download a zip file of this plugin by clicking the link below.



Notes for the version 5.0



In version 5.0, the library used for highlighting has been changed to Prism.js. With this change, the following languages are no longer supported.



In addition, the color themes have been changed in version 5.0. The following color themes that were available in version 4.0 are no longer available.





Attachments:
01.png
02.png
03.png
04.png
05.png
06.png
Related Articles
Article: Forum5437 (permalink)
Categories: :Doc:Forum
Date: August 22, 2012; 11:25:25 AM Eastern Daylight Time

Author Name: Christopher Nuzum
Author ID: cjn