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.
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/
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.
Attachments:
plugin_image_1.png
plugin_image_2.png
configurations.png
plugin_image_3.png
howto1.png
howto2.png
howto3.png
howto4.png
howto5.png
howto6.png
howto7.png
Article: Forum6935 (permalink)
Categories: :Doc:plug-in
Date: June 4, 2018; 4:27:06 AM Eastern Daylight Time
Author Name: Takashi Okutsu
Author ID: takashi
Categories: :Doc:plug-in
Date: June 4, 2018; 4:27:06 AM Eastern Daylight Time
Author Name: Takashi Okutsu
Author ID: takashi