Если вы хотите поговорить о программировании, будут времена, когда вы захотите написать о коде — без того, чтобы он вел себя как код. Так как же сделать так, чтобы это выглядело как в обычном редакторе? Вы захотите, чтобы любой из ваших посетителей мог копировать и вставлять ваш код в свое собственное приложение.
Как редактор WordPress обрабатывает код
Это зависит от того, какой тип текстового редактора вы используете в WordPress , но вам придется делать разные вещи. Если вы используете визуальный редактор, WordPress автоматически преобразует символы, такие как> и <, в формат HTML & l t; и & g t ;.
Если вы используете редактор HTML, то если вы хотите отобразить> или <, вам нужно будет ввести & l t; и & g t; в вашем редакторе. Могут быть случаи, когда вы захотите вставить большой кусок кода в ваш редактор … если вы используете визуальный редактор, WordPress может кодировать другие части вашего кода. Если вы используете редактор HTML, вам придется просмотреть весь код и вручную изменить теги> на & g t ;.
Типы отображения кода
В вашем сообщении будет два способа отображения кода: либо в абзаце, либо в отдельном блоке кода.
Если вы хотите отобразить код внутри абзаца, вы можете использовать тег <code>. Это сообщит браузеру, что текст внутри тега является компьютерным кодом, и отобразит текст в виде простого текста.
Для блоков кода и сохранения того же формата в вашем тексте вам нужно будет использовать тег <pre>.
Предварительный тег не сделает ваш код хорошо выглядящим, поэтому мы можем стилизовать его позже, но он позволит вам правильно отобразить код на экране.
Цитаты в коде
WordPress имеет функциональность, которая будет конвертировать ваши цитаты в красивые цитаты. Это цитаты, которые вы обычно найдете в текстовых редакторах, они делают ваши цитаты вьющимися и выглядят лучше в вашем тексте.
Но если вы печатаете код в своем текстовом редакторе, это сделает код недействительным для людей, копирующих код. В коде ваши цитаты должны быть прямыми, иначе они не будут правильно отформатированы.
Если вы используете тег <pre>, вы не получите эту проблему с кавычками, но если вы просто отображаете встроенный код с помощью тега code, кавычки не будут отображаться правильно.
У вас есть два варианта: использовать предварительный тег или кодировать кавычки вручную с помощью & # 34; для двойных кавычек или & # 39; для одинарных кавычек.
Создание шорткода
На Paulund я показываю много фрагментов кода, что делается плагином для создания шорткода .
В этой статье я покажу вам плагин, который я использую для этого, и научит вас, как сделать то же самое.
Мне нравится использовать редактор HTML, потому что я вижу, что именно HTML будет помещен в посты, я могу убедиться, что весь HTML на странице чистый. У меня проблема в том, что когда я копирую большой объем кода в редактор, редактор будет думать, что это на самом деле HTML-код, и будет отображать его как HTML, а не как текст.
В прошлом я использовал плагин WordPress, называемый подсветкой синтаксиса , это очень хороший плагин, который позволит вам легко отображать код с помощью шорткодов, затем в зависимости от вашего шорткода он будет отображать код правильно, как вы видели бы в обычном редакторе кода.
Мне очень понравилась идея использовать шорткоды, чтобы определить, где находится код, и очень долго использовал подсветку синтаксиса . Но у меня всегда была проблема с этим, и это было то количество CSS и JavaSscript, которое оно добавляло бы на страницу, там было бы несколько файлов, добавленных на страницу только для стилизации кода. Я хотел просто использовать CSS в своей таблице стилей для отображения кода и уменьшения количества дополнительных файлов CSS и JavaScript, которые нужно было добавить на каждую страницу. Единственный способ сделать это — создать собственный плагин WordPress для отображения кода.
Поскольку мне очень понравилась идея использовать шорткод для отображения кода в редакторе, я скопировал эту идею на свой плагин, поэтому я собираюсь создать упрощенную версию подсветки синтаксиса .
Определение плагина
Чтобы запустить плагин, сначала нужно определить, что этот файл является плагином, используя следующие комментарии в верхней части плагина WordPress.
<?php
/*
* Plugin Name: Paulund Syntax Highlighter
* Plugin URI: http://www.paulund.co.uk
* Description: A plugin that allows you to display code on your Website
* Version: 1.0
* Author: Paul Underwood
* Author URI: http://www.paulund.co.uk
* License: GPL2
Copyright 2012 Paul Underwood
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License,
version 2, as published by the Free Software Foundation.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/
Создание Шорткодов
Мы собираемся создать шорткоды для разных языков кода для отображения. Я решил использовать 4 шорткода, один для HTML, один для CSS, один для Javascript и один для PHP.
Причина, по которой я использую 4 коротких кода, заключается в том, что если вы хотите по-разному стилизовать каждый из них, вы можете это сделать. Но для этого примера мы будем использовать одну и ту же функцию для всех кодов.
После того, как мы определили, какие языки мы хотим использовать, мы можем пройти через них и создать короткий код с помощью функции add_shortcode () .
/**
* Define the different language shortcodes
*/
$language = array("html", "css", "javascript", "php");
/**
* Create the different shortcodes
*/
foreach($language as $lang){
add_shortcode( $lang, 'paulund_highlight_code' );
}
Функция выделения кода
Когда шорткод используется в посте, он запускает функцию paulund_highlight_code () , так как это шорткод, он отправляет два параметра в функцию: атрибуты и контент.
Атрибуты — это данные, которые вы можете применить к шорткоду с помощью атрибутов, это можно использовать в функции, вызываемой шорткодом. Параметр content — это контент, который помещается в шорткод, это то, что нам нужно изменить, чтобы WordPress правильно отображал код.
Он начинается со сравнения контента с версией стрип-тэга контента, если они совпадают, тогда нам не нужно вносить какие-либо изменения в контент, но если они отличаются, нам нужно будет начать кодирование.
For the encoding we start off by removing the paragraph tags and the line breaks, we need to do this as when the content is saved WordPress will automatically add in paragraphs and line breaks from the text editor. If we keep these tags in the content then when we wrap the code in a pre tag we will display the paragraph tags on the page.
Next we convert all < to
& lt;
and change > to
& gt;
This is so the tags will display correctly on the page. Lastly we can then wrap all the content around a pre tag and a code tag and return the content in the function. This will then output all your code correctly on the page and inside pre and code tags.
/**
* Change the content of the shortcode to display code in the content
*
* @param $atts - Shortcode Attributes
* @param $content - Content inside the shortcode
*/
function paulund_highlight_code($atts, $content = null){
$encode = false;
if($content != strip_tags($content)){
$encode = true;
}
if($encode){
$remove_array = array("<p>", "</p>", "<br />", "<br/>");
$content = str_replace($remove_array, "", $content);
$content = str_replace("<", "<", $content);
$content = str_replace(">", ">", $content);
}
$content = "
<pre><code>" . trim($content) . "</code></pre>
";
return $content;
}
Stop WordPress Converting Quotes To Pretty Quotes
The problem about doing this conversion at runtime is that WordPress will display your quotes as pretty quotes and not straight quotes which your code needs.
To stop WordPress from changes these quotes to the pretty quotes add the following lines to the top of the plugin.
remove_filter('the_content', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
Finished Plugin
That’s all the code you need to automatically add pre tags around the content.
This is what the finished plugin will look like you can now copy and paste this into a PHP file and upload this to your wp-content/plugins folder to use on your own website.
<?php
/*
* Plugin Name: Paulund Syntax Highlighter
* Plugin URI: http://www.paulund.co.uk
* Description: A plugin that allows you to display code on your Website
* Version: 1.0
* Author: Paul Underwood
* Author URI: http://www.paulund.co.uk
* License: GPL2
Copyright 2012 Paul Underwood
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License,
version 2, as published by the Free Software Foundation.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/
/**
* Stop WordPress converting quotes to pretty quotes
*/
remove_filter('the_content', 'wptexturize');
remove_filter('comment_text', 'wptexturize');
remove_filter('the_excerpt', 'wptexturize');
/**
* Define the different language shortcodes
*/
$language = array("html", "css", "javascript", "php");
/**
* Create the different shortcodes
*/
foreach($language as $lang){
add_shortcode( $lang, 'paulund_highlight_code' );
}
/**
* Change the content of the shortcode to display code in the content
*
* @param $atts - Shortcode Attributes
* @param $content - Content inside the shortcode
*/
function paulund_highlight_code($atts, $content = null){
$encode = false;
if($content != strip_tags($content)){
$encode = true;
}
if($encode){
$remove_array = array("<p>", "</p>", "<br />", "<br/>");
$content = str_replace($remove_array, "", $content);
$content = str_replace("<", "<", $content);
$content = str_replace(">", ">", $content);
}
$content = "
<pre><code>" . trim($content) . "</code></pre>
";
return $content;
}
?>
Using The Shortcode
With the shortcodes active in WordPress we can now use them in the text editor.
All you have to do is decide which language you are going to paste into the text editor, if it is php then use the php shortcode. If you are using html then use the html shortcode tag.
Then all you have to do is write down the shortcode [ php ] then copy your code in the text editor then make sure you close your shortcode [ /php ].
When your HTML loads on the page these shortcodes will be changed to the pre tags.
Example of displaying code.
Styling The PRE Tags
When adding pre tags around the code it will not look great but this can easily be solved just by using CSS, all you have to do is add the following styles to the pre tags then all code snippets will look like this.
The below CSS is the styling I use on Paulund to style the code snippets. It will add different colour lines to the background of the pre tag and changes the line height so that each line of code will fit in each line of background rows.
Add this to your theme stylesheet to have the same style code snippets as seen here.
/***************************************************************************
* Code
***************************************************************************/
pre {
background: #eee;
background-image: -webkit-linear-gradient(#eee 50%,#e0e0e0 50%);
background-image: -moz-linear-gradient(#eee 50%,#e0e0e0 50%);
background-image: -ms-linear-gradient(#eee 50%,#e0e0e0 50%);
background-image: -o-linear-gradient(#eee 50%,#e0e0e0 50%);
background-image: linear-gradient(#eee 50%,#e0e0e0 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 4.5em 4.5em;
color: #555;
font-family: monospace, serif;
font-size: 16px;
line-height: 2.25em;
margin: 2em 2.25em;
overflow: auto;
padding: 0 2.25em;
width:85%;
}