Номера строк в блоках кода

[Lilly (Lillian)]

	Краткое описание	Добавляет номера строк к многострочным блокам кода в сообщениях
	Предпросмотр	Предпросмотр в Discourse Theme Creator
	Репозиторий	https://github.com/Lillinator/code-block-line-numbers
	Инструкция по установке	Как установить тему или компонент темы
	Новичок в темах Discourse?	Начинающий путеводитель по использованию тем Discourse

Установить этот компонент темы

Описание

Это простой компонент темы, который добавляет номера строк к блокам кода в сообщениях Discourse. Он не добавляет номера строк для встроенного кода, блоков менее чем из 2 строк или для цитируемых блоков кода. Также он игнорирует блоки кода из GitHub onebox. Кроме того, компонент позволяет изменить размер шрифта и добавить заголовок, который будет отображаться перед языком кода (если он указан после первой разметки кода).

Благодарим @Don за отличную работу в этом проекте.

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

Тёмная тема, с заголовком:

Светлая тема, без заголовка — в предпросмотре:

Результат в сообщении:

Существует два параметра настройки.

Параметр	Описание
code-block header title	Добавляет текстовый заголовок к блокам кода перед указанием языка кода (оставьте пустым, если заголовок не нужен)
code-block text size	Размер текста в пикселях для блоков кода (оставьте пустым для значения по умолчанию)

---

Примечание: если вы используете CSS для обёртывания блоков кода на вашем форуме, этот компонент будет учитывать эту обёртку.

[Jagster (Jakke Flemming)]

Без усилий, но при копировании эти номера строк не переносятся, верно?

[Lilly (Lillian)]

Да нет, они не работают в цитируемых блоках кода.

[hoangphuctran93 (Hoàng Phúc Trần)]

Пожалуйста, добавьте возможность выбора тёмной или светлой темы, так как моя страница обсуждений по умолчанию использует светлую тему, но в блоках кода применяется тёмная тема в стиле GitHub.

Вот текущее состояние, когда страница Discourse использует светлую тему, а блок кода настроен на отображение в тёмном стиле GitHub:

---

Также я делюсь некоторыми настройками отображения блоков кода на моей странице Discourse.
Надеюсь, это будет полезно кому-то и сделает страницу Discourse более интересной.

/*CSS Кодблок в стиле macOS*/
.codeblock-buttons {
    box-shadow: 0px 0px 10px rgba(0,0,0,.4);
    border-radius: 7px 7px 0 0;
    display: flex;
    flex-direction: column;
    &:before{
        content:'Business Lab';
        display: grid;
        justify-content: center;
        font-family: var(--d-font-family--monospace);
        font-weight: bold;
        padding: 5px;
        background-color: #E8E6E8;
        color: black;
        order:1;
    }
    &:after{
        content:"";
        width: 12px;
        height: 12px;
        display: inline-block;
        border-radius: 15px;
        margin-left: 2px;
        border-width: 1px;
        border-style: solid;
        background: #EC6A5F;
        border-color: #D04E42;
        order:2;
        position: absolute;
        top: 10px;
        left: 5px;
    }
    & .codeblock-button-wrapper{
        right: .5rem !important;
        top: .25em !important;
        order:3;
        width: 100%;
        &:before{
            content:"";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 15px;
            margin-left: 2px;
            border-width: 1px;
            border-style: solid;
            background: #F5C04F;
            border-color: #D6A13D;
            position: absolute;
            top: 6.5px;
            left: 30px;
        }
        &:after{
            content:"";
            width: 12px;
            height: 12px;
            display: inline-block;
            border-radius: 15px;
            margin-left: 2px;
            border-width: 1px;
            border-style: solid;
            background: #64CC57;
            border-color: #4EA73B;
            position: absolute;
            top: 6.5px;
            left: 48px;
        }
        & .btn.nohighlight{
            padding: .7em;
            float: right;
            &.copy-cmd{
                position: absolute;
                right: 0px;
            }
            &.fullscreen-cmd{
                position: absolute;
                right: 3.2em;
            }
            &.copy-cmd:not(.action-complete), &.fullscreen-cmd:not(.action-complete){
                opacity: 1;
                visibility: visible;
            }
        }
    }
    & code{
        order:4;
    }
}

/*CSS Номера строк в блоке кода Discourse*/
code{
    &.lines-decorator{
        padding: 0px;
        &.lines-shadow{
            background-image: linear-gradient(to right, var(--github) 25%, transparent), linear-gradient(to left, var(--github) 25%, transparent), linear-gradient(to right, var(--github), transparent), linear-gradient(to left, var(--github), transparent);
        }
        &.lines-number:not(.lines-count-1):not(.lines-in-quote) span.lines-line::before{
            background-color: #263238;
            color: rgba(233, 237, 237, 1);
        }
    }
    
}

Более подробную информацию можно найти здесь.

[Lilly (Lillian)]

Codeblock Theme Picker

Summary Codeblock Theme Picker will allow you to easily change the theme used in code blocks. Preview Preview on Discourse Theme Creator Repository Link https://github.com/discourse/hljs-theme-picker New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features [Some examples of the colors available] This is just a handful of the available options. This component incl…

[robbie.morrison]

Есть ли шанс, что эта функция будет добавлена в основную ветку Discourse? Мой бюджетный план хостинга, который я использую, не поддерживает дополнительные плагины и подобное. А это выглядит очень полезным. Спасибо @Lilly и другим разработчикам и тестировщикам.

[merefield (Robert)]

Это не плагин. Это компонент темы. Насколько я знаю, вы не ограничены в использовании компонентов темы?

[robbie.morrison]

@merefield Спасибо. Я только что подал запрос на уточнение своему провайдеру и получил номер тикета. Если возникнут какие-либо важные новости, я сообщу.

[robbie.morrison]

Это действительно вопрос для администраторов! Я перешёл по ссылке https://meta.discourse.org/t/code-block-line-numbers/330130, нажал синюю кнопку «Установить этот компонент темы», ввёл название своего форума и подтвердил действие через интерфейс форума. Пока всё хорошо.

Эта функция была отображена как компонент (полагаю, технически это компонент темы) и показывает версию 0.0.2. Однако диалоговое окно предполагает, что этот артефакт в данный момент считается «неиспользуемым компонентом». И простые тесты с использованием синтаксиса трёх обратных кавычек ``` не отображали номера строк.

Нужно ли мне сделать что-то ещё? Заранее спасибо.

[Lilly (Lillian)]

@robbie.morrison, пожалуйста, прочитайте пост темы (первый пост в этой теме), так как он содержит всю необходимую вам информацию, а также обратитесь к этим инструкциям, если вы устанавливаете компоненты темы на своём экземпляре.

Installing a theme or theme component

This is a guide for installing and managing themes and theme components in Discourse. Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

[merefield (Robert)]

@Робби Моррисон

Есть ли что-то ещё, что мне нужно сделать?

Да. Добавьте компонент в тему (или темы) (иначе он останется «Неиспользованным») и активируйте тему, если она ещё не активна.

[robbie.morrison]

@merefield @Lilly Большое спасибо. Мне нужно было добавить этот компонент темы к моей теме «по умолчанию». Как описано здесь: добавление компонентов к теме. Это работает (замечу, что ранее я добавил неправильный скриншот):

Несколько комментариев по документации. Правильное расположение, как я полагаю: Компоненты → Настроить → Темы. И раздел о добавлении к темам (см. ссылку выше) звучит несколько более по желанию, чем это есть на самом деле. Возможно, формулировка была бы лучше такой: «Вам нужно явно добавить компонент вашей темы к теме, прежде чем она станет рабочей. Это относится и к теме «по умолчанию».

Спасибо всем за интерес и время. У меня также есть небольшой отчёт об ошибке для следующего сообщения.

[robbie.morrison]

Мой отчёт об ошибке, как и обещал. Приведённый ниже блок кода с GitHub уже был пронумерован по строкам. После установки компонента темы под названием Discourse Code Block Line Numbers были добавлены чередующиеся пустые строки.

Оригинальная публикация находится здесь. Информация поступила через простую ссылку. Подробнее о диаграммах Санкей на английском языке Википедии для тех, кто заинтересован!

Уточнение: под чередующимися пустыми строками я имею в виду полностью пустые строки без какого-либо текста. Предыдущее отображение не было оформлено таким образом.

[Lilly (Lillian)]

Ах да, проблема с номерами строк на GitHub. Я займусь этим на этой неделе, когда освобожусь, и добавлю туда условную проверку. Спасибо!

[Lilly (Lillian)]

Я внес некоторые улучшения в этот компонент, а также добавил несколько настроек: возможность добавлять заголовок в блоки кода и изменять размер шрифта. Также исправил проблемы с форматированием одноблочного блока GitHub (спасибо за PR, @gormus! ). Обновил исходный пост, добавил новые скриншоты и ссылку на предварительный просмотр создателя темы.

[Lilly (Lillian)]

Этот компонент снова обновлён — я исправил ошибку, из-за которой заголовок отображался на диаграммах Mermaid.

Также @Don немного рефакторил js, почистил код и добавил более приятное форматирование, включая рамку и указание языка кода в заголовке, если оно указано в посте. (Спасибо, Дон ).

Обновлено описание OP и скриншоты.

[Yt.w]

Здравствуйте, этот компонент темы выдает мне ошибку следующего вида:

Ошибка: Undefined mixin. ╷ 17 │ @include sticky; │ ^^^^^^^^^^^^^^^ ╵ line-numbers.scss 17:9 @import /var/www/discourse/common.scss 1:570 root stylesheet

[Arkshine]

Миксин sticky был удалён из ядра в недавнем PR.
Я создам PR!

---

Вот он:

DEV: Inline the sticky mixin (#17)

[Lilly (Lillian)]

Объединено. Спасибо @Arkshine