Как настроить Typora для редактирования Markdown и экспорта PDF

:warning: С июля 2022 полноценные бета-версии перестали работать.

Windows: Устанавливайте триал и, не открывая документов, вы можете создать столько пустых окон, сколько нужно. После открытия первого файла новые документы открыть будет нельзя, поэтому создавайте пустые окна сразу после запуска Ctrl+Shift+N, а потом закройте окошко License Info. Окно повторно использовать нельзя, поэтому лучше сразу создать много пустых окон.

Linux: Создание новых окон Ctrl+o и открытие в них документов работает нормально :sunglasses: . Нет надобности заранее заготавливать много пустышек.

Введение

:bulb: Typora - лучший редактор:

  • для работы с исходниками Markdown
  • для экспорта в PDF (см. настройки ниже)

Какие преимущества вы можете использовать:

  • можно использовать как черновик, вставляя картинки (сохраняются офлайн!), код с подсветкой синтаксиса и таблицы
  • требует минимальных усилий по форматированию
  • удобен при вставке содержания и перекрестных ссылок внутри документа
  • позволяет работать с документом как с веб-страницей - вы редактируете вложенную картинку и она изменяется в документе
  • в разных документах можно ссылаться на одну картинку
  • формат универсален и обратно совместим между Typora, Gitlab, GitHub, YouTrack, описанием Notes в Proxmox
  • почти полностью поддерживается разметка в Gitlab, Github (с именем readme.md открывается автоматически)
  • максимально совместим для использования в платформах онлайн-документации, например Docsify

Установка

Скачайте вручную с сайта https://typora.io или установите через Choco:

choco install typora --ignore-checksums --execution-timeout=300 --limit-output --no-progress --yes

Тема Vue.js

Эта тема отлично сочетается с Docsify. Внешний вид документов, вид в Docsify и выгруженные PDF будут одинаково выглядеть!

~/.config/Typora/themes/

В эту папку положите файлы:

vue (папка)
vue.css
vue_dark.css

Полный архив с темами тут:
typora_themes.zip (3,1 МБ)

Настройка отступов

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

Для документации можно принять: сверху 10 - снизу 5, слева 10, справа 5. При такой разметке не все принтеры смогут печатать номер страницы.

Вставка разрыва страницы (PDF)

Чтобы принудительно вставить разрыв страницы, используйте следующий код перед заголовком.

Так вы сможете генерировать PDF, удобный для печати с логическим разделением текста по страницам (таблицы разделяются автоматически).

<div style="page-break-after: always;"></div>

:person_tipping_hand: Периодически делайте экспорт документа с предыдущими настройками и перезаписью, чтобы получить PDF с нужной разбивкой на страницы:

На изображении показаны две опции экспорта в программе с соответствующими горячими клавишами. (Подпись к изображению от AI)

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

Параметры вставки изображений

Убедитесь, что установлена опция

Скопировать изображение в пользовательскую папку = ./images/${filename}

Это позволит копировать изображения в связанную папку локально. Для переноса картинки из временной папки в постоянную, используйте контекстное меню на картинке Скопировать в <папка>..., где папка - это имя папки, совпадающее в названием документа (создается автоматически при первом сохранении документа).

Будьте внимательны с пробелами и спецсимволами!

Typora показывает картинки с такими путями корректно, но например Gitlab нет. В таком случае требуется скорректировать путь, заменив спецсимволы с помощью Urlencoder:

     -    %20
!    -    %21
@    -    %40
#    -    %23
$    -    %24
%    -    %25
^    -    %5E
&    -    %26
*    -    %2A
(    -    %28
)    -    %29
<    -    %3C
>    -    %3E

Поддержка расширенного форматирования

Включите поддержку расширенного форматирования:

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

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

Если нумерация нужна лишь в некоторых случаях, то используйте этот синтаксис при указании подсветки кода:

{.language-name .numberLines}

или

# для нумерации с конкретного номера
{.language-name .numberLines startFrom="start-value"}

Убрать разрыв между заголовками

В новых версиях Typora 0.11.7 появилась такая настройка “ Разрыв страницы между верхними заголовками”. Просто отключите ее навсегда.

Рекомендуется проставить нумерацию страниц (футер):

${pageNo} / ${totalPages}

Для старых версий до 0.11.7

В старых версиях:
По умолчанию в Typora при экспорте в PDF добавляется разрыв страницы между заголовками (page-break), это портит страницы PDF. Чтобы это убрать:

МенюФайлНастройкиОформлениеОткрыть каталог тем

C:\Users\xx\AppData\Roaming\Typora\themes

Откройте файл github.css и закомментируйте такой блок @media_print, проставив символы комментария для CSS /* и */:

/*@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}*/

Перезапустите Typora.

Перенос таблиц по страницам

В экспортированном PDF таблица всегда начинается с новой страницы. Измените это поведение, открыв файл темы C:\Users\...\AppData\Roaming\Typora\themes\github.css и исправьте avoid на auto:

МенюФайлНастройкиОформлениеОткрыть каталог тем

    pre {
        page-break-inside: auto;
    }

Документация

Частично переведенная документация: https://way23.ru/typora-разрывы-страниц/

Вставка эмоджи

GitHub - ikatyang/emoji-cheat-sheet: A markdown version emoji cheat sheet

Шпаргалка по разметке

Markdown-Reference.pdf (334,3 КБ)

Диаграммы

typora_diagrams.md (12,8 КБ)

stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 --> State2
    note left of State2 : This is the note to the left.
%%{init: { 
  "theme": "base", 
  "themeVariables": { 
    "pie1": "#8BC34A", "pie2": "#f3d69c", "pie3": "#FF5722",
    "pie4": "#009688", "pie5": "#5C6BC0", "pie6": "#03A9F4",
    "pie7": "#EF4444", "pie8": "#ec070c", "pie9": "#FFC107",
    "pie10": "#ca936d","pie11": "#c9edfa","pie12": "#E91E63"
  } 
} }%%
pie title
    "CI/CD, SETUP, RND (HA/LB)" : 37.3
    "Other (DB, BACKUP, etc.)" : 15.94
    "CONSULT + Поддержка" : 13.3
    "PM, process" : 10.45
    "PERIODIC / SETUP (VM)" : 7.4
    "DOCS" : 5.31
    "PRESALE" : 4.6
    "MONITORING" : 3.85
    "ONBOARD / PREPARE" : 1.82
    "РУЧНЫЕ / FIX" : 0.18
    "RND (Архитектура)" : 0.05

Кнопка

Для получения кнопки:

На изображении красная кнопка с белым текстом на русском языке, который гласит: «Требует уточнения». (Подпись к изображению от AI)

Добавьте в начало документа README.md такой код:

<style>
.markdown-section .mybutton, .markdown-section .mybutton:hover {
  cursor: pointer;
  color: #CC0000;
  height: auto;
  display: inline-block;
  border: 2px solid #CC0000;
  border-radius: 4rem;
  margin: 2px 0px 2px 0px;
  padding: 8px 18px 8px 18px;
  line-height: 1.2rem;
  background-color: white;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  font-weight: bold;
  text-decoration: none;
}
</style>

Для вставки кнопки используйте код с указанием класса:

[Требует уточнения](URL ':class=mybutton')

В PDF кнопка отображаться будет как обычная ссылка