User Tools

Site Tools


ru:how_to:editor_configuration_syntaxhighlight

This is an old revision of the document!


Подсветка синтаксиса

Если вы хотите при работе в редакторе использовать подсветку синтаксиса – вам для этого потребуется скрипт Alex Gorbatchev’a SyntaxHighLighter ПЛЮС плагин Syntax-Highlighting для CKEditor.

Скачайте необходимые скрипты

Download the Syntax-Highlighter-Script from the SyntaxHighLighter-Download-Page

Unpack it to a local directory and upload it as directory “syntaxhighlighter” to /admin/template/js/

Download the SyntaxHighLighter-Plugin for CKeditor-Plugin from http://code.google.com/p/ckeditor-syntaxhighlight/downloads/detail?name=ckeditor-syntaxhighlight-1.0.tar.bz2

Загрузите плагин на сервер

Unpack it to a local directory and load that directory by FTP into your editor-plugin-directory at: admin/template/js/ckeditor/plugins

Интеграция подсветки с GetSimple

You will need a separate CKEditor-configuration file if you don't have one already. Add the following 2 lines to the custom config-file:

CKEDITOR.editorConfig = function( config ){
	// Define changes to default configuration here. For example:
	// config.removePlugins = 'elementspath,resize' ; // hide element path and resizer
	config.extraPlugins = 'syntaxhighlight',
	config.syntaxhighlightLangDefault = 'php'
	};

If you have defined extraPlugins already, add 'syntaxhighlight' to that comma-separated list,for example:

config.extraPlugins = 'fileicon,video,syntaxhighlight','templates',

If you haven't done already, define the custom-config-file in the GetSimple-Configuration file gsconfig.php

To show the button for the Syntax-Highlighter, you have to define that in the section “Editortoolbar” in gsconfig.php: an example: instead the standard-entry

# WYSIWYG toolbars (advanced, basic or [custom config])
define('GSEDITORTOOL', 'advanced');

define the buttons:

define('GSEDITORTOOL',"['Source','Cut','Copy','Paste','PasteText','PasteFromWord','Undo','Redo','Find','Replace','SelectAll','RemoveFormat'],
	'/',
	['Bold','Italic','Underline','Strike','Subscript','Superscript','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
	['TextColor','BGColor','Rule','PageBreak'],['NumberedList','BulletedList','Outdent','Indent'],
	'/',
	['Blockquote','Smiley'],['Link','Unlink','Anchor'],
	['Image','Flash','video','fileicon','Table','HorizontalRule','SpecialChar'],
	       	'/',
	['Styles','Format','Font','FontSize'],['ShowBlocks'],['Code'],['Templates']
	");

you see the option

['Code']

? This places the Syntax-Highlighter-Button in your toolbar.

Отредактируйте файл template.php вашей темы

you will have to add some stylesheets and scripts to your template-header, otherwise the visual effect of the syntax-highlighter will not work.

<!-- SyntaxHighlighter -->
<link type="text/css" rel="stylesheet" href="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/styles/shThemeDefault.css"/>
<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="<?php get_site_url(); ?>admin/template/js/syntaxhighlighter/scripts/shBrushPlain.js"></script>

In case that the syntaxhighlighting still does not work at your site, you might add one more script-tag to your template.php:

<script type="text/javascript">SyntaxHighlighter.all()</script>

Как работать с подсветкой

After all, you will see a new icon in your toolbar:
Click on that icon, you will see that PHP is the predefined language:
Now you can enter your code-snippet and after saving,

it will be integrated nicely formatted into your page.

A screenshot:

ru/how_to/editor_configuration_syntaxhighlight.1382345411.txt.gz · Last modified: 2013/10/21 08:50 by Arkady