Vue code markup

English | Русский

Данный плагин создавался для документирования кода. Обычно для этого используется "storybook", но это не подходит для тех случаев, когда человек для которого этот код документируется не является frontend-разработчиком. Он в "storybook" не разберётся. Мне нужно было написать один компонент для "vue.js" и описать как он работает для backend разработчика, чтобы он мог им пользоваться. По сути это была детальная инструкция по использованию, основам "vue.js", со множеством примеров.

В качестве редактора я использую "Visual Studio Code", мне очень нравится тема "darcula", её я и взял в качестве основной для моего плагина. В будующем я планирую сделать другие темы: "monokai", "gitHub theme" и др. Если у вас стоит задача по документированию кода, то я думаю, что мой плагин вам подойдёт. Есть и другие плагины позволяющие вывести код, но там по сути 2-3 цвета, и они не яркие. С моим плагином, ваша документация станет ярче.

Основной упор будет делаться на написание документации для vue.js компонентов.

Глобальная установка, подключение плагина

Для установки моего плагина необходимо иметь установленный node.js и npm последней версии. В терминале нужно ввести следующую команду:

npm install vue-code-markup

После установки, если никаких ошибок не возникнет, нужно подключить мой плагин следующим способом:

import { createApp } from 'vue';
import App from './App.vue';
import CodeMarkup from 'vue-code-markup';
import 'vue-code-markup/lib/style.css';

const app = createApp(App);
app.use(CodeMarkup);
app.mount('#app');

Возможно подключить только CSS и отдельные компоненты, как это сделать я опишу ниже.

Главные компоненты

Это компоненты в которые должны быть обёрнуты все остальные компоненты, без них вся стилизация не имеет никакого смысла. Это "code-markup" и "code-line". Сode-markup - это самый главный компонент, в него должны быть обернуты все остальные компоненты, по сути это окно редактора, в котором находятся строки кода и примеры кода. Сode-line - это линия, или строка с кодом, все остальные компоненты должны быть обёрнуты им.

Компонент code-markup

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

<template>
  <code-markup>
    <!-- component content -->
  </code-markup>
</template>

<script setup>
  import { CodeMarkup } from 'vue-code-markup';
  import 'vue-code-markup/lib/style.css';
</script>

Я бы вам советовал посмотреть документаци на github pages, там можно поменять параметры и посмотреть, что изменится. Данный компонент имеет следующие входные параметры:

theme - данный параметр отвечает за тему, которая будет применена к окну с кодом. На данный момент времени я реализовал 2 темы: "darcula" и "monokai". "Darcula", тема по умолчанию, если вы зададите несуществующее название темы, или не зададите данный параметр, то будет применена она. В данный параметр можно вставить любое название темы. В таком случае стилизовать компонент нужно будет через следующий класс - "code-markup_theme-${название вашей темы}. Как создать свою тему я опишу ниже.

isHeader - данный параметр отвечает за отображение заголовка окна с кодом. Если вы собираетесь отображать заголовок, то данный параметр можно не задавать, он по умолчанию равен "true".

header - заголовок окна с кодом. По умолчанию не имеет значения.

isCount - данный параметр отвечает за отображение номера строки. Если его не задать, то строки будут пронумерованы, по умолчанию равен "true".

lineCount - данный параметр отвечает за то, сколько строк отображать. В него нужно передавать числа, если нужно отобразить все строки, то нужно задать значение "auto", или вообще не задавать данный параметр. По умолчанию задано значение "auto".

textBold - данный параметр отвечает за "толщину шрифта". По умолчанию задано "false".

headerBold - данный параметр отвечает за толщину шрифта заголовка окна с кодом. По умолчанию задано "false".

code - в данный параметр передаётся код, который нужно будет скопировать в буфер обмена. Это может быть как строка, так и объект.

title - подсказка, которая будет появляться при наведении на иконку "скопировать текст". По умолчанию задано значение "Copy code to clipboard". Как правило это нужно для интернационализации.

successfulText - подсказка, которая будет появляться при наведении на иконку "скопировать текст" после того, как текст будет скопирован. По умолчанию задано значение "The code is copied to the clipboard". Как правило это нужно для интернационализации.

errorText - подсказка, которая будет появляться при наведении на иконку "скопировать текст" в случае возникновении ошибки (если текст не получится скопировать). По умолчанию задано значение "An error occurred while copying the code to the clipboard". Как правило это нужно для интернационализации.

Компонент code-line

По сути это линия или строка с кодом. Элементы кода должны находиться в этом компоненте. Подключается он следующим способом:

<template>
  <code-markup>
    <code-line>
      <!-- component content -->
    </code-line>
  </code-markup>
</template>

<script setup>
  import { CodeMarkup, CodeLine } from 'vue-code-markup';
  import 'vue-code-markup/lib/style.css';
</script>

Такие входные параметры как "new", "deleted" и "changed" были взяты из Visual Studio Code. Они отображают новую, удалённую и строку в которой произошли изменения. К компоненту "code-line" должен быть применён только один из этих входных параметров. Первоначально я хотел задать какой-нибудь параметр, к примеру "type" и передаать в него одно из этих трех значений ("new", "deleted" и "changed"), но всё таки я решил от этого отказаться. Вы можете просто задать параметр "new" и строка будет отображаться как новая. Так будет удобнее. Если вы зададите для компонента "code-line" входные параметры "deleted" и "changed", то строка будет отображаться как изменённая, но будет иметь прозрачный текст от входного параметра "deleted". Стили для входного параметра "new" будут иметь наименьший приоритет, имейте это ввиду. Итак, данный компонент имеет следующие входные параметры:

new - в Visual Studio Code, когда добавляется новая строка, она отображается правой вертикальной линией, которая разделяет номер строки и текст строки. Данный параметр отображает эту линию. Вертикальная линия будет заметна только в том случае, если номера строк отображаются (включён параметр is-count). По умолчанию данный параметр отключен, те имеет значение false.

deleted - в Visual Studio Code, когда удаляется какая-либо строка, она отображается правой вертикальной линией, которая разделяет номер строки и текст строки. Данный параметр отображает эту линию. Вертикальная линия будет заметна только в том случае, если номера строк отображаются (включён параметр is-count). По умолчанию данный параметр отключен, те имеет значение false. Так же я делаю данную строку не много прозрачной, чтобы показать, что она удалена.

changed - в Visual Studio Code, когда происходят какие-нибудь изменения на строке, она отображается правой вертикальной линией, которая разделяет номер строки и текст строки. Данный параметр отображает эту линию. Вертикальная линия будет заметна только в том случае, если номера строк отображаются (включён параметр is-count). По умолчанию данный параметр отключен, те имеет значение false.

active - в Visual Studio Code активная строка отличается от других строк background-ом. Данный параметр включает background для строки. По умолчанию данный параметр отключен, те имеет значение false.

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

bold - делает текст жирным. Как правило это нужно для того, чтобы выделить строку, отделить её от других строк. Сделать так, чтобы пользователи обратили на неё внимание.

nonBold - делает текст обычным, не жирным, даже если для компонента родителя "code-markup" задан входной параметр "textBold". Этот параметр может пригодиться, если нужно выделить все строки кроме определённых. Жирный текст привлечёт внимание, а обычный текст покажет, что эти строки не изменились, или не важны.

visibleCopy - по умолчанию правый внутренний отступ для строки равен 5px. Возможна такая ситуация, что строк не много, и они достаточно длинные, таким образом кнопка "скопировать текст" будет перекрывать текст строки. При включении данного параметра будет появляться больший правый отступ, так, что можно будет прочитать текст. По умолчанию данный параметр отключен, те имеет значение false.

evel-2 - level-8 - код имеет определённую вложенность. Данные входные параметры нужны для того, чтобы сделать соответствующий отступ. Всего я предусмотрел 8 уровней вложенности, больше делать я смысла не вижу.

Компоненты для разметки документа

Если сравнивать с HTML, то эти компоненты можно назвать тегами из которых состоит документ. Как правило большая часть входных параметров такие же как у компонента "code-line". Основное их предназначение выделить конкретные куски кода. К примеру мы можем сделать всю строку жирной, а какой-то определённый кусок кода нет. Или мы можем сделать какой-то определённый кусок кода жирным, или зачёркнутым, или полупрозрачным. Все эти компоненты имеют следующие входные параметры:

• code - входной параметр в который передаётся текст для отображения элементов кода. Если вам нужно добавить в код картинки, то можно обойтись без данного входного параметра. Просто оберните нужный кусок кода этими компонентами, данные компоненты имеют нужные слоты. Если же такой необходимости у вас не возникает, то я бы посоветовал вам всё таки пользоваться данным входным параметром. Если он задан, то выведется содержимое входного параметра "code".
• lineThrough - данный входной параметр делает элемент код зачеркнутым. По сути данный входной параметр есть так-же у компонента "code-line", и делает он тоже самое.
• bold - данный входной параметр делает элемент кода жирным. По сути данный входной параметр есть так-же у компонента "code-line", и делает он тоже самое.
• nonBold - данный входной параметр делает текст обычным, не жирным. Даже если для компонента родителя "code-line" задан входной параметр "bold", или для компонента "code-markup" задан входной параметр "textBold", текст всё равно будет обычным. По сути данный входной параметр есть так-же у компонента "code-line", и делает он тоже самое.
• inactive - данный входной параметр делает текст кода не много прозрачным. Это хорошее средство привлечь внимание к определённым участкам кода.

Условно все компоненты для разметки документа можно разделить на общие компоненты, компоненты в блоке шаблона, компоненты в блоке скриптов, компоненты в блоке стилей.

Общие компоненты разметки документа:

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

• MuText - это обычный текст, в разметке это то, что заключено в одинарные, или двойные кавычки.
• MuNumber - это все цифры, которые встречаются в разметке.
• MuComment - это все комментарии, которые встречаются в разметке.
• MuType - это типовой текст. Если вы обернёте какой-нибудь текст компонентом "code-line", то обёрнутый текст будет того же цвета, что и цвет компонента "MuType".

Пример подключения общих компонентов:

<template>
  <code-markup>
    <code-line>
      <mu-text code="Some text" />
    </code-line>
    <code-line>
      <mu-number code="1234" />
    </code-line>
    <code-line>
      <mu-comment code="// Some comment" />
    </code-line>
    <code-line>
      <mu-type code="Type code" />
    </code-line>
  </code-markup>
</template>

<script setup>
  import {
    CodeMarkup,
    CodeLine,
    MuText,
    MuNumber,
    MuComment,
    MuType,
  } from 'vue-code-markup';
  import 'vue-code-markup/lib/style.css';
</script>

Компоненты для блока шаблона

Это компоненты, которые находятся в блоке "template". Также к этим компонента относятся сами блоки "template", "script", "style". Таких компонентов всего лишь 2:

• MuTag - это теги блока "template", а также названия блоков "template", "script", "style".
• MuAttr - это атрибуты тегов, к примеру "setup" для блока "script".

Пример подключения компонентов шаблона:

<template>
  <code-markup>
    <code-line>
      <mu-tag code="<script" />
      <mu-attr code=" setup" />
      <mu-tag code=">" />
    </code-line>
    <code-line>
      <mu-tag :code="`</${'script'}>`" />
    </code-line>
  </code-markup>
</template>

<script setup>
  import {
    CodeMarkup,
    CodeLine,
    MuTag,
    MuAttr,
  } from 'vue-code-markup';
  import 'vue-code-markup/lib/style.css';
</script>

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

Это компоненты которые находятся в блоке "script". Ниже я их перечислю:

• MuKey - если нужно отобразить объект, то для написания ключа объекта используется этот компонент.
• MuKeyWords - это ключевые слова, в JS таковыми словами являются import, export, const, let, var, fucntion и тд.
• MuVariable - если нужно отобразить название переменной, то используется этот компонент.
• MuFunction - если нужно отобразить название функци, то используется этот компонент.

Пример подключения компонентов для блока скриптов:

<template>
  <code-markup>
    <code-line>
      <mu-key-words code="const " />
      <mu-variable code="someObject" />
      =
      <mu-key-words code="ref" />
      ({
    </code-line>
    <code-line level-2>
      <mu-key code="key" />
      : value
    </code-line>
    <code-line>
    });
    </code-line>

    <code-line />

    <code-line>
      <mu-key-words code="function "/>
      <mu-function code="exampleFunction() "/>{
    </code-line>
    <code-line level-2>
      <mu-key-words code="return "/>
      <mu-variable code="someObject"/>
      ;
    </code-line>
    <code-line>
    }
    </code-line>
  </code-markup>
</template>

<script setup>
  import {
    CodeMarkup,
    CodeLine,
    MuKey,
    MuKeyWords,
    MuVariable,
    MuFunction,
  } from 'vue-code-markup';
  import 'vue-code-markup/lib/style.css';
</script>

Компоненты для блока стилей

Это компоненты которые находятся в блоке "style". Ниже я их перечислю:

• MuStyleClass - этот компонент используется для вывода классов.
• MuStyleId - этот компонент используется для вывода id-ов.
• MuStyleTag - этот компонент используется для вывода тегов.
• MuStyleKey - если нужно вывести код препроцессора (less или sass), то этот компонент нужен для создания вложенных правил. К примеру, если у нас есть класс ".book", и в нём лежит CSS компонент "&-item", то "&-item" нужно вывечти через "MuStyleKey".
• MuStyleParam - в этот компонент нужно будет положить свойства CSS элемента. Если объяснять более подробно, то этими свойствами являются margin, padding, font-size и тд.
• MuStyleUnitMeas - этот компонент нужен для вывода единиц измерения (em. rem, px и тд).
• MuStyleAmpersand - этот компонент нужен для вывода амперсанда (&).
• MuStyleCurlyBrace - этот компонент нужен для вывода фигурных скобок.

Данные компоненты подключаются следующим способом:

<template>
  <code-markup>
    <code-line>
      <mu-style-id code="#books-list {" />
    </code-line>
    <code-line level-2>
      <mu-style-param code="margin" />:
      <mu-number code=" 1" />
      <mu-style-unit-meas code="em" />
      <mu-number code=" 0 " />
      <mu-number code="2.5" />
      <mu-style-unit-meas code="em" />;
    </code-line>
    <code-line>
      <mu-style-id code="}" />
    </code-line>
    <code-line />
    <code-line>
      <mu-style-class code=".books-list {" />
      </code-line>
    <code-line level-2 >
      <mu-style-param code="line-height" />:
      <mu-number code=" 1.2" />;
      </code-line>
    <code-line />
    <code-line level-2 >
      <mu-style-tag code="h3 {" />
    </code-line>
    <code-line level-3 >
      <mu-style-param code="font-size" />:
      <mu-number code="1.2" />
      <mu-style-unit-meas code="em" />;
    </code-line>
    <code-line level-3 >
      <mu-style-param code="margin" />:
      <mu-number code=".4" />
      <mu-style-unit-meas code="em" />;
      <mu-number code=" 0 " />
      <mu-number code=".3" />
      <mu-style-unit-meas code="em" />
    </code-line>
    <code-line level-2 >
      <mu-style-tag code="}" />
      </code-line>
    <code-line />
    <code-line level-2 >
      <mu-style-ampersand code="&" />
      <mu-style-key code="-item" />
      <mu-style-curly-brace code=" {" />
    </code-line>
    <code-line level-3 >
      <mu-style-param code="margin" />:
      <mu-number code="1.5" />
      <mu-style-unit-meas code="em" />
      <mu-number code=" 0 " />;
    </code-line>
    <code-line level-2 >
      <mu-style-curly-brace code="}" />;
    </code-line>
    <code-line>
      <mu-style-class code="}" />
    </code-line>
  </code-markup>
</template>

<script setup>
  import {
    CodeMarkup,
    CodeLine,
    MuStyleClass,
    MuStyleId,
    MuStyleTag,
    MuStyleKey,
    MuStyleParam,
    MuStyleUnitMeas,
    MuStyleAmpersand,
    MuStyleCurlyBrace,
  } from 'vue-code-markup';
  import 'vue-code-markup/lib/style.css';
</script>

Слоты

Для данного раздела стоит начать сразу с примера, так будет понятнее:

<template>
  <code-markup>
    <template #default>
      <!-- Сюда вставляется код по умолчанию, если никаких других шаблонов не задано -->
    </template>
    <template #header>
      <!-- Сюда вставляется заголвок окна с кодом -->
    </template>

    <!-- Ниже находятся слоты для иконок "скопировать текст", "текст удачно скопирован" и иконка когда произошла ошибка во время копирования текста в буфер обмена -->
    <template #copy>
      <!-- Сюда вставляется иконка "скопировать текст" -->
    </template>
    <template #success>
      <!-- Сюда вставляется иконка, когда текст удачно скопирован в буфер обмена -->
    </template>
    <template #error>
      <!-- Сюда вставляется иконка, если произошла ошибка во время копирования текста в буфер обмена -->
    </template>
  </code-markup>
</template>

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

• default - это слот по умолчанию. Если вам не нужны другие слоты, то это будет слот когда вы оборачиваете что-то компонентом "code-markup".
• header - это слот для заголовка окна с кодом. Для его отображения входной параметр "isHeader" должен быть установлен в "true". Если задан входной параметр "header", то будет выведен он, а не содержимое слота. Как правило данный слот нужен для того, чтобы вставить на место заголовка окна с кодом текст с иконкой, какое-то HTML содержимое, какой-нибудь компонент VUE.js, привязать к заголовку какую-нибудь логику. На данной странице, я через данный слот делаю tab-ы.

Ниже находятся слоты для иконок "скопировать текст", "текст удачно скопирован" и иконка когда произошла ошибка во время копирования текста в буфер обмена.

• copy - данный слот нужен для того, чтобы заменить иконку "скопировать текст". В него можно вставить картинку, или svg-ку. Картинка или svg-ка займет всю ширину, высоту я не трогаю. Лучше сюда вставить квадратную иконку. Место для этого слота будет иметь ширину и высоту "1em".
• success - данный слот нужен для того, чтобы заменить иконку когда текст успешно скопирован в буфер обмена. В него так-же можно вставить картинку, или svg-ку. Картинка или svg-ка займет всю ширину, высоту я не трогаю. Лучше сюда вставить квадратную иконку. Место для этого слота будет иметь ширину и высоту "1em".
• error - данный слот нужен для того, чтобы заменить иконку когда произошла ошибка во время копирования текста в буфер обмена. В него так-же можно вставить картинку, или svg-ку. Картинка или svg-ка займет всю ширину, высоту я не трогаю. Лучше сюда вставить квадратную иконку. Место для этого слота будет иметь ширину и высоту "1em".

Стилизация компонентов

Данный раздел будет посвящён тому, как создавать свои темы, или стилизовывать существующие темы под свой проект. Данный раздел тесно связан с входным параметром "theme" для компонента "code-markup". На данный момент времени я сделал 2 темы: "darcula" и "monokai". За основу я взял тему "darcula", потому что она мне больше всего нравится.

Для того, чтобы создать свою тему, нужно добавить во входной параметр "theme" название своей темы. Если вы зададите название темы - "some-theme", то в таком случае CSS класс для стилизации будет выглядеть следующим образом "code-markup_theme-some-theme".

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

Общие настройки

--cm-bg - данная CSS переменная отвечает за фон окна с кодом.

--cm-border-radius - данная CSS переменная отвечает за "border-radius" окна с кодом.

--cm-text-font-size - данная CSS переменная отвечает за размер шрифта окна с кодом.

--cm-text-font-family - данная CSS переменная отвечает за семейство шрифта окна с кодом.

--cm-text-line-height - данная CSS переменная отвечает за высоту шрифта окна с кодом.

-cm-max-height-body - данная CSS переменная отвечает за максимальную высоту окна кода без шапки.

Стилизация заголовка окна с кодом

--cm-header-padding - данная CSS переменная отвечает за внутренние отступы для заголовка окна с кодом.

--cm-header-font-size - данная CSS переменная отвечает за размер шрифта для заголовка окна с кодом.

--cm-header-color - данная CSS переменная отвечает за цвет заголовка окна с кодом.

Стилизация номеров строк

--cm-count-bg - данная CSS переменная отвечает за фон для номеров строк.

--cm-count-color - данная CSS переменная отвечает за цвет текста для номеров строк.

--cm-count-padding - данная CSS переменная отвечает за внутренние отступы для номеров строк.

--cm-count-border-right - данная CSS переменная отвечает за цвет правого "border" для номеров строк.

Стилизация иконок "скопировать код"

В данном разделе речь пойдет о стилизации иконок "скопировать код". Я реализовал 3 состояния. Это обычное состояние, состояние, когда произошла ошибка во время копирования кода в буфер обмена, и состояние когда код успешно скопирован в буфер обмена. Для всех этих состояний у меня есть 3 разные иконки. Здесь будет описано как менять цвет этих иконок. Если вы через слоты вставите свои картинки, то данный блок вам не поможет. У меня эти иконки реализованы через SVG, я просто меняю их "fill".

--cm-icon-color - данная CSS переменная отвечает за цвет иконки "скопировать код".

--cm-icon-error-color - данная CSS переменная отвечает за цвет иконки "скопировать код", если произошла ошибка.

--cm-icon-is-copy-color - данная CSS переменная отвечает за цвет иконки "скопировать код", когда код успешно скопирован в буфер обмена.

Стилизация активной строки

--cm-active-bg - данная CSS переменная отвечает за фон активной строки.

--cm-active-count-bg - данная CSS переменная отвечает за фон номера строки у активной строки.

--cm-active-count-color - данная CSS переменная отвечает за цвет номера строки у активной строки.

--cm-active-count-right-color - данная CSS переменная отвечает за цвет правого "border" номера строки у активной строки.

Стилизация "строк кода"

Этот раздел посвящён стилизации "строк кода". Стилизацию активной строки я вынесу в отдельный блок, здесь я опишу стили для новых, изменённых, и удалённых строк. По сути здесь будет не много стилей, в основном это будут цвета границ у номеров строк.

--cm-new-border - у новых строк я делаю вертикальную линию, отделяющую номера строк от текста строки. Данная СSS-переменная задаёт цвет этой линии. Данный параметр связан с входным параметром "new" для компонента "code-line".

--cm-changed-border - в Visual Studio Code, когда происходят какие-нибудь изменения на строке, она отображается правой вертикальной линией, которая разделяет номер строки и текст строки. Данная CSS-переменная отвечает за цвет этой линии. Данный параметр связан с входным параметром "changed" для компонента "code-line".

--cm-deleted-border - для того, чтобы показать, что строка удалена, я делаю вертикальную линию, которая отделяет номера строк от текста строки. Данная CSS-переменная определяет цвет этой линии. Данный параметр тесно связан с входным параметром "deleted" компонента "code-line".

--cm-deleted-opacity - данная CSS-переменная отвечает за прозрачность удалённой строки. Для того, чтобы увидеть как это работает, нужно добавить входной параметр "deleted" к компоненту "code-line". Можно задавать значения от 0 до 1. 0 сделает строку полностью прозрачной, вам наверное это не пригодится. 1 сделает строку полностью видимой. Я рекомендую задавать промежуточные значения.

Стилизация выделения текста

Этот раздел посвящён выделению текста. Для того, чтобы увидеть результат применения стилей, необходимо выделить текст в окне с кодом. Я задаю фон выделения и цвет текста при выделении.

--cm-selection-bg - данная CSS переменная отвечает за фон выделения в окне с кодом.

--cm-selection-color - данная CSS переменная отвечает за цвет текста при выделении в окне с кодом.

Cтилизация полосы прокрутки

--cm-scroll-bar-bg - данная CSS переменная отвечает за фон полосы прокрутки.

--cm-thumb-bg - данная CSS переменная отвечает за фон ползунка полосы прокрутки.

Стилизация общих компонентов

Общие компоненты - это компоненты которые могут быть использованы в блоке шаблонов, скриптов и стилей. К ним относятся компоненты отвечающие за комментарии, компоненты отвечающие за вывод текстовой и числовой информации.

--cm-main-color - данная CSS переменная отвечает за цвет текста по умолчанию. Если вы вставите текст без какого-либо компонента, или выведите его в компоненте "mu-type", то применится значение этой переменной.

--cm-text-color - данная CSS переменная отвечает за цвет текстовой информации, как правило это текст выведенный между 2 кавычками. Это значение будет применено к компоненту "mu-text".

--cm-number-color - данная CSS переменная отвечает за цвет числовой информации, как правило это числа. Это значение будет применено к компоненту "mu-number".

--cm-comment-color - данная CSS переменная отвечает за цвет комментариев. Это значение будет применено к компоненту "mu-comment".

Стилизация компонентов блока "template"

Данный раздел посвящён стилизации компонентов, которые используются в блоке "template". Таких компонентов всего два - это "mu-tag" и "mu-attr". Соответственно это теги, и их атрибуты.

--cm-tag-color - данная CSS переменная отвечает за цвет тегов. Это значение будет применено к компоненту "mu-tag".

--cm-attr-color - данная CSS переменная отвечает за цвет атрибута тегов. Это значение будет применено к компоненту "mu-attr".

Стилизация компонентов блока "script"

Данный раздел посвящён компонентам которые находятся в блоке "script". Он тоже не большой, здесь будет показано как стилизовать ключевые слова языка JS, переменные, названия функций и ключей объекта.

--cm-key-color - данная CSS переменная отвечает за цвет ключей объекта. Это значение будет применено к компоненту "mu-key".

--cm-key-words-color - данная CSS переменная отвечает за цвет ключевых слов. К ним относятся такие языковые конструкции как let, const, var, function, return и тд. Это значение будет применено к компоненту "mu-key-words".

--cm-variable-color - данная CSS переменная отвечает за цвет переменных, они идут сразу после ключевых слов let, const, var. Это значение будет применено к компоненту "mu-variable".

--cm-function-color - данная CSS переменная отвечает за цвет имени функции. Это значение будет применено к компоненту "mu-function".

Стилизация компонентов блока "style"

Данный раздел посвящён стилизации компонентов, которые используются в блоке "style". Это наверное самый большой раздел. В большинстве тем, нет особой разницы между "id" элемента и его классом, если для вас важно различать класс и "id", то в этом разделе будет описано, как задать для данных элементов разные цвета. Все CSS переменные в этом разделе содержат префикс "style", чтобы их можно было отличить от других компонентов.

--cm-style-class - данная CSS переменная отвечает за цвет класса. Это значение будет применено к компоненту "mu-style-class".

--cm-style-id - данная CSS переменная отвечает за цвет id. Это значение будет применено к компоненту "mu-style-id".

--cm-style-tag - данная CSS переменная отвечает за цвет тега. Это значение будет применено к компоненту "mu-style-tag".

--cm-style-param - данная CSS переменная отвечает за цвет параметров CSS. Это значение будет применено к компоненту "mu-style-param".

--cm-style-key - данная CSS переменная отвечает за цвет вложенных правил. Это значение будет применено к компоненту "mu-style-key".

--cm-style-unit-mes - данная CSS переменная отвечает за цвет единиц измерений. Это значение будет применено к компоненту "mu-style-unit-meas".

--cm-style-ampersand - данная CSS переменная отвечает за цвет амперсанда. Это значение будет применено к компоненту "mu-style-ampersand".

--cm-style-curly-brace - данная CSS переменная отвечает за цвет фигурных скобок. Это значение будет применено к компоненту "mu-style-curly-brace".

Журнал изменений

Я буду вести журнал изменений начиная с версии "0.5.0". В этой версии я сделал входной параметр "theme" для компонента "code-markup". В данной версии я реализовал 2 темы: "darcula" и "monokai". Тема "darcula" была по умолчанию, тему "monokai" я сделал.