Як вставити код в статтю на wordpress красиво і ефектно

Як вставити код в статтю на wordpress красиво і ефектно

Погода речі, нарешті, стала зимової. За кілька днів до Нового року на вулиці були калюжі, а зараз лежить сніг, і температура - мінус 20. Мене це радує. Люблю справжню зиму.

Але сьогодні не про це. Сьогодні я вирішив, нарешті, розповісти вам, як вставити код в статтю на wordpress. Уже кілька разів обіцяв написати про це, і ось настав цей момент.

Давайте спочатку розберемося, навіщо це взагалі потрібно і кому це може стати в нагоді.

Мені здається, що це може стати в нагоді тільки тим, хто веде свої блоги на теми, пов'язані зі створенням сайтів, з різними мовами програмування і інші суміжні тематики.

Хтось запитає: «навіщо якось по-особливому розміщувати код, можна ж просто вставити як звичайний текст і не морочитися зовсім?»

Дійсно, в цьому немає суворої необхідності, але завдяки цьому:

Загальний алгоритм розміщення коду виглядає в такий спосіб:

Як бачите, процес не найпростіший, але і не складний.

Крок 1. У першу чергу необхідно встановити плагін wp-syntax. Зробити це можна через адмін панель вордпресс. Складнощів тут за визначенням виникнути не повинно.

Крок 2. Якщо плагін встановлений, то сміливо можете просто вставити потрібний вам шматок коду в призначене для нього місце.

Крок 3. Далі переходимо в режим «текст». Знаходимо наш код. На самому початку ставимо відкриває тег

, а в кінці ставимо закриває 
.

Крок 4. Усередині відкриваючого тега

 потрібно ще вказати мову. Робиться це в такий спосіб:

. 

Замість html можна підставити і інші мови, наприклад, php або css. Для кожної мови у цього плагіна свій стиль відображення.

По суті, на даному етапі вже можна зупинитися, зберегти зміни і подивитися, як виглядає ваш код в статті.

Але я рекомендую додати ще два властивості всередині тега

:

Наприклад, «<» шифруется так «<», а «>»Ось так« gt; »

Щоб код відображався коректно, слід додати властивість escaped = "true".

А якщо ви хочете додати нумерацію рядків, то буде потрібно таку властивість, як line = "1".

Упевнений, що у Line є й інші значення, крім одинички, але я не шукав на цю тему інформацію, так як мені це не потрібно, я завжди ставлю одиничку або взагалі не використовую це властивість.

Важливо. Escaped і Line вставляються всередині відкриваючого тега

.

У результаті повинно вийти приблизно ось так:

KOD

Зауваження. Лапки необхідно ставити, використовуючи англійську клавіатуру. У мене це клавіша з російською літерою «Е».

Ось загалом то і все. Використовуйте дану конструкцію, і код на вашому сайті буде виглядати ефектно і красиво. Новомосковсктелі оцінять ваші старання.

З повагою! Абдуллін Руслан

Ось, до речі, про escaped = «true» не знав, треба буде використовувати, а то набридло вже шукати в коді знак менше і замінювати його. А я користуюся трохи іншою версією - Bootstrap і Google-code-prettify. У ній просто відкривається код таким тегом pre class = "prettyprint". Ну і треба завантажити пару скриптів і підключити їх до сторінці) Мова програмування скрипт сам визначає, але можна і вказати явно, якщо якийсь специфічний.

А я якось навіть і не пробував різні варіанти таких плагінів. Знайшов wp-syntax і відразу на ньому і зупинився.

Намагався ще знайти варіанти, щоб все відбувалося автоматично шляхом натискання на одну кнопку, але таких взагалі не знайшов.

Якщо хто знає, прошу поділитися)))

Теж спочатку хотів зробити за допомогою плагіна.

Але результат мене не влаштував.

Паралельно адаптував сайт під мобільні пристрої. Ніяк не міг впоратися з горизонтальною прокруткою.

Пошуки в інтернеті увінчалися успіхом.

Натрапив на оформлення стилями цитат. Тепер оформляю текст як хочу.

Щоб все не запам'ятовувати, але оформляти швидко, зробив «шпаргалку» на своєму блозі у вигляді домена третього рівня.

Особлива подяка за «лапки». Сам не зміг розібратися і зрозуміти.

Схожі статті