2024-01-03 Takashi notes: After releasing this plugin, I updated the "Source Code Widget" plugin with Prism.js. This means that the "Source Code Widget" plugin is newer than this plugin, the "Source Code Widget" plugin is installed by default, and you don't have to install this plugin anymore.
This is an alternative plug-in for the "Source Code Widget" installed by default. The improvements are that;
More color themes are available.
More programming languages are supported.
It's compatible with existing "Source Code" widget in your articles.
Install
Install Highlight JS Widget plug-in
Click the link below to download the com.traction.proteus.customjscss-NN.zip file. (NN means the version number.)
Upload the zip file in Server Settings > Plugins page.
After uploading, you will see the following I18N ERROR. Don't worry. This error means "you need to restart TeamPage server to load the I18N resources (language files)."
Click [Restart TeamPage] in Server Settings > General > Manage Server page. If your TeamPage server is hosted in Traction's cloud environment, you will need to restart your server twice to load the I18N resources correctly.
After restarting, you will see that the plugin's name show up correctly.
Inactivate Source Code Widget plug-in
Turn off the checkbox of the Source Code Widget plug-in and press the "Apply" button.
Configurations
Click the "Configure" link to open the plug-in configuration view.
You can (1) select a color theme from the list, (2) set the selector that the Highlight JS will be work, and (3) select whether the widget should have the line-number column or not.
How to use
Inserting a widget
Select "Source Code" in the "Insert/Edit Widget" menu.
Fill-in your code into the textarea and click "OK".
The default "Syntax" is set to be "auto-detection". You can select a specific syntax manually.
The widget will be inserted into the body text like this. Submit (Save) the article.
You will see the code inserted into the widget is displayed like this. (In this example, I selected the "monokai-sublime" color theme.
Highlight the Sample Code descriptions
Write your code into the body text, select the description, and select "Sample code" in the drop-down list.
The background color of the description will be light-gray like this. Submit the article.
The description will be decorated by the Highlight JS capability.
