Подсветка кода в стандартном редакторе WP

Question

[volnov]

Посоветуйте легкий плагин подсвечивающий код в стандартном редакторе wordpress в режиме «текст».
Те что я пробовал режут куски кода и не работают с вставкой изображений.

Спасибо.

Answer 1

[Руслан]

Вообще-то да, как говорит Grawl, не обязательно редактировать в коде, можно все сделать шорткодами, но если сильно надо то вот: wordpress.org/plugins/ace-editor-for-wp/screenshots/

Comments

[volnov]

спасибо

Answer 2

[surething]

1. Сходить на сайт CodeMirror, собрать там бандл с подсветкой нужных языков и загрузить получившийся codemirror.js
2. Добавить в админки WP добавить скрипт с вызовом метода CodeMirror.fromTextArea(document.getElementById(«id textarea с кодом»))

Comments

[Ксения Михайлова]

Поступила именно так. Скачала все, что надо, подключила:

function registerCodeMirror() {
	wp_enqueue_script( 'codemirror',  get_template_directory_uri() . '/codemirror/lib/codemirror.js' );
	wp_enqueue_script( 'codemirrorHtml',  get_template_directory_uri() . '/codemirror/mode/xml/xml.js' );
	wp_enqueue_script( 'codemirrorXml',  get_template_directory_uri() . '/codemirror/addon/fold/xml-fold.js' );
	wp_enqueue_script( 'codemirrorTags',  get_template_directory_uri() . '/codemirror/addon/edit/matchtags.js' );
	wp_enqueue_style( 'codemirrorHtml',  get_template_directory_uri() . '/codemirror/lib/codemirror.css' );
	wp_enqueue_style( 'codemirrorHtml',  get_template_directory_uri() . '/codemirror/theme/monokai.css' );
}
add_action( 'admin_enqueue_scripts', 'registerCodeMirror' );

И активировала (куча show и hide - это кнопочки редактора сразу не работали, и пришлось сделать костыль.

<script id="codeMirrorScript">
	window.onload = function() {
		editor = myCodeMirror = CodeMirror.fromTextArea(document.getElementById('content'), {
			lineNumbers: true, 
			matchTags: {bothTags: true},
			mode: "text/html",
			indentUnit: 2 
			});
		}
	jQuery('#ed_toolbar').hide();
	jQuery('#content-tmce').click( function() {
		jQuery('#ed_toolbar').hide();
		jQuery('#wp-content-wrap').removeClass('tmce-active html-active');
		jQuery('#wp-content-wrap').addClass('html-active');
		jQuery('.wp-editor-tabs a').removeClass('switch-tmce switch-html');
		jQuery(this).addClass('switch-html');
		jQuery('.CodeMirror').hide();
		jQuery('.mce-tinymce.mce-container.mce-panel').show();
	})
	jQuery('#content-html').click( function() {
		jQuery('#ed_toolbar').hide();
		jQuery('#wp-content-wrap').removeClass('tmce-active html-active');
		jQuery('#wp-content-wrap').addClass('tmce-active');
		jQuery('.wp-editor-tabs a').removeClass('switch-tmce switch-html');
		jQuery(this).addClass('switch-tmce');
		jQuery('.CodeMirror').show();
		jQuery('.mce-tinymce.mce-container.mce-panel').hide();
	})
	</script>
	<style>
		.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
	</style>

[Roman]

Ксения Бутузова:
Привет, я воспользовался твоим вариантом.
Всё отлично, но кнопки редактора я вернуть не могу =(
Подскажи в чём может быть проблема?
Использую только html редактор, визуальный отключен.
Кроме того пропала "штуковина" позволяющая вытягивать контейнер (менять его размер).

[Roman]

Ксения Бутузова:
Как у тебя работает matchtags.js ?
Как я понял он должен при нажатии Ctrl+J прыгать на закрывающий тег.
В демо он работает, а в самом редакторе - нет. При нажатии Ctrl+J Chrome открывает загрузки =(

Как должен работать xml-fold.js я вообще не понял)))

[Ксения Михайлова]

Roman Gruff: У меня в тот раз не получилось довести все это до _нормально_ работающего вида, и я забила. Так что не могу сейчас подсказать подробнее, извините.

Answer 3

[Dmitrii]

WP Editor самое лучшее, что встречал.

Comments

[Ильяс Якубов]

Подскажите, есть ли у вас на примете такой же плагин как WP Editor, но с русским языком и чтобы он обновлялся?

[Dmitrii]

Ильяс Якубов, давно забросил WP, так что не подскажу, сорри.

Answer 4

[Jonh Doe]

Я использую вот этот . Достоточно легок и крут. Пример подсветки.

Answer 5

[nixmale]

Есть одна довольно любопытная вещица, но как ее прикрутить к админке сайта я не представляю. Быть может вам пригодится.

data:text/html;base64,PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uZXtwb3NpdGlvbjphYnNvbHV0ZTt0b3A6MDtyaWdodDowO2JvdHRvbTowO2xlZnQ6MDt9PC9zdHlsZT48ZGl2IGNsYXNzPSJlIiBpZD0iZWRpdG9yIj48L2Rpdj48c2NyaXB0IHNyYz0iaHR0cDovL2QxbjB4M3FqaTgyejUzLmNsb3VkZnJvbnQubmV0L3NyYy1taW4tbm9jb25mbGljdC9hY2UuanMiIHR5cGU9InRleHQvamF2YXNjcmlwdCIgY2hhcnNldD0idXRmLTgiPjwvc2NyaXB0PjxzY3JpcHQ+dmFyIGU9YWNlLmVkaXQoImVkaXRvciIpO2Uuc2V0VGhlbWUoImFjZS90aGVtZS9tb25va2FpIik7ZS5nZXRTZXNzaW9uKCkuc2V0TW9kZSgiYWNlL21vZGUvcGhwIik7PC9zY3JpcHQ+

Comments

[nixmale]

Вставьте эту строку вместо урл — и будет редактор с подсветкой.

Answer 6

[branky]

Наиболее надёжным вариантом считаю лекговесную JavaScript библиотеку Prism с довольно красивыми темами подсветки. Большинство плагинов перегружены непонятным кодом, если посмотреть исходники. В самостоятельном подключении подсветки кода нет ничего сложного, мы ведь вебмастера, правда? :)

Моя подробная инструкция:
Подсветка кода на сайте WordPress.