Форматирование сообщений

[JxhnnyUt8h]

Содержание

При работе с Discourse могут использоваться различные способы форматирования: Markdown, BBCode и HTML.

На данный момент поддерживаются следующие элементы форматирования:

• Заголовки
• Выделение текста
• Цитирование текста
• Вставка кода (или текст без форматирования)
• Ссылки
• Изображения
• Списки
• Таблицы
• Формулы
• Диаграммы
• Table of Contents
• Сноски

[JxhnnyUt8h]

Заголовки

Чтобы создать заголовок, добавьте от одного до шести символов # (ака решетка, хеш, октоторп) перед текстом заголовка. Количество символов # определяет размер заголовка.

# Заголовок 1 уровня
## Заголовок 2 уровня
### Заголовок 3 уровня
#### Заголовок 4 уровня
##### Заголовок 5 уровня
###### Заголовок 6 уровня

Или в HTML-формате:

<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>

Заголовок 1 уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня

Заголовок 5 уровня

Заголовок 6 уровня

[JxhnnyUt8h]

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

Поддерживаются разные способы выделения текста:

Способ выделения	Синтаксис
Жирный	**жирный** или __жирный__ или [b]жирный[/b]
Курсив	*курсив* или _курсив_ или [i]курсив[/i]
Зачеркнутый	~~зачеркнутый~~ или [s]зачеркнутый[/s]
Подчеркнутый	[u]подчеркнутый[/u]
Комбинированный формат	**жирный _курсив_** или [b]жирный [i]курсив[/i][/b]
Особое выделение	***жирный и курсив***
Верхний индекс	<sup>верхний индекс</sup>
Нижний индекс	<sub>нижний индекс</sub>
\color{Red}{Цветной}	$\color{Red}{выделение\,цветом\,с\,LaTeX}$
Текст спойлера	[spoiler]Текст спойлера[/spoiler]
	<!-- скрытый текст -->
перенос на другую строку	перенос на <br> другую строку

Для вставки горизонтальной линии используйте *** или <hr>:

---

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

Способ выделения	Сочетания клавиш
Жирный	Command+B (Mac) или Ctrl+B (Windows/Linux)
Курсив	Command+I (Mac) или Ctrl+I (Windows/Linux)

[JxhnnyUt8h]

Цитирование текста

Чтобы оформить текст как цитату, добавьте символ > (знак больше) перед текстом цитаты.

> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

При использовании BBCode возможно указывать автора цитаты:

[quote="Niklas Luhmann"]It is impossible to think without writing; at least it is impossible in any sophisticated or networked (anschlußfähig) fashion.[/quote]

@Niklas Luhmann

It is impossible to think without writing; at least it is impossible in any sophisticated or networked (anschlußfähig) fashion.

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

Действие	Сочетания клавиш
Цитирование	Command+Shift+9 (Mac) или Ctrl+Shift+9 (Windows/Linux)

[JxhnnyUt8h]

Вставка кода

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

Встроенный код

Текст внутри `обратных кавычек` в строке будет отображаться как код.

Текст внутри обратных кавычек в строке будет отображаться как код.

В данном способе форматирования работает автоматический перенос на следующую строку.

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

Действие	Сочетания клавиш
Текст без форматирования	Command+E (Mac) или Ctrl+E (Windows/Linux)

Блоки кода

Подсветка синтаксиса кода поддерживается путем указания языка после первых трех обратных кавычек. Для подсветки используется highlight.js. Для предотвращения подсвечивания можно указать несуществующий язык.

``` javascript
function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}
```

function fancyAlert(arg) {
  if(arg) {
    $.facebox({div:'#foo'})
  }
}

В данном способе форматирования не работает автоматический перенос на следующую строку.

Табуляция

	Текст с отступом, сделанным с помощью табуляции
    Текст с отступом, сделанным с четырех пробелов

Текст с отступом, сделанным с помощью табуляции 
Текст с отступом, сделанным с четырех пробелов

В данном способе форматирования не работает автоматический перенос на следующую строку.

Изолирование

В отдельных случаях, когда необходимо изолировать синтаксис разметки, используется символ \ (обратная косая черта).

[JxhnnyUt8h]

Ссылки

Внешние ссылки

Вы можете создать ссылку заключив текст ссылки в квадратные скобки [ ], а затем заключив URL в круглые скобки ( ).

Этот сайт был создан с использованием [Discourse](https://discourse.org/).

Этот сайт был создан с использованием Discourse.

Когда текст выделен, можно вставить URL из буфера обмена, чтобы автоматически создать ссылку из выделенного текста. Доступны следующие сочетания клавиш:

При вставке ссылок на некоторые популярные ресурсы создается блок с предпросмотром содержимого страницы. Такая вставка работает для Wikipedia, Twitter, Amazon, Youtube, Soundcloud, Stack Overflow, Github и многих других ресурсов:

https://en.wikipedia.org/wiki/Zettelkasten

Zettelkasten

Действие	Сочетания клавиш
Вставка ссылки	Command+K (Mac) или Ctrl+E (Windows/Linux)

Внутренние ссылки

Вы можете напрямую ссылаться на разделы форума, на темы, на отдельные сообщения и отдельные блоки сообщений с заголовками:

Как и в случае со внешними ссылками, внутренние ссылки будут автоматически преобразованы в блоки с предпросмотром:

https://forum.rustamagamaliev.ru/t/nemnogo-pro-effektivnost-bendzhamina-franklina/35/9

Немного про эффективность Бенджамина Франклина

Знакомая картинка. Я её использовал для статьи про таймбоксинг. Мне кажется, это ближе к углубленной работе Ньюпорта, чем к Клиру.

Cсылки-сноски

Не является сноской в ее классическом виде, но может использоваться для оформления ссылок как сносок:

Текст содержащий [ссылку-сноску][1].

[1]: https://discourse.org/

Текст содержащий ссылку-сноску.

Другие виды ссылок

Ссылка	Синтаксис
Обращение к @rustam	@rustam
Почта example@example.com	example@example.com или [email]example@example.com[/email]

[JxhnnyUt8h]

Изображения

Изображение можно вставить из буфера обмена, перетаскиванием файла или вставкой ссылки на него. Список разрешённых типов файлов: jpg, jpeg, png, gif, heic, heif, webp.

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

![текст](http://example.com/example.png) или
![текст|498x500, 50%](upload://boVg97BhuShHxH8twhyou1uFTGO.png) или
[img]http://example.com/example.png[/img]

При загрузке изображение на сервер ему присваивается свое уникальное имя с относительной ссылкой upload://, которую можно использовать и в других сообщениях.

[JxhnnyUt8h]

Списки

Доступны следующие виды многоуровневых списков:

Маркированный

- Строка 1
- Строка 2
  - Строка 2a
  - Строка 2b

• Строка 1
• Строка 2
  • Строка 2a
  • Строка 2b

Нумерованный

1. Строка 1
1. Строка 2
   1. Строка 2a
   1. Строка 2b

1. Строка 1
2. Строка 2
   1. Строка 2a
   2. Строка 2b

Смешанный

1. Строка 1
1. Строка 2
   - Строка 2a
   - Строка 2b

1. Строка 1
2. Строка 2
   • Строка 2a
   • Строка 2b

Задачи

- [] или [ ] для пустых чекбоксов
- [x] для чекбоксов c галочкой
- [X] для чекбоксов c инвертированной галочкой

• для пустых чекбоксов
• для чекбоксов c галочкой
• для чекбоксов c инвертированной галочкой

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

Вставка списка	Сочетания клавиш
Маркированный	Command+Shift+8 (Mac) или Ctrl+Shift+8(Windows/Linux)
Нумерованный	Command+Shift+7 (Mac) или Ctrl+Shift+7 (Windows/Linux)

[JxhnnyUt8h]

Таблицы

Вы можете создавать таблицы из списков. Шапка таблицы (она же первая строка) отделяется от остальных строк с помощью - дефисов. Столбцы разделяются | вертикальной чертой:

Первый заголовок          | Второй заголовок
------------------------- | -------------------------
Содержимое первой колонки | Содержимое второй колонки

Первый заголовок	Второй заголовок
Содержимое первой колонки	Содержимое второй колонки

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

Пример выравнивания | Пример выравнивания | Пример выравнивания
:------------------ | :-----------------: | ------------------:
По левому краю      | По центру           | По правому краю

Пример выравнивания	Пример выравнивания	Пример выравнивания
По левому краю	По центру	По правому краю

Возможна вставка HTML-таблиц:

<table>
  <tr>
    <th>Color</th>
    <th>Weight</th>
    <th>Height</th>
  </tr>
  <tr>
    <td>red</td>
    <td>12</td>
    <td>160</td>
  </tr>
  <tr>
    <td>green</td>
    <td>4</td>
    <td>100</td>
  </tr>
</table>

Color	Weight	Height
red	12	160
green	4	100

[JxhnnyUt8h]

Формулы

Поддерживается вставка математических формул MathJax и KaTeX.

Для вставки формулы в текст используйте символ $. Например, $E=mc^2$ будет отображаться как E=mc^2.

Для отображения блока с формулой его надо обернуть в $$:

$$
  A_{3\times 3} = 
  \begin{pmatrix}
    a_{11} & a_{12} & a_{13}\\
    a_{21} & a_{22} & a_{23}\\
    a_{31} & a_{32} & a_{33}
  \end{pmatrix}
$$

A_{3\times 3} = \begin{pmatrix} a_{11} & a_{12} & a_{13}\\ a_{21} & a_{22} & a_{23}\\ a_{31} & a_{32} & a_{33} \end{pmatrix}

Полезные ссылки

• MathJax basic tutorial and quick reference
• MathJax - библиотека для отображения математических формул (краткий справочник)

[JxhnnyUt8h]

Диаграммы

Поддерживается вставка диаграмм Mermaid JS следующим способом:

[mermaid]
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d
[/mermaid]

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d

[JxhnnyUt8h]

Table of Contents

Неофициальный способ создания TOC в ручную с использованием HTML. Для заголовков необходимо использовать уникальные id с префиксом heading--.

Оформления заголовков:

<h2 id="heading--headings">Заголовки</h2>
<h2 id="heading--text-style">Выделение текста</h2>
<h2 id="heading--quoting">Цитирование текста</h2>
<h2 id="heading--quoting-code">Вставка кода</h2>
<h2 id="heading--links">Ссылки</h2>
<h2 id="heading--images">Изображения</h2>
<h2 id="heading--lists">Списки</h2>
<h2 id="heading--tables">Таблицы</h2>
<h2 id="heading--mathjax">Формулы</h2>
<h2 id="heading--mermaid">Диаграммы</h2>
<h2 id="heading--toc">Table of Contents</h2>
<h2 id="heading--footnotes">Сноски</h2>

Оформление списка:

- [Заголовки](#heading--headings)
- [Выделение текста](#heading--text-style)
- [Цитирование текста](#heading--quoting)
- [Вставка кода](#heading--quoting-code)
- [Ссылки](#heading--links)
- [Изображения](#heading--images)
- [Списки](#heading--lists)
- [Таблицы](#heading--tables)
- [Формулы](#heading--mathjax)
- [Диаграммы](#heading--mermaid)
- [Table of Contents](#heading--toc)
- [Сноски](#heading--footnotes)

Результат:

• Заголовки
• Выделение текста
• Цитирование текста
• Вставка кода
• Ссылки
• Изображения
• Списки
• Таблицы
• Формулы
• Диаграммы
• Table of Contents
• Сноски

У данного решения есть и свои минусы. При его использовании не работает встроенная система добавления id и ссылок к заголовкам. Следует использовать что-то одно.

[JxhnnyUt8h]

Сноски

Поддерживается следующий синтаксис для оформления сносок в конце текста:

Текст в конце котрого ставится сноска.[^1]
[^1]: Текст сноски.

или

Текст в конце котрого ставится сноска.[^text]
[^text]: Текст сноски.

I saw the best minds of my generation destroyed by madness, starving hysterical naked,
dragging themselves through the negro streets at dawn looking for an angry fix
angelheaded hipsters burning for the ancient heavenly connection to the starry dynamo in the machinery of the night.^[1]

Так же можно ставить сноски непосредственно в тексте:

Текст в конце котрого ставится сноска.^[Текст сноски]

The sky above the port was the color of television, tuned to a dead channel.^[2]

Сквозная нумерация сносок производится автоматически. Можно искользовать оба метода вставки сноскок одновременно.

---

1. A. Ginsberg, 1956, Howl ↩︎

2. W. Gibson, 1984, Neuromancer ↩︎

[dimonier]

А вот не получается вставить картинку с другого сайта.
Это так и должно быть, или таки я что-то делаю не так?

Картинка: http://ignatovo.com/PKM/PKM-medium.png
Ниже вставил её с использованием сиснтаксиса Markdown, но ничего не отображается. По крайней мере, в превью.

А, нет, отображается после того как сервер подумал как следует! Вопрос снят

[dimonier]

@dimonier

А, нет, отображается после того как сервер подумал как следует! Вопрос снят

Увы, вопрос не снят.
После сохранения поста картинка загружается на этот форум и отображается уже отсюда (ссылка меняется с http://… на upload://…).
Т.е. любые обновления картинок в источнике игнорируются.

Это можно как-то победить?

[Kvantum]

поправьте описку в текстовке