ζ༼Ɵ͆ل͜Ɵ͆༽ᶘ

Все возможности редактора NT

0 комментов
15.03.2022
8 мин чтения

В качестве основы редактор использует язык разметки Markdown. У этого есть ряд причин.

  1. Редактор получился очень легковесный, благодаря чему страница загружается гораздо быстрее
  2. Если вы начинающий программист, то Markdown вам точно пригодится в дальнейшем, тк на нем написаны все описание репозиториев на github
  3. По сравнению с другими онлайн редакторами, данный обладает большей гибкостью. Вы это поймете, если пролистаете статью. При желании можно написать свое расширение, что конечно же круто!

Базовый синтаксис MARKDOWN


Заголовки

Заголовки первого, третьего и шестого уровней, выполненные с помощью символа («#»), выглядят следующим образом

#  Заголовок первого уровня
### Заголовок третьего уровня
###### Заголовок шестого уровня

В результате на экран выводиться:

Заголовок первого уровня

Заголовок третьего уровня

Заголовок шестого уровня

Цитаты

Для обозначения цитат в языке Markdown используется знак «больше» («>»). Также синтаксис Markdown позволяет создавать вложенные цитаты (цитаты внутри цитат). Для их разметки используются дополнительные уровни знаков цитирования («>»). Цитаты в Markdown могут содержать всевозможные элементы разметки. Цитаты в языке Markdown выглядят следующим образом:

> Первый уровень цитирования
>> Второй уровень цитирования
>>> Третий уровень цитирования
>
>Первый уровень цитирования

Первый уровень цитирования

Второй уровень цитирования

Третий уровень цитирования

Первый уровень цитирования

Списки

Markdown поддерживает упорядоченные (нумерованные) и неупорядоченные (ненумерованные) списки. Для формирования неупорядоченный списков используются такие маркеры, как звездочки, плюсы и дефисы. Все перечисленные маркеры могут использоваться взаимозаменяемо. Для формирования упорядоченных списков в качестве маркеров используются числа с точкой. Маркеры списков обычно начинаются с начала строки, однако они могут быть сдвинуты, но не более чем на 3 пробела. За маркером должен следовать пробел, либо символ табуляции.

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

1.  Проводник
2.  Полупроводник
3.  Диэлектрик

Результат

  1. Проводник
  2. Полупроводник
  3. Диэлектрик

Неупорядоченные списки выглядят следующим образом:

* Проводник
* Полупроводник
* Диэлектрик

Или

- Проводник
- Полупроводник
- Диэлектрик

Или

+ Проводник
+ Полупроводник
+ Диэлектрик

Результат

  • Проводник
  • Полупроводник
  • Диэлектрик

Горизонтальные линии (разделители)

Для того чтобы создать горизонтальную линию с использованием синтаксиса языка Markdown, необходимо поместить три (или более)дефиса или звездочки на отдельной строке текста.

Первая часть текста, который необходимо разделить
***
Вторая часть текста, который необходимо разделить

Или

Первая часть текста, который необходимо разделить

---

Вторая часть текста, который необходимо разделить

Результат

Первая часть текста, который необходимо разделить


Вторая часть текста, который необходимо разделить

Строчные элементы

Ссылки

Markdown поддерживает два стиля оформления ссылок:

  • Гиперссылка, с немедленным указанием адреса (внутритекстовая);
  • Гиперссылка, подобная сноске.

Подразумевается, что помимо URL-адреса существует еще текст ссылки. Он заключается в квадратные скобки. Для создания внутритекстовой гиперссылки необходимо использовать круглые скобки сразу после закрывающей квадратной. Внутри них необходимо поместить URL-адрес. В них же возможно расположить название, заключенное в кавычки, которое будет отображаться при наведении, но этот пункт не является обязательным.

 [пример](http://example.com/ "Необязательная подсказка")

Результат

пример

При создании сносной гиперссылки вместо целевого адреса используется вторая пара квадратных скобок, внутри которых помещается метка, идентификатор ссылки (id).

[пример][id]:

...какой-то текст...

[id]: http://example.com/ "Необязательная подсказка"

В результате получаем туже самую ссылку, что и выше пример:

Выделение текста

Markdown воспринимает звёздочки «*» и символы подчёркивания «_» как признаки смыслового выделения текста:

  • Текст, окружённый одиночными «*» или «_», будет заключен в HTML-тэг <em>.
  • Текст, окружённый двойными «*» или «_», будет заключен в HTML-тэг <strong>.

Иными словами, текст, окруженный одинарными символами, выделяется курсивным шрифтом, а текст, окруженный двойными символами, выделяется полужирным шрифтом. Также, выделенный фрагмент может находиться в любой части слова. Текст, выделенный курсивом с использованием синтаксиса языка Markdown, выглядит следующим образом:

*Пример*  

**Пример** 

_Пример_

__Пример__ 

Результат

Пример

Пример

Пример

Пример


Изображения

В Markdown существует 2 способа вставки изображений в документ:

С помощью непосредственного указания URL-адреса изображения. Синтаксис данной команды выглядит следующим образом:

![Альтернативный текст](/путь/к/изображению.jpg)

или

![Альтернативный текст](/путь/к/изображению.jpg "Подсказка")

Альтернативный текст

Иными словами, он состоит из следующих элементов:

  • восклицательный знак;
  • квадратные скобки, в которых указывается альтернативный изображению текст (он станет содержимым атрибута в элементе img);
  • круглые скобки, содержащие URL-адрес или относительный путь изображения, а также (необязательно) всплывающую подсказку, заключённуе в двойные или одиночные кавычки.

Дополнительные возможности редактора


Подсветка кода

В этом редакторе присутствует возможность подсветки кода. Что бы это сделать необходимо прописать три апострофа ` в начале и в конце блока кода.

```<- начало
...код...
```<- конец

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

Вот пример кода на C++

```cpp <- начало блока с кодом с указанием языка программирования
#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}
``` <- конец блока с кодом

В результате получаем:

#include <iostream>

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector<string> > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}

Подсветка клавиш

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

++ctrl+alt+delete++

Результат

Ctrl+Alt+Del

Выделения текста

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

==Пример==

Результат

Пример

Индикаторы прогресса

Если требуется вставить в статью элемент полосу с прогрессом, то это можно осуществить так:

[=0% "0%"]
[=5% "5%"]
[=25% "25%"]
[=45% "45%"]
[=65% "65%"]
[=85% "85%"]
[=100% "Всем Ку"]

Первое значение это уровень прогресса, второе - надпись или текст

Результат

0%

5%

25%

45%

65%

85%

Всем Ку

Для тонкой полосы прогресса без подписи нужно в фигурный скобках добавить ": .thin" :

[=0%]{: .thin}
[=5%]{: .thin}
[=25%]{: .thin}
[=45%]{: .thin}
[=65%]{: .thin}
[=85%]{: .thin}
[=100%]{: .thin}

Результат

Специальные символы

Добавляет синтаксис для создания специальных символов, таких как товарные знаки, стрелки, дроби и т. д.

(tm)
(c)
(r)
c/o
+/-
-->
<--
<-->
=/=
1/4, etc.
1st 2nd etc.

Результат

™ © ® ℅ ± → ← ↔ ≠ ¼, etc. 1st 2nd etc.

Вкладки

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

=== "Tab 1"
    Markdown **content**.

    Multiple paragraphs.

=== "Tab 2"
    More Markdown **content**.

    - list item a
    - list item b

Результат

Markdown content.

Multiple paragraphs.

More Markdown content.

  • list item a
  • list item b

Списки

Добавляет списки задач в стиле GFM. Они следуют тому же синтаксису, что и GFM. Просто начинайте каждый элемент списка с пары квадратных скобок, содержащих либо пробел (неотмеченный элемент), либо X (отмеченный элемент).

Task List

- [X] item 1
    * [X] item A
    * [ ] item B
        more text
        + [x] item a
        + [ ] item b
        + [x] item c
    * [X] item C
- [ ] item 2
- [ ] item 3

Результат

Task List

  • item 1
    • item A
    • item B more text
      • item a
      • item b
      • item c
    • item C
  • item 2
  • item 3

Математические формулы

Вы можете писать формулы на языке LaTex. Подробная инструкция по LaTex вы можете найти на этом сайте

Для вставки формулы необходимо поставить знак $ перед началом и в конце формулы.

Пример

Количество сочетаний можно найти по этой формуле $\frac{n!}{k!(n-k)!} = \binom{n}{k}$

Результат

Количество сочетаний можно найти по этой формуле \(\frac{n!}{k!(n-k)!} = \binom{n}{k}\)

Если необходимо , что бы формула была на новой строчке по середине(создать отдельный блок для формулы), то надо поставить два значка $$ в начале и в конце формулы.

Пример

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

$$
\forall \varepsilon > 0 \exists N_{\varepsilon}: \forall n \ge N_{\varepsilon} \longrightarrow \left| \beta_{n} \right| < \frac{\varepsilon}{C}
$$

Результат

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

\[ \forall \varepsilon > 0 \exists N_{\varepsilon}: \forall n \ge N_{\varepsilon} \longrightarrow \left| \beta_{n} \right| < \frac{\varepsilon}{C} \]

Вставка картинок

На данный момент сайт поддерживает вставку картинок следующих разрешений jpeg, png, svg

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

Вот гифка с примером того как это работает

5
Сегодня
День улёта