Кастомизация шаблонных блоков для кода и примеров текста

Последние изменения: 11.10.2023

Если вы уже ознакомились с дополнительными возможностями оформления статей базы знаний, то знаете, как кастомный CSS преображает статьи базы знаний. Но нередко созданные блоки хочется подстроить под конкретную задачу, а прописывать inline-стили сложно и долго, а возможности при таком подходе ограничены.

В самой статье можно прописать или изменить готовые CSS объекты. Эту задачу решают стили, прописанные в теге style, но этот вариант подойдет только для одной статьи. Если стили сложные, нужно потратить много времени, чтобы учесть все параметры исходного блока.

Чтобы упростить себе задачу, используйте шаблонные CSS блоки. Создавайте сколько угодно доработок и решайте несколько задач разом.

Создание и донастройка кастомного блока

Пример «сырого» CSS блока, который в тегах не прописывается:

.omni_block {
    display: block;
    position: relative;
}
.omni_block code {
    font-family: Consolas, Menlo, Monaco, monospace;
    line-height: 1.5rem;
    min-width: 100%;
    word-break: normal;
    border: 1px solid #d9d9d9;
    border-radius: 3px;
    padding-top: 36px !important;
}
.omni_block code::before {
    color: #f8f8f8;
    font-family: "Font Awesome 6 Pro";
    left: 0;
    padding: 3px 0;
    position: absolute;
    text-indent: 15px;
    top: 0;
    width: 100% !important;
    border-radius: 3px 3px 0 0;
}
.omni_block code::after {
    color: #f8f8f8;
    font-family: Consolas, Menlo, Monaco, monospace;
    left: 0;
    padding: 3px 0;
    position: absolute;
    text-indent: 40px;
    top: 0;
}

Чтобы создать дополнительный блок, достаточно добавить всего несколько параметров, например:

.omni_block.html code::before {
    content: "\e322";
    background: #ea6c39;
}
.omni_block.html code::after {
    content: "HTML";
}

В результате, когда вы укажите в теге div в исходном коде статьи class="omni_block html", блок отобразится так:

<div class="omni_block html">
    <code class="language-html">[HTML-разметка]</code>
</div>

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

Как подсветить синтаксис кода мы описали в этой статье.

О том, как добавить скрипт, который позволит копировать готовый блок, описали здесь.

Примеры

JSON

"case" : {
    "subject" : "Test subject changed",
    "status" : "closed",
    "priority" : "critical",
    "language_id" : 2,
    "custom_fields" : {
      "cf_25" : "some text",
      "cf_30" : "another field"
    },
    "add_labels" : [103, 104]
  }
}

CSS кастомного блока «JSON»

.omni_block.json code::before {
    background: #947baa;
    content: "\e322";
}
.omni_block.json code::after {
    content: "JSON";
}

HTML-разметка кастомного блока с кодом в формате JSON

<div class="omni_block json">
    <code class="language-json">[JSON-запрос]</code>
</div>

PHP

use Telegram\Bot\Api;

    include "widget_telegram.php";

    $telegram = new Api('BOT TOKEN');

    $response = $telegram->sendMessage([
      'chat_id' => 'CHAT_ID',
      'text' => 'Привет, я бот!',
      'reply_markup' = array(
         'keyboard' => array(array('Связаться с оператором')),
         'one_time_keyboard' => true,
         'resize_keyboard' => true
      );
    ]);

    $messageId = $response->getMessageId();

CSS кастомного блока «PHP»

.omni_block.php code::before {
    background: #096e7a;
    content: "\e322";
}
.omni_block.php code::after {
    content: "PHP";
}

HTML-разметка кастомного блока кода в формате PHP

<div class="omni_block php">
    <code class="language-php">[PHP-код]</code>
</div>

CSS

.linelinks {
    display: grid;
    gap: 15px;
    align-items: center;
    margin: 20px 0;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 1fr;
    align-items: center;
    box-sizing: border-box;
}
.linelinks a {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 17px;
    background-color: #377de9;
    border: 0;
    border-radius: 6px;
    text-align: center;
    box-shadow: 1px 2px 5px rgba(0,0,0,.2), 0px 1px 1px rgba(0,0,0,.3);
    padding: 15px;
}

CSS кастомного блока «CSS»

<div class="omni_block css">
    <code class="w3-code cssHigh notranslate">[CSS-стили]</code>
</div>

HTML-разметка кастомного блока для CSS-стилей

<div class="omni_block css">
    <code class="w3-code cssHigh notranslate">[CSS-стили]</code>
</div>

JavaScript

/**
* Вставка в конец или в начало элемента
*/
var addCode = function(selector, htmlCode, after) {
    var element = $(selector);

        if(checkNotUndefined(after) === true && after === true) {
            element.append(htmlCode);
        } else {
            element.prepend(htmlCode);
    }
};

CSS кастомного блока «JavaScript»

.omni_block.js code::before {
    background: #e7a736;
    content: "\e322";
}
.omni_block.js code::after {
    content: "JavaScript";
}

HTML-разметка кастомного блока для кода в формате JavaScript

<div class="omni_block js">
    <code class="language-js">[JS-код]</code>
</div>

SQL

CREATE TABLE `table1` (`user_id` INT(5) NOT NULL AUTO_INCREMENT, `username` VARCHAR(50), PRIMARY KEY(`user_id`), INDEX(`username`));
CREATE TABLE `table2` (`phone_id` INT(5) NOT NULL AUTO_INCREMENT, `user_id` INT(5) NOT NULL, phone_number INT(10) NOT NULL, PRIMARY KEY (`phone_id`), INDEX(`user_id`, `phone_number`));
CREATE TABLE `table3` (`room_id` INT(5) NOT NULL AUTO_INCREMENT, `phone_id` INT(5) NOT NULL, `room_number` INT(4) NOT NULL, PRIMARY KEY(`room_id`), INDEX(`phone_id`, `room_number`));

CSS кастомного блока «SQL»

.omni_block.sql code::before {
    background: #3684ee;
    content: "\e322";
}
.omni_block.sql code::after {
    content: "SQL";
}

HTML-разметка кастомного блока для кода в формате SQL

<div class="prettyprint">
    <code class="language-sql">[sql-код]</code>
</div>

Java

public class MyFirstApp {    
    public static void main(String[] args) {
        System.out.println("Write once, run anywhere");
    }
}

CSS кастомного блока «Java»

.omni_block.java code::before {
    background: #ec2025;
    content: "\e322";
}
.omni_block.java code::after {
    content: "Java";
}

HTML-разметка кастомного блока для кода в формате Java

<div class="omni_block java">
    <code class="prettyprint">[java-код]</code>
</div>

Python

Для кода на языке Python указывайте class="w3-code pythonHigh notranslate". Пример Python-кода с подсвеченным синтаксисом:

var_1 = int(input("Введите число: "))
agregator = []
for i in range(1, var_1+1):
    print(i, sep=" ", end=" ")
    if i < var_1:
        print("+", sep=" ", end=" ")
    agregator.append(i)
print("=", sum(agregator))
# Вывод:
Введите число: 18
1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + 13 + 14 + 15 + 16 + 17 + 18 = 171

CSS кастомного блока «Python»

.omni_block.python code::before {
    background: #417bac;
    content: "\e322";
}
.omni_block.python code::after {
    content: "Python";
}

HTML-разметка кастомного блока с кодом в формате Python

<div class="omni_block python">
    <code class="prettyprint">[Python-код]</code>
</div>

Kotlin

fun main() {
  for (chars in 'a'..'x') {
    println(chars)
  }
}

CSS кастомного блока «Kotlin»

.omni_block.kotlin code::before {
    background: #8357ff;
    content: "\e322";
}
.omni_block.kotlin code::after {
    content: "Kotlin";
}

HTML-разметка кастомного блока с кодом в формате Kotlin

<div class="prettyprint">
    <code class="language-kotlin">[Kotlin-код]</code>
</div>

C++

// Your First C++ Program

#include <iostream>

int main() {
    std::cout << "Hello World!";
    return 0;
}

CSS кастомного блока «C++»

.omni_block.cpp code::before {
    background: #1f3b73;
    content: "\e322";
}
.omni_block.cpp code::after {
    content: "C++";
}

HTML-разметка кастомного блока с кодом в формате C++

<div class="prettyprint">
    <code class="language-Cpp">[C++-код]</code>
</div>

Автоответы

Здравствуйте!

Мы получили ваше обращение и ответим на него, как только закончатся праздники.
      
Сейчас наша команда отдыхает и набирается сил, чтобы вернуться и работать с полной отдачей :)

CSS кастомного блока «Автоответы»

.omni_block.text_a code::before {
    background: #546e7a;
    content: "\f031";
}
.omni_block.text_a code::after {
    content: "";
}

HTML-разметка кастомного блока для примеров текста

<div class="omni_block text_a">
    <code>[Текст]</code>
</div>

Тексты

Ограничение на количество запросов — 500 запросов в час на активного сотрудника (за исключением лёгких — доступ «только просмотр»), но не менее 1000 запросов в час. К примеру, если у вас 15 активных сотрудников, лимит вашего аккаунта — 7500 запросов в час. При превышении лимита выдаётся сообщение с ошибкой.

Количество оставшихся API-запросов при любом запросе можно отследить в заголовках ответа через параметр: api_calls_left

CSS кастомного блока «Текст»

.omni_block.text code::before {
    background: #256f68;
    content: "\f15c";
}
.omni_block.text code::after {
    content: "Текст";
}

HTML-разметка кастомного блока для примеров текста

<div class="omni_block text">
    <code>[Текст]</code>
</div>

PRO Подсказка

Чтобы прописать стили для определенного блока в статье, пропишите дополнительные стили элемента в режиме исходного кода:

<style>
.omni_block.text.api-calls code::after {
    content: "Лимиты API";
}
</style>

Перейдите в исходный код статьи и добавьте класс объекта в нужный тег, например:

<div class="omni_block text api-calls">
    <code>[Текст]</code>
</div>

В результате блок, в теге которого прописан дополнительный объект class="omni_block text api-calls", отобразится так:

Ограничение на количество запросов — 500 запросов в час на активного сотрудника (за исключением лёгких — доступ «только просмотр»), но не менее 1000 запросов в час. К примеру, если у вас 15 активных сотрудников, лимит вашего аккаунта — 7500 запросов в час. При превышении лимита выдаётся сообщение с ошибкой.

Количество оставшихся API-запросов при любом запросе можно отследить в заголовках ответа через параметр: api_calls_left

Помогла ли вам статья?