Как вывести HTML, PHP и другой код в статье wordpress?

Здравствуй, дорогой друг! Совсем недавно меня спросили о том как вывести html, php код в статье — на что я ответил «Плагином». Да, речь сейчас пойдет о плагине. Но вот о всех его настройках знают далеко не все. Кто уже догадался в чем подвох — можно не читать.

Так вот. Как оказалось — далеко не все блоги вообще пытаются выводить код на своих страницах. А почему? Да потому что блоггеры, когда пытаются вставить код в статью — получают не совсем то что хотели. Ну, ты понимаешь. Ты хочешь вставить код типа

<script> ...кусок кода... </script>

А браузер понимает это по другому, он думает что этот кусок кода надо исполнять, а не показывать текстом. И пытается его выполнить или в лучшем случае выведет криво.

Да и я у меня было раньше такое. Когда кусок кода вставил и сайдбар исчез у блога. А потом сидишь и думаешь что не так сделал, вроде только статью написал, а блог уже поломан.

Может быть тебе уже приходилось сталкиваться с подобным? Расскажи в каментах.

Есть конечно еще один вариант, вставить код в визуальный редактор. Я то обычно пользуюсь HTML редактором. А вот в визуальном редакторе можно вставить код и да — он покажется просто как код. Но вот смотрится как он показывается

<script> …кусок кода… </script>

Как-то не красиво, правда? Просто и очень сухо. Гораздо красивее вот так:

    var copytext = selection + pagelink;
    var newdiv = document.createElement('div');
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
    body_element.appendChild(newdiv);

Даже с подсветкой. Видишь?

Скачиваем, устанавливаем, активируем.

Теперь нам активна возможность вставлять код в страницу. Чтобы этот код показывался каждому читателю. Осталось только разобраться как это сделать.

Смотри !

<pre lang="LANGUAGE" line="1"> ...кусок кода... </pre>

Теперь по порядку:
Вместо LANGUAGE — можно вставить любой язык, который хочешь, например php, css, java и т.п.

Цифра возле слова «line» — означает с какого числа будет начинаться отсчет строк. В нашем случае первая строка будет под номером «1». Некоторые начинаются с нулевой строки. Некоторые хотят показать кусок середины кода и начинают, скажем, с 132 строки и т.д. Этот параметр не обязательный.

Можно Line вообще не указывать — в этом случае строки будут просто без нумерации.

Ну вот пару примеров, например, PHP будет выглядеть так:

1
2
3
4
5

<!--?php 
  function in4wp() {
    echo "Hello World!\\n";
  }
?-->

Java — вот так:

1
2
3
4
5

public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

Ruby вот так:

1
2
3
4
5

class Example
  def example(arg1)
    return "Hello: " + arg1.to_s
  end
end

Языков, синтаксисов, на самом деле оооочень много. Вот лишь список самых популярных:

abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit, avisynth, bash, bf, bibtex, blitzbasic, bnf, boo, c, 
c_mac, caddcl, cadlisp, cil, cfdg, cfm, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, 
fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, 
javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc,
 modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief,
 php, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, 
scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, 
visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, z80

Даже если тебя не устраивает подсветка языка — ты можешь самостоятельно настроить её. Конечно, если есть определенные навыки.

Нужно всего лишь самостоятельно поменять цвета в .php файле нужного языка в папке /wp-syntax/geshi/geshi/. Если у тебя есть желание, но нет навыков — не беда. Обращайся ко мне, в поддержку читателя.

Цель плагина — упростить работу с кодом новичку. А именно, уже в визуальном редакторе этот плагин добавляет кнопку для вывода кода с подсветкой на странице твоей статьи.

Вот в принципе и всего делов-то. Проверял я эти штуки на WordPress версии 4.01 — все работает. Единственный касяк — это окошко в визуальном редакторе не до конца раскрвается. Ну, на скринах это видно. Интересно, может это только у меня такая проблема? Если у тебя тоже такая фигня — напиши об этом.

А также прошу отозваться всех, кто знает другие плагины для вывода html, php кода на странице — будем коллекцию собирать. Пиши каменты и подписывайтесь на мой блог.

С уважением, Денис Тумилович.

(1 голоса (ов), оценка: 5,00 из 5)

Loading...