Как добавить пример кода в статью с помощью Визуального редактора TinyMCE на примере Joomla 3

В последних версиях Joomla в редакторе TinyMCE появилась встроенная возможность вставки размеченного кода непосредственно в публикацию. В этой статье подробно рассмотрим поэтапно, как вставить код в статью на сайте с помощью встроенного визуального редактора TinyMCE, как это выглядит в виде HTML-кода, как выглядит в окне самого редактора TinyMCE и как в конечном счёте это отображается на сайте для пользователей.

Честный VDS/VPS, на котором «Лунная База» живет уже 20+ лет

Задумываетесь о том, чтобы поднять свой pet-проект, сайт клиента или настроить окружение для разработки? Уже пора подумать, где арендовать железо.

Лунная База хостится на FirstVDS более 20 лет. Мыслей о том, чтобы перебраться на другой хостинг, не было ни разу (хотя опыт работы с другими вариантами, конечно, есть).

Бывали разные ситуации, но они бывают на любом железе. Главное, что нужно понять: здесь нет маркетинговой шелухи и сказок про «мы всё сделаем за вас». Если вы берете VDS — вам дают полный root, возможность накатить любую ОС и не лезут в ваши конфиги.

Если в саппорт написать с вопросом по вашему коду и получить ответ: «Читайте документацию и разбирайтесь сами» или «Обратитесь к профильному специалисту» — это не повод обижаться. Это повод углубить свои знания в DevOps и сайтостроении! Бегите от тех, кто пообещает: «Мы всё чиним и настраиваем абсолютно бесплатно!». Никто никогда не работает «по доброте душевной» в ущерб себе, а бесплатный сыр в администрировании обычно заканчивается сломанной базой данных.

Что по факту: Гибкое масштабирование ядер и RAM, экономия по сравнению с физическими серверами и адекватная панель ispmanager, если она вам нужна.

Посмотреть тарифы VDS/VPS

Как выглядит кнопка вставки кода в кнопках-иконках встроенного визуального редактора TinyMCE

Сразу хочу привести внешний вид кнопки вставки кода в кнопках-иконках встроенного визуального редактора TinyMCE. Выглядит она так:

Как вставить код в статью с помощью Визуального редактора TinyMCE на примере Joomla 3

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

После этого нужно кликнуть левой кнопкой мышки по кнопке вставки кода:

Описанное выше действие откроет новое окно «Добавить/Изменить пример кода» в котором будет два поля. Верхнее поле «Язык» выполнено в виде выпадающего списка из которого можно выбрать тот язык, код которого будет вставлен в статью на сайт:

• HTML/XML
• JavaScript
• CSS
• PHP
• Ruby
• Pyton
• Java
• C
• C#
• C++

Поле «Язык» в окне «Добавить/Изменить пример кода» выглядит так:

После выбора языка нужно вписать или вставить скопированный кусок кода в текстовое поле и нажать кнопку «Ok» внизу окна:

Окно «Добавить/Изменить пример кода» автоматически закроется, а в выбранном месте в окне редактора TinyMCE появится вставленный фрагмент кода:

Если посмотреть в исходный HTML-код документа, то можно увидеть, что вставленный фрагмент кода обрамлён двумя тегами:

<pre class="language-markup">
 <code>
  тут собственно вставленный код
 </code>
</pre>

В окне с выключенным редактором это выглядит так:

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

После сохранения статьи, код вставляется согласно правилам CSS, описанных в соответствующих файлах + все строчки пронумерованы. И выглядит это примерно так:

Таким вот образом, используя кнопку «Добавить/Изменить пример кода» в Визуальном редакторе TinyMCE очень просто вставлять код прямо в статью.

Самый честный хостинг за 20+ лет существования Лунной Базы

Задумываешься о том, чтобы поднять свой сайт в Интернете? Уже пора подумать о том, какой хостинг выбрать?

Лунная База хостится 20+ лет на firstDVS. При этом, мыслей о том, чтобы перебраться на другой хостинг не было. (Но, при этом есть опыт работы с другими вариантами.)

Бывали с firstDVS разные ситуации, но, они бывают на всех хостингах. Единственное, что тут важно понять, - это то, что никто ничего тебе не будет впаривать... Но, и работать за тебя тоже никто не станет. Если в саппорт ответили: «Читайте по ссылке и разбирайтесь сами...» или вообще «Обратитесь за помощью к специалисту», - это повод углубить свои знания в области сайтостроения, а не бежать к тем, что пообещают: «Мы всё чиним и всё делаем за своих клиентов абсолютно бесплатно!» Никто никогда ничего ни за кого "по доброте душевной" не делал, не делает и не будет делать!

Выбрать