Live preview sublime text 3: Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

Содержание

Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки

Сегодня мы рассмотрим настройку популярного редактора кода Sublime Text 3 для веб-разработки.

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить


Внимание! Вышла более новая версия руководства.

С новым материалом вы можете ознакомиться Здесь.

Плагины

emmet — плагин для скоростной верстки.

livereload — автообновление страницы.

Для корректной работы плагина LiveReload в Sublime Text 3 необходимо дописать в пользовательских настройках плагина следующую конструкцию (подробнее в видео):

{
	"enabled_plugins": [
		"SimpleReloadPlugin",
		"SimpleRefresh"
	]
}

sass — настроим корректную подсветку SASS в Sublime Text 3.

jade — HTML препроцессор.

gist — плагин для быстрого доступа к вашим сниппетам на GitHub.

brackethighlighter — подсветка скобок, тегов в Sublime Text 3.

autofilename — автокомплит для подключения внешних файлов в верстку.

colorhighlighter — подсветка цвета.

BufferScroll — сохранение позиции курсора в документе.

Goto-CSS-Declaration — плагин для быстрого поиска соответствующего класса в CSS, SASS, LESS.

Фишки

  • Поменяем тему на twilight.

  • Научимся множественному выделению.

  • Назначим клавиши для события reindent (хоткей для автоматического формата документа).

  • Научимся управлять числовыми значениями (Инкремент и Декремент).

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

Sublime Text: https://sublimetext.com

Sublime Text 3 Package Control: https://packagecontrol.io/installation

LiveReload Browser Extension: http://livereload.com/extensions/

Sublime Text 3 Live Reload Plugin: https://packagecontrol.io/packages/LiveReload

Премиум уроки от WebDesign Master

Другие уроки по теме «Инструменты»

Как установить LiveReload на Sublime Text 3?

Я использую Sublime Text 3 и хочу использовать LiveReload . У меня уже установлен браузерный плагин для Chrome. Node.js также установлен.

Для Sublime Text 3 Live Reload этот плагин должен быть установлен:
https://github.com/dz0ny/LiveReload-sublimetext2

Как я могу установить его на Windows 7? Это просто говорит что-то о пользователях Linux и OSX.

sublimetext3

livereload

Поделиться

Источник


QJan84    

17 сентября 2014 в 08:45

5 ответов


36

Платформа, которую я использовал: Linux Mint 17+

Я хочу поблагодарить http://anthozano.fr/livereload-pour-sublime-text-3/ . Я смог запустить live reload на sublime text 3 с инструкциями на веб-сайте. Тем не менее, сайт написан на французском языке (я полагаю, — сказал Google translate), поэтому я подумал, что могу написать шаги здесь.

Сначала установите sublime text 3 отсюда http://www.sublimetext.com/3 или следуйте своим собственным путем, который вы предпочитаете (я сделал это с менеджером пакетов Linux mint).

Во-вторых, установите управление пакетами отсюда https://packagecontrol.io/installation#st3 (инструкция четко указана на веб-сайте, поэтому я не стал много объяснять).

В-третьих, откройте элемент управления пакетами (ярлык : Ctrl+Shift+P ) и найдите Package Control: Add Repository

Теперь в нижней части окна sublime text 3 появится область для ввода URL. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json .

Снова откройте элемент управления пакетами и найдите Package Control: Install Package , а затем найдите LiveReload в следующем окне.

Настройте параметр пакета LiveReload на Preferences > Package Settings > LiveReload > Setting - Default и вставьте это :

 
       { 
           "enabled_plugins": [ 
               "SimpleReloadPlugin", 
               "SimpleRefresh" 
           ]
       }

Теперь для вашего браузера установите плагин LiveReload, как показано ниже :

Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi

Chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

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

Примечание: Пользователи Chrome, чтобы LiveReload поддерживал file:// страниц, перейдите к chrome://extensions/ и отметьте Allow access to file URLs .

Снимок сделан с Safari для Mac OSX:

Наслаждайтесь, Живая перезагрузка с Sublime Text 3.

Спасибо Энтони Лозано за http://anthozano.fr/livereload-pour-sublime-text-3/ .

Поделиться


Roshan Poudyal    

29 октября 2015 в 08:55


4

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

Поделиться


marblewraith    

18 сентября 2014 в 02:31


4

Плагин, упомянутый в комментариях, LiveReload , доступен как для ST2, так и для ST3, как указано на графике по ссылке управления пакетом, которую я только что предоставил. Он также отлично работает на Windows, так как большинство его пользователей находятся на этой платформе. Репозиторий Github может быть назван » LiveReload-sublimetext2 «, но если вы читаете документацию, в ней также четко упоминается ST3. Инструкции Linux и OS X в файле readme предназначены для установки с использованием git . Вы также можете использовать git на Windows (если он установлен), но автор, по-видимому, не хотел помещать явные инструкции в README. Вместо этого предпочтительным методом установки является управление пакетами, как описано выше пользователем DaV. Если его комментарий исчезнет, сделайте это:

  1. Откройте Sublime Text 3.
  2. Откройте палитру команд с Ctrl Shift P .
  3. Введите pci , чтобы вызвать Package Control: Install Package . Нажмите Enter .
  4. Введите livereload и убедитесь, что выбран нужный пакет. Если нет, используйте клавиши со стрелками. Нажмите Enter .
  5. Прочитайте документацию и либо добавьте соответствующий JavaScript в свои документы, либо загрузите плагин для браузера (что вы, похоже, уже сделали, так хорошо для вас).
  6. Иди развивайся.

Поделиться


MattDMo    

17 сентября 2014 в 18:28

  • Как установить формат автоматического отступа HTML на Sublime Text 3?

    У меня есть вопрос, когда я пишу код HTML на Sublime Text 3. Я просто хочу установить формат автоматического отступа HTML. Например, когда я пишу тег p, как в коде, отступ работает именно так. <p> Hello world! </p> Но я хочу писать как под кодом, а не выше. <p> Hello world!…

  • Как установить плагин SFTP в Sublime Text 3 на Windows 7 64bit

    Я не могу установить плагин SFTP ST3 на Windows 7 64bit. Он установлен, но все его меню серые, неактивны. Я читаю поддержку. Там написано:: Чтобы исправить это, выполните следующие действия: Откройте Настройки > Просмотр Пакетов… Перейдите в папку SFTP/ и откройте SFTP.py в Sublime. Я открываю…


2

LiveReload Возвышенный текст3：
https://github.com/Grafikart/ST3-LiveReload

Но использование, похоже, изменилось:
Включите нужные плагины с помощью командной палитры (Ctrl+Shift+P), добавьте livereload.js в документ html.

Поделиться


Allen    

11 июня 2015 в 04:06


2

Прошло много времени. Теперь, для sublime text 3, самый современный плагин LiveReload можно найти здесь .

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

  • Во-первых, вам нужно установить sublimetext-markdown-preview . Следуйте инструкциям по предварительному просмотру в brower .

    используйте cmd+shift+P , затем Markdown Preview , чтобы показать следующие команды (вам будет предложено выбрать, какой парсер вы предпочитаете):

    • Markdown Предварительный просмотр: Предварительный просмотр в браузере

  • Используйте управление пакетами для установки LiveReload .

    С Контролем Упаковки:

    Выполните команду “Package Control: Install Package”, найдите и установите плагин LiveReload >.
    Перезапустить редактор ST (при необходимости)

  • Отредактируйте параметр пользователя плагина LiveReload в разделе Preferences->Package Settings->LiveReload->Setting - User , добавьте следующее:

    {
    «enabled_plugins»: [
    «SimpleReloadPlugin»
    ]
    }

Теперь вы можете использовать livereload при редактировании файлов markdown.

Как найти точное имя плагина

В репозитории github неясно, как установить плагин в настройках пользователя, он просто дает список поддерживаемых плагинов без указания их фактических имен. После проверки пакета (см. Изображение ниже) я нашел точные названия этих плагинов:

  1. CompassPlugin
  2. LESSPlugin
  3. CoffeescriptPlugin
  4. SimpleReloadPlugin
  5. SimpleReloadPluginDelay

Поделиться


jdhao    

17 декабря 2017 в 15:15

Похожие вопросы:

Sublime Text 3 — Как установить JSHint

Я использую Sublime Text 3, мне это нравится. И мне нравится JSHint, который помогает нам улучшить стандарты кодирования. В настоящее время я копирую свой код javascript в http://jshint.com/ и делаю…

Как навсегда включить плагин Sublime Text 3 LiveReload

Недавно я установил плагин LiveReload для Sublime Text 3. Я также установил расширение LiveReload Chrome. Все работает отлично, однако остается одна головная боль. Мне нужно войти в управление…

LiveReload для Sublime Text 3-не работает

Я настроил LiveReload для Sublime Text 3, следуя этому руководству . Я установил плагин LiveReload для FireFox (он включен). Я проверил его с помощью этого простого кода HTML: <!DOCTYPE HTML>…

как установить sublime text indent xml в sublime 3

Я пытаюсь установить https://github.com/alek-sys/sublimetext_indentxml в sublime text 3. Я читал В Sublime Text 3-клонируйте проект из папки Github в папку Packages. Кажется, это не работает. Я не…

Sublime Text 2 — Как вызвать обновление LiveReload при внешнем изменении текущего редактируемого файла

Sublime Text 2 — Как вызвать обновление LiveReload, когда текущий редактируемый файл изменяется внешне (например, Visual Studio) Я установил LiveReload, и когда я активирую его в браузере, он может…

Как установить формат автоматического отступа HTML на Sublime Text 3?

У меня есть вопрос, когда я пишу код HTML на Sublime Text 3. Я просто хочу установить формат автоматического отступа HTML. Например, когда я пишу тег p, как в коде, отступ работает именно так….

Как установить плагин SFTP в Sublime Text 3 на Windows 7 64bit

Я не могу установить плагин SFTP ST3 на Windows 7 64bit. Он установлен, но все его меню серые, неактивны. Я читаю поддержку. Там написано:: Чтобы исправить это, выполните следующие действия:…

Загрузка печени на Sublime Text 3

LiveReload, похоже, не работает над sublime text 3, Когда я загружаю его из элемента управления пакетами. Я нашел эту ссылку ( https://github.com/dz0ny/LiveReload-sublimetext2/tree/devel ) на…

LiveReload для Sublime Text 3 был удален

Я хочу установить LiveReload для Sublime Text 3. Однако, когда я иду в Управление пакетами для установки, я понимаю, что LiveReload больше нет. Когда я посещаю этот сайт:…

как установить пакеты в sublime text editor 3?

Я установил управление пакетами в sublime text editor 3 build 3114. Когда я пытаюсь установить новые пакеты / Плагины, они не устанавливаются. Ничего не показывает никакой message.Please скажите…

Как в Sublime Text сделать live preview разметки Markdown?

Настроив описанными ниже действиями Sublime Text 3 на предпросмотр Markdown, я пишу в данном редакторе, например, ответы на Stack Overflow, и этот в том числе.

Убираем горизонтальную полосу прокрутки в редактируемом файле

Устанавливаем плагин Markdown Editing → открываем любой Markdown-файл с расширением md или mdown → Preferences → Settings - More → Syntax Specific - User. Удаляем содержимое открывшегося файла, вместо него вставляем следующий код:

{
    "extensions":
    [
        "md",
        "mdown"
    ],
    "wrap_width": "0",
}

Т. е. мы добавили параметр со значением "wrap_width": "0". Вместо 0 я подставлял другие цифры, да хоть 4147, всё корректно работало.

Недостаток Markdown Editing — при использовании в файлах с Markdown-разметкой плагина LanguageTool, использующего обращения к API на мой взгляд лучшего спеллчекера с открытым исходным кодом LanguageTool, не подсвечиваются все опечатки в тексте.

Убираем горизонтальную полосу прокрутки при отображении в браузере

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

OmniMarkupPreviewer

Устанавливаем плагин OmniMarkupPreviewer. После Ctrl+Shift+P → OmniMarkupPreviewer: Preview Current Markup in Browser вместо предпросмотра может открываться страница ошибки. Чтобы её избежать: Preferences → Package Settings → OmniMarkupPreviewer → Settings - User → вставляем следующий код и сохраняем файл.

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}

Однако горизонтальный скроллбар остаётся.

я спрашивал в issue tracker данного плагина на ГитХабе, как справиться с проблемой, но ответа не получил.

Markdown Preview

Устанавливаем плагин Markdown Preview, запускаем предпросмотр. Вместо кириллического текста в браузере, возможно, отобразятся кракозябры. Дабы их избежать, необходимо задать кодировку в редактируемом файле — <meta charset=utf-8>. Потребуется также установка LiveReload и включение синхронизации при сохранении файла: Ctrl+Shift+P → LiveReload: Enable/Disable Plugins → Enable - Simple Reload.

Ctrl+Shift+P → Markdown Preview: Preview in Browser → markdown (если выберем github, кракозябры не исчезнут):

Помимо явного указания кодировки для того, чтобы видеть результат в браузере, потребуется сохранять файл; как с этим плагином осуществить Live Preview, о котором просил уважаемый топикстартер, я не нашёл.

Markmon

Установка как минимум для пользователей Windows может вызвать затруднения, поэтому остановлюсь на ней поподробнее:

  • Скачиваем и устанавливаем Node.js.
  • Устанавливаем Markmon, введя в терминал команду npm install -g markmon.
  • Через Package Control устанавливаем плагин Markmon для Sublime Text 3.
  • Скачиваем и устанавливаем текстовый конвертер Pandoc.
  • Для пользователей Windows: Preferences → Browse Packages... → вручную создаём папку sublime-text-markmon.

  • Preferences → Package Settings → Markmon → Settings - User → вставляем в открывшийся файл следующий код и сохраняем файл:

    {
//On Windows try "markmon.cmd" if you get errors.
//If markmon is not on your path you'll need to use a full path to it
"executable": "markmon.cmd",
"port": 3002,
"pandoc_path": "",
"command": "pandoc -t HTML5 --mathjax",
"stylesheet": null,
"projectdir": null
}

Ctrl+Shift+P → Markmon launch → доступен предпросмотр в режиме реального времени. Вылезет командная строка, её не следует закрывать до тех пор, пока просмотр Markdown-разметки в браузере не будет представлять для вас необходимости, иначе придётся совершать рестарт самого Sublime Text 3.

Как установить LiveReload на Sublime Text 3?

Platform I used: Linux Mint 17+
I want to thank http://anthozano.fr/livereload-pour-sublime-text-3/. I was able to run live reload on sublime text 3 with the instructions in the website. However, the website is written in French (i believe — Google translate said), so I thought I could write the steps here.

Сначала установите возвышенный текст 3 отсюда http://www.sublimetext.com/3 или следуйте по-своему вы предпочитаете (я сделал это с Linux mint Package manager).

Во-вторых, установите управление пакетом отсюда https://packagecontrol.io/installation#st3 (инструкция четко указана на веб-сайте, поэтому я не очень ее объяснил).

Third, open package control (Shortcut : Ctrl+Shift+P) and search for Package Control: Add Repository

Теперь появляется область для ввода URL-адреса в нижней части окна возвышенного текста 3. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json .

Снова откройте управление пакетом и выполните поиск Package Control: Install Package , а затем найдите LiveReload в предстоящем окне.

Configure LiveReload Package Setting at Preferences > Package Settings > LiveReload > Setting - Default and paste this :

 
       { 
           "enabled_plugins": [ 
               "SimpleReloadPlugin", 
               "SimpleRefresh" 
           ]
       }

Now for your browser, install LiveReload plug in as below :
Firefox : http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

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

Note: Chrome users, for LiveReload to support file:// pages, go to chrome://extensions/, and check off Allow access to file URLs.

Snapshot taken from Safari for Mac OSX:

Наслаждайтесь, Live Reload с Sublime Text 3.

Благодаря Энтони Лозано для http://anthozano.fr/ LiveReload-вылить-возвышенный-текст-3/.

Как Установить Livereload На Sublime Text 3?

Платформа, которую я использовал: Linux Mint 17+

Я хочу поблагодарить http://anthozano.fr/livereload-pour-sublime-text-3/. Я смог запустить живую перезагрузку над возвышенным текстом 3 с инструкциями на веб-сайте. Тем не менее, веб-сайт написан на французском языке (я считаю, что Google translate сказал), поэтому я решил написать здесь шаги.

Сначала установите возвышенный текст 3 отсюда http://www.sublimetext.com/3 или следуйте по своему усмотрению (я сделал это с Linux mint Package manager).

Во-вторых, установите управление пакетом отсюда https://packagecontrol.io/installation#st3 (инструкция четко указана на веб-сайте, поэтому я сделал не объясняйте это много).

В-третьих, откройте управление пакетом (ярлык: Ctrl+Shift+P) и выполните поиск Package Control: Add Repository

Теперь появляется область для ввода URL-адреса в нижней части окна возвышенного текста 3. Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json.

Снова откройте управление пакетом и выполните поиск Package Control: Install Package, а затем выполните поиск LiveReload в следующем окне.

Настройте установку пакета LiveReload на Preferences > Package Settings > LiveReload > Setting - Default и вставьте это:
  

 
{ 
"enabled_plugins": [ 
"SimpleReloadPlugin", 
"SimpleRefresh" 
]
}

Теперь для вашего браузера установите подключаемый модуль LiveReload, как показано ниже:
Firefox: http://download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome: https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari: http://download.livereload.com/2.1.0/LiveReload-2.1.0.safariextz

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

Примечание. Пользователи Chrome, для поддержки LiveReload для страниц file://, перейдите к chrome://extensions/ и отметьте Allow access to file URLs.

Снимок сделан из Safari для Mac OSX:

Наслаждайтесь, живите перезагрузкой с возвышенным текстом 3.

Спасибо Энтони Лозано за http://anthozano.fr/livereload-pour-sublime-text-3/.

Sublime Text + Markdown Preview + Live Reload + MathJax для достижения просмотра в реальном времени md

Недавно я использовал sublime для написания md-файла, хотел посмотреть эффект отображения в реальном времени и, наконец, нашел такое решение. Кроме того, поскольку позднее необходимо отобразить большое количество математических формул (формат LaTeX), необходимо включить MathJax.

Package Control

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

Markdown Preview

Используйте сочетания клавишcmd+shift+p,войтиinstall package, А затем найти уценку предварительного просмотра установки. Этот плагин может конвертировать MD в HTML для предварительного просмотра в браузере.

У нас есть два способа предварительного просмотра md в браузере:
① Используйте те же сочетания клавишcmd+shift+pВыбор входаMarkdown Preview： Preview in BrowserА потом выходить с 3 вариантамиgithub,gitlabс участиемmarkdownПросто выберите любой здесь.
② Мы также можем использовать горячие клавиши для предварительного просмотра, сам этот плагин не имеет горячих клавиш, мы должны добавить его сами. включиPreferences——>key bindings, А потомDefault(OSX).sublime-keymap—UserВ дополнения:

[
	{
		"keys": ["ctrl+p"], 
		"command": "markdown_preview", 
		"args": {
			"target": "browser",
			"parser": "markdown" 
		}  
	}
]

Live Reload

Хотя вышеперечисленное можно предварительно просмотреть в браузере, это не в режиме реального времени. Например, после того, как мы введем и отредактируем md, нам нужно сохранить и затем набратьctrl+pСмотрите наши результаты отображения.

Аналогично, сначала установите live reload и пропустите его здесь!

Перед использованием Live Reload нам нужен наш Markdown Preview, чтобы включить автозагрузку. ПосмотретьPreferences->Package Settings->Markdown Preview->SettingsНашел в настройках по умолчанию слеваenable_autoreloadЕсли это правда, в общем случае это правда, если это не так, добавьте в пользовательские настройки справа:

{
    "enable_autoreload": true
}

Затем вы можете включить плагин Live Reload! То же использованиеcmd+shift+pВыбор входаLiveReload: Enable/disable plug-insВыберите послеSimple ReloadВот и все, вы можете просмотреть его в режиме реального времени (есть еще один с задержкой 400 мс, как следует из названия, задержка 400 мс). Затем, после того как вы отредактируете и отредактируете md, сохраните его, и браузер автоматически обновится!

Выше ссылка:https://blog.csdn.net/qq_20011607/article/details/81370236

MathJax

Поскольку в файле необходимо скомпилировать большое количество математических формул, необходимо включить MathJax. Но после долгого времени предварительный просмотр не имеет никакого эффекта!

Затем найдите ответ на переполнение стека:
how-to-enable-mathjax-rendering-in-sublime-text-markdown-preview

Ответ @VividD, принятый здесь, довольно рано, и сейчас такой возможности нет! Тогда есть ответ ниже, чтобы добавить в настройках:

{
    "enable_mathjax": true,
    "js": [
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js",
    ],
}

После этого я должен отредактироватьmath_config.js, Я не редактировал это здесьmath_config.js, (Не удалось найти этот файл !!!), а затем сказал в комментарии к этому ответу,github.com/facelessuser/MarkdownPreview/issues/12，
Для этой проблемы вам нужно добавить:

"markdown_extensions": { 
	"pymdownx.arithmatex": { 
		"generic": true 
	} 
}

После добавления этого параметра я обнаружил, что добавленные математические формулы могут отображаться! Но снова обнаружена новая проблема — автоматически сгенерированный каталог[TOC]Нет больше, и формат кода грязный!

Затем угадайте, является ли это проблемой с этим параметром, и нашел этот в настройке по умолчаниюmarkdown_extensionsИ это очень много, поэтому я подумал о том, чтобы установить его здесь и перезаписать все значения по умолчанию, поэтому я скопировал все значения по умолчанию:

{
	"enable_mathjax": true,
	"js": [
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js",
    ],
	"markdown_extensions": [
        
        
        
        
        "markdown.extensions.footnotes",
        "markdown.extensions.attr_list",
        "markdown.extensions.def_list",
        "markdown.extensions.tables",
        "markdown.extensions.abbr",
        "pymdownx.betterem",
        {
            "markdown.extensions.codehilite": {
                "guess_lang": false
            }
        },
        
        
        "pymdownx.extrarawhtml",

        
        {
            "markdown.extensions.toc":
            {
                "permalink": "\ue157"
            }
        },
        "markdown.extensions.meta",
        "markdown.extensions.sane_lists",
        "markdown.extensions.smarty",
        "markdown.extensions.wikilinks",
        "markdown.extensions.admonition",

        
        {
            "pymdownx.superfences": { 
                "custom_fences": [
                    {
                        "name": "flow",
                        "class": "uml-flowchart",
                        "format": {"!!python/name": "pymdownx.superfences.fence_code_format"}
                    },
                    {
                        "name": "sequence",
                        "class": "uml-sequence-diagram",
                        "format": {"!!python/name": "pymdownx.superfences.fence_code_format"}
                    }
                ]
            }
        },
        {
            "pymdownx.magiclink": {   
                "repo_url_shortener": true,
                "repo_url_shorthand": true
            }
        },
        "pymdownx.tasklist",     
        {
            "pymdownx.tilde": {  
                "subscript": false
            }
        },
        {
            "pymdownx.emoji": {  
                "emoji_index": {"!!python/name": "pymdownx.emoji.gemoji"},
                "emoji_generator": {"!!python/name": "pymdownx.emoji.to_png"},
                "alt": "short",
                "options": {
                    "attributes": {
                        "align": "absmiddle",
                        "height": "20px",
                        "width": "20px"
                    },
                    "image_path": "https://assets-cdn.github.com/images/icons/emoji/unicode/",
                    "non_standard_image_path": "https://assets-cdn.{(i)} \right | $$

Затем соответствующий эффект отображения выше:

Хорошо, очень красиво!

Наконец, добавьте одинОнлайн редактор LaTeX, Вы можете увидеть эффект отображения, а также дать некоторые часто используемые математические символы, очень удобно!

Какие плагины нужны в Sublime text 3 для эффективной работы? • Егор Мальцев

Уже несколько лет Sublime text 3 — это мой основной рабочий инструмент. Я пишу там текст, решаю задачи, веду ежедневный список дел, планирую проекты. Верстаю и программирую сайты я, разумеется, тоже там.

Интерфейс редактора с темой » Material Theme»

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

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

Package Control

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

sFTP

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

Emmet

Эммет для саблайма ускоряет верстку раз примерно в 20. Грубо говоря, это библиотека шоркодов набирая которые разворачиваются целые хтмл конструкции. Набираете а и нажимаете tab → появляется <a href=""></a>

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

Sidebar Enhanced

Добавляет новые пункты в контекстное меню боковой панели саблайма, такие как «новый файл», «вырезать» и пр. На самом деле ничего необычного, плагин создает меню, которое должно быть в любой программе. Странно, что его нет в саблайме по умолчанию.

Material Theme

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

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

Less

Добавляет синтаксис для лэсс файлов. Теперь less файлы стилей выглядят также, как css.

Sass

То же самое, что и прошлый плагин, но для sass.

Js Validate

Добавляет автоматическую валидацию js в саблайм.

DocBlockr

Добавляет шоркоды для создания документации в синтаксисе PhpDoc, JsDoc и других. После установки плагина пишите /**, нажимаете enter или tab и можете описывать функцию в удобном синтаксисе.

ACF Snippet

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

Live Reload

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

Для работы плагина на браузер нужно еще установить специальное расширение.

EML (E-mail)

Плагин позволяет отправлять почту прямо из саблайма. Я настраивал связку sublime + trello и sublime + wordpress, чтобы отправлять новые заметки в свою базу данных и плагин мне очень помог.

Markdown HTML Preview

Самый удобный для меня просмотрщик маркдауна. После нажатия shift + control + m документ открывается в браузере с html разметкой. Оттуда его можно копировать в любой wysiwyg редатор — в вордпресс, в эверноут, на страницу любого сайта с нормальной cms. Везде сохранится форматирование текста.

Markdown Editing

В саблайме удобно даже вести текущие задачи, если вам не нужно ничего лишнего

Самый удобный плагин для рекдактирования маркдауна в саблайме. Добавляет в редактор 3 новых вида разметки — Markdown, MultiMarkdown, Markdown GFM. Я на постоянной основе пользуюсь последней.

Плагин автоматически добавляет «-» при ведении списка, позволяет комментировать строки и снимать комментарии, подсвечивает заголовки и ссылки.

Единственный минус — при нажатии shift + tab сворачивает весь документ оставляя одни заголовки, а не регулирует отступы в строке. Впрочем, для больших маркдаун документов это может быть и плюсом.

Auto​Fold​Code

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

Список будет пополняться.

Настройка Sublime Text для предварительного просмотра вашего кода в веб-браузере

Предположим, вы кодируете HTML в Sublime Text и хотите проверить, как он выглядит в браузере. Некоторые текстовые редакторы (например, BBEdit) имеют функцию, позволяющую открывать страницу в браузере, но Sublime Text — нет. Вот как это сделать в Sublime Text.

Установите инструмент выбора браузера

Поскольку вы веб-разработчик, вы собираетесь (а) иметь более одного веб-браузера на вашем компьютере и (б) хотите протестировать свою работу в более чем одном браузере.Чтобы облегчить себе жизнь, вам нужно установить инструмент выбора браузера. В моей книге Mac OS X Snow Leopard для опытных пользователей я объяснил это так:

У меня на Mac всегда есть несколько веб-браузеров, и я люблю переключаться между ними. На самом деле, иногда я нажимаю ссылку и хочу открыть ее в Safari, потому что я хочу распечатать страницу и считаю, что Safari делает это лучше, чем любой другой браузер, но через несколько минут я нажимаю ссылку и хочу открыть его в Firefox, потому что у меня этот браузер настроен для загрузки музыки и фильмов.В Mac OS X, как и в Windows и Linux, я могу указать браузер по умолчанию для моей системы, но этот браузер используется для всего. Было бы неплохо, если бы я мог выбирать между браузерами «на лету» по мере необходимости?

С помощью инструмента выбора браузера вы можете! Вот мои рекомендации:

  • Mac OS X: Раньше я действительно любил Choosy, но со времен Mountain Lion он сломался. Итак, теперь я использую MultiBrowser. Это не так гладко, но работает с Mountain Lion, и это бесплатно (хотя я был счастлив заплатить 12 долларов за Choosy)
  • Windows: Я никогда не использовал его, но, похоже, вам нужен Browser Chooser.

Установите их, настройте для распознавания веб-браузеров на вашем компьютере (Firefox, Chrome, Opera, Safari и IE, если вы используете Windows) и установите их в качестве веб-браузера по умолчанию на вашем компьютере. Как вы это сделаете, зависит от вашей ОС:

  • Mac OS X: откройте Safari и выберите Safari> Настройки> Общие. В качестве веб-браузера по умолчанию выберите MultiBrowser.
  • Windows: щелкните меню «Пуск» (или его эквивалент) и введите «Установить программы по умолчанию» в поле поиска.В появившемся окне выберите Browser Chooser, а затем нажмите Set This Program As Default.

Метод 1. Установите подключаемый модуль «Просмотр в браузере»

Это самый простой способ, но я не смог заставить его работать на моем Mac. Обратите внимание: я предполагаю, что вы установили расширение Package Control для Sublime Text.

  1. Нажмите Command-Shift-P (если вы используете Mac) и Ctrl-Shift-P (если вы используете Windows), чтобы открыть палитру команд.

  2. Введите Установите пакет , пока не увидите, что выбран «Управление пакетами: Установить пакет».Нажмите Ввод.

  3. В текстовом поле начните вводить Просмотр в браузере , пока этот пакет не будет выбран. Как только это произойдет, нажмите Enter, чтобы установить его.

  4. Перезапустить Sublime Text.

Теперь, когда у вас открыта веб-страница в Sublime Text, просто нажмите Ctrl-Alt-V, и в вашем браузере должен открыться инструмент выбора, позволяющий вам выбрать, какой браузер открыть.

Подробнее о пакете «Просмотр в браузере» можно прочитать на GitHub.

Метод 2: Создание системы сборки

Это немного больше работы, но вы также получаете больший контроль.

  1. В Sublime Text перейдите в Инструменты> Система сборки> Новая система сборки. В Sublime Text откроется новая вкладка с именем untitled.sublime-build , со следующим текстом в ней 1 :

      {
    "cmd": ["make"]
}

  2. Если вы используете Mac, замените его следующим:

      {
    «cmd»: [«открыть», «-a», «/Applications/MultiBrowser.app», «$ file»]
}

    Если вы используете Windows, замените его следующим:

      {
    "cmd": ["C: \ Program Files \", "$ file"]
}

  3. Сохраните файл.Назовите его . Выберите Browser.sublime-build . Sublime Text должен быть достаточно умным, чтобы разместить его в нужном для вас месте, но если это не так, сохраните его в следующих местах:

    • Mac OS X: ~ / Библиотека / Поддержка приложений / Sublime Text 2 / Пакеты / Пользовательский
    • Окна:

  4. Перезапустить Sublime Text.

Теперь, когда вы хотите предварительно просмотреть свою работу в Sublime Text в веб-браузере, выполните одно из следующих действий:

  • Инструменты> Сборка
  • Нажмите Command-B (Mac) 2 или Ctrl-B (Windows)

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

Вы можете узнать больше о Build Systems on Sublime Text на http://www.sublimetext.com/docs/build.

sublimetext3 — Как мне установить LiveReload на Sublime Text 3?

Платформа, которую я использовал: Linux Mint 17+
Я хочу поблагодарить http://anthozano.fr/livereload-pour-sublime-text-3/. Мне удалось запустить live reload для Sublime Text 3 с инструкциями на веб-сайте. Однако веб-сайт написан на французском (я полагаю, — сказал переводчик Google), поэтому я подумал, что могу написать здесь шаги.

Сначала установите sublime text 3 отсюда http://www.sublimetext.com/3 или следуйте своему собственному желанию (я сделал это с помощью диспетчера пакетов Linux mint).

Во-вторых, установите package control отсюда https://packagecontrol.io/installation#st3 (инструкция четко приведена на веб-сайте, поэтому я не стал ее подробно объяснять).

В-третьих, откройте элемент управления пакетом (ярлык: Ctrl + Shift + P ) и найдите элемент управления пакетом : добавить репозиторий

Теперь идет область для ввода URL-адреса в нижней части окна Sublime Text 3.Введите https://raw.github.com/Grafikart/ST3-LiveReload/master/package.json .

Снова откройте элемент управления пакетами и найдите Управление пакетами: установите пакет , а затем найдите LiveReload в открывшемся окне.

Настройте параметр пакета LiveReload в разделе «Настройки »> «Параметры пакета»> «LiveReload»> «Настройка - по умолчанию » и вставьте это:

       {
           "enabled_plugins": [
               "SimpleReloadPlugin",
               «SimpleRefresh»
           ]
       }

Теперь для вашего браузера установите плагин LiveReload в , как показано ниже:
Firefox : http: // download.livereload.com/2.1.0/LiveReload-2.1.0.xpi
Chrome : https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei
Safari : http: //download.livereload. com / 2.1.0 / LiveReload-2.1.0.safariextz

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

Примечание: пользователей Chrome, чтобы LiveReload поддерживал страницы file: // , перейдите на chrome: // extensions / и отметьте Разрешить доступ к URL-адресам файлов .

Снимок из Safari для Mac OSX:

Наслаждайтесь, живая перезагрузка с Sublime Text 3.

Спасибо Энтони Лозано за http://anthozano.fr/livereload-pour-sublime-text-3/.

Как настроить возвышенный текст для редактирования Markdown

Установите несколько пакетов, чтобы настроить Sublime Text для редактирования Markdown.

Недавно установленный Sublime Text не предлагает какой-либо конкретной поддержки Markdown — без выделения синтаксиса, без специального курсивного или полужирного форматирования, без сочетаний клавиш, а также без предварительного просмотра или вывода HTML.Вы можете добавить фантастическую тему редактирования Markdown, встроенный предварительный просмотр (почти как WYSIWYG), сочетания клавиш, автозаполнение списка, предварительный просмотр в браузере и многие другие функции. Вам нужно установить несколько пакетов и настроить несколько файлов настроек, чтобы все настроить. Для нового пользователя совершенно непонятно, как это сделать, поэтому я подробно расскажу обо всем этом ниже.

Как установить пакеты

Сначала установите Package Control, менеджер пакетов Sublime Text

Существует простой в использовании установщик пакетов, но не сразу понятно, как его установить или даже как использовать, если вы новичок в Sublime Text.Вам необходимо: открыть консоль Python (либо набрать « control + », либо щелкнуть меню View> Show Console), вставить какой-нибудь скрипт Python и выполнить его (следуйте инструкциям по установке здесь).

Шаг 1. Консоль Python в Sublime Text.

Шаг 2: Консоль Sublime Text с командой установки Package Control в ней. Нажмите , введите на этом этапе, перезапустите Sublime Text, когда скрипт будет готов.

(Если вы никогда не слышали о Python, не знаете, что такое Python, и не знаете, что такое консоль в этом отношении, не волнуйтесь.Это единственный раз, когда вам нужно попасть в мир, который только разработчики программного обеспечения называют своим домом.)

Как установить пакет с помощью управления пакетами

После установки Package Control вы можете установить пакет с помощью простого процесса:

  1. Введите control + shift + p top, чтобы открыть палитру команд.

  2. Начните вводить « установить ». По мере ввода палитра команд фильтрует команды до тех, которые содержат вводимые вами символы.

  3. Выберите команду «Управление пакетами: Установить» и нажмите , введите .

  4. Через некоторое время палитра команд заполнится именами пакетов.

  5. Начните вводить имя пакета, который вы хотите установить, или ключевое слово, например «markdown», чтобы перечислить все пакеты с ключевым словом в их именах.

  6. Выберите нужный пакет (с помощью клавиш со стрелками), нажмите введите , и пакет будет загружен и установлен.

  7. Закройте и перезапустите Sublime Text, чтобы активировать только что установленный пакет.

Как настроить пакеты

Способ обработки предпочтений (включая настройки пакетов) в Sublime Text уникален и эффективен. Это также одна из самых сложных систем предпочтений, которые я когда-либо видел.

Все настройки Sublime Text записаны в файлах JSON, которые открываются в самом редакторе. Файлы JSON очень легко читать. Комментарии начинаются с двойной косой черты ( // ), а предпочтения представляют собой просто пары имя-значение, разделенные запятыми.Формат прост в использовании, а файлы настроек по умолчанию очень хорошо документированы с комментариями, объясняющими, что делает каждый параметр. Я использую встроенную команду «Найти» ( control + f ) для поиска любых параметров, которые я хочу настроить.

Sublime Text, а также каждый плагин, проект и тип синтаксиса имеют свои собственные файлы настроек. Это позволяет сделать так, чтобы редактор выглядел и работал совершенно по-разному для разных типов текстовых файлов. Это важно для поддержки нескольких языков программирования и работает одинаково для открытого текста (.txt) и Markdown (.md). В Windows вы получаете доступ к файлам настроек Sublime Text в меню «Настройки».

Существует не только много разных мест для настроек, но и два файла для каждого типа настроек. Есть файл настроек «по умолчанию» и файл настроек «пользователя», который отменяет настройки по умолчанию. Вам следует вносить изменения только в «пользовательские» файлы настроек, потому что файлы настроек по умолчанию могут / будут перезаписаны, если вы обновите Sublime Text или его плагины. Вы должны научиться искать желаемые настройки в файле настроек «по умолчанию», а затем вводить свои предпочтения в соответствующие файлы настроек «пользователя».Если вы этого не сделаете, вы потеряете свои настройки при автоматическом обновлении плагина.

Настройки применяются каскадно, при этом общие настройки (такие как глобальные настройки Sublime Text) переопределяются более конкретными настройками (такими как настройки проекта, а затем настройки, специфичные для синтаксиса), причем «пользовательские» настройки всегда имеют приоритет над настройками «по умолчанию». В итоге вы получаете настройки, извлекаемые из множества файлов (в основном из файлов по умолчанию, которые поставляются с редактором или пакетов, которые вы устанавливаете, с некоторыми ключевыми переопределениями, исходящими из файлов пользовательских настроек, которые вы пишете), на основе документ, над которым вы работаете.

Установите пакет MarkdownEditing

Пакет «MarkdownEditing» предоставляет большую часть, но не все, функциональные возможности Markdown, необходимые для Sublime Text. Легко установить:

  1. Используя Package Control (следуя инструкциям выше), установите пакет под названием «MarkdownEditing». Эти шаги будут:

    1. Введите control + shift + p, чтобы вызвать палитру команд.
    2. Введите «установить» и нажмите , введите . Подождите, пока появится список пакетов.

    3. Введите «уценка», несколько раз нажмите клавиши со стрелками, чтобы выбрать «MarkdownEditing», и нажмите , введите .

  2. Перезапустить Sublime Text.

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

Обратите внимание, что после перезапуска Sublime Text все функции пакета MarkdownEditing будут применяться только к файлам Markdown, например к файлам с расширением.md расширение. Файлы с другими расширениями, например .txt, не будут рассматриваться как файлы Markdown, если вы не выполните дополнительную настройку. (Я предпочитаю, чтобы файлы .txt , а не обрабатывались так, как если бы они были в Markdown, потому что часто я работаю с файлами данных с расширениями .txt.)

Возможности MarkdownEditing

Пакеты MarkdownEditing устанавливают приятную для глаз тему «серый на сером» для файлов Markdown в редакторе. Что еще более важно, он обеспечивает встроенного форматирования Markdown.Это означает, что редактор выделяет заголовки полужирным шрифтом и выделяет слова, заключенные в * или _ символов, жирным шрифтом и курсивом. Разделы, выделенные для цитат блока и исходного кода, также будут по-разному закрашены. Он также будет разумно обрабатывать маркированные списки и нумерованные списки, что может сэкономить много времени при вводе текста. Вдобавок к этому Sublime Text будет использовать двойные кавычки, круглые скобки, подчеркивания и звездочки, чтобы вы закрывали их при вводе.

Кроме того, пакет MarkdownEditing позволяет использовать следующие полезные сочетания клавиш:

  • Теги заголовков ( # ) могут быть автоматически заполнены как в пустых строках, так и в выделенном тексте, нажав control + 1 , control + 2 и так далее, вплоть до control + 6 .
  • Чтобы выделить некоторые слова жирным шрифтом или курсивом, просто выделите текст и введите * (или _ ) один или два раза; ваш выбор будет окружен звездочками (или знаками подчеркивания) с обеих сторон. (Начиная с версии 2.0.0 пакета MarkdownEditing, control + b и control + i также выделены жирным шрифтом и курсивом. Если вы предпочитаете использовать control + b для создания файлов Markdown), вам придется переопределить control + b в файле привязки пользовательских клавиш.

Настроить шрифты для редактирования Markdown в файле пользовательских настроек пакетов

Мой предпочтительный шрифт в Windows для написания — Consolas (Ubuntu Mono занимает второе место). Я установил этот шрифт для редактирования Markdown, отредактировав файл пользовательских настроек, принадлежащий пакету EditingMarkdown. Вы можете открыть этот файл, перейдя в меню: «Настройки»> «Настройки пакета»> «Редактирование уценки»> «Настройки разметки» & endash; По умолчанию.

Файл исходных настроек пользователя будет пустым.Вот мой файл. Обратите внимание, что вы должны придерживаться этого формата (называемого JSON) со всеми фигурными скобками, кавычками и т. Д.

  {
    "font_face": "Консоли",
    "font_size": 12,
    "save_on_focus_lost": правда,
    "line_numbers": истина
}

Первые два предпочтения, которые я установил в своих пользовательских настройках для файлов Markdown, устанавливают начертание шрифта (это имя шрифта) и размер шрифта. Третий параметр, «save_on_focus_lost», заставляет Sublime Text автоматически сохранять файл, когда я переключаюсь ( alt + tab ) в другое приложение.Последний параметр гарантирует, что у меня есть номера строк в левом желобе, что является моим личным предпочтением.

Установите пакет предварительного просмотра Markdown

Sublime Text не может предложить настоящий предварительный просмотр Markdown в реальном времени, как это делает Markdown Pad. Однако это не слишком большое ограничение, потому что предварительный просмотр в реальном времени становится гораздо менее важным, когда вы знакомы с синтаксисом Markdown. Однако вы можете предварительно просмотреть Markdown во внешнем браузере, установив пакет «Markdown Preview».

  1. Используя Package Control (следуя инструкциям выше), установите пакет под названием «Markdown Preview».Это будет:

    1. Введите control + shift + p , чтобы вызвать палитру команд
    2. Введите « установить » и нажмите введите . Подождите, пока появится список пакетов.

    3. Введите « markdown preview », нажмите несколько раз клавиши со стрелками, чтобы выбрать «Markdown Preview», и нажмите , введите .

  2. Отредактируйте файл «Привязки клавиш — Пользователь», используя пункты меню: «Настройки»> «Привязки клавиш — Пользователь» (или используйте палитру команд).

  3. Добавьте следующую запись в файл «Привязки клавиш — Пользователь». Если в вашем файле есть другие привязки клавиш, убедитесь, что между ними есть запятые. 

      {"keys": ["alt + m"], "command": "markdown_preview", "args": {"target": "browser", "parser": "markdown"}}

  4. (Необязательно) Если вы хотите использовать control + b для команды сборки, вместо выделенной жирным шрифтом команды MarkdownEditing добавьте следующую запись в файл «Привязки клавиш — Пользователь». Если в вашем файле есть другие привязки клавиш, убедитесь, что между ними есть запятые. 

      {"ключи": ["ctrl + b"], "команда": "сборка"}

  5. Сохраните файл привязки клавиш.

  6. При работе с файлом Markdown введите alt + m , чтобы сгенерировать предварительный просмотр вашего документа в формате HTML, который откроется в браузере по умолчанию. (Вы также можете вызвать команду Markdown Preview с помощью палитры команд. Нажмите control + shift + p , чтобы вызвать палитру команд, затем введите « Preview », выберите «Markdown Preview: Python Markdown: Preview in Browser» , и нажмите введите .)

Sublime Text + Markdown Preview + Live Reload + MathJax для предварительного просмотра md

в реальном времени

Недавно я использовал sublime для записи md-файла, я хочу увидеть эффект отображения в реальном времени и, наконец, найти такое решение. Более того, поскольку позже вам потребуется отобразить большое количество математических формул (формат LaTeX), вам необходимо открыть MathJax.

Пакетный контроль

Излишне говорить, что вы хотите загрузить плагин, вы должны сначала установить Package Control.

Предварительный просмотр Markdown

Используйте ярлыки cmd + shift + p , введите install package Затем найдите установку предварительного просмотра уценки. Этот плагин может конвертировать MD в HTML для предварительного просмотра в браузере.

У нас есть два способа предварительного просмотра md в браузере:
1 те же самые горячие клавиши cmd + shift + p , выбор ввода Предварительный просмотр Markdown ： Предварительный просмотр в браузере И затем выйдите с 3 вариантами github , gitlab с уценка , выберите один из них здесь.
2 Мы также можем использовать горячие клавиши для предварительного просмотра. Сам плагин не имеет ярлыка, поэтому нам нужно добавить его самостоятельно. включите настройки ——> привязки клавиш И затем на по умолчанию (OSX). Sublime-keymap — User In, добавьте:

  [
{
"ключи": ["ctrl + p"],
"команда": "markdown_preview",
"args": {
"target": "браузер",
"парсер": "уценка"
}
}
]

Живая перезагрузка

Хотя вышеуказанное можно предварительно просмотреть в браузере, но не в реальном времени, например, после того, как мы введем команду edit md, нам нужно сохранить сохранение, затем набрать ctrl + p Go и посмотреть наши результаты.

То же самое, сначала установите live reload, здесь пропущено!

Перед использованием Live Reload нам нужно, чтобы наш Markdown Preview включил автоматическую перезагрузку. Просмотр настроек -> Настройки пакета-> Предварительный просмотр Markdown-> Настройки , находится в настройках по умолчанию слева. enable_autoreload Верно это или нет, как правило, верно. Если это не так, оно добавляется в правильную настройку пользователя:

  {
    "enable_autoreload": правда
}

Тогда вы можете включить плагин Live Reload! То же самое использование cmd + shift + p , выбор входа LiveReload: включить / отключить плагины , затем выбрать Простая перезагрузка Вы можете просмотреть его в реальном времени (также есть задержка 400 мс, как следует из названия, задержка 400 мс).Затем, после того как вы отредактируете файл edit md, сохраните его, и браузер автоматически обновится!

Ссылка выше: https: //blog.csdn.net/qq_20011607/article/details/81370236

MathJax

Поскольку вам нужно скомпилировать большое количество математических формул в вашем файле, вам необходимо включить MathJax. Но кидать долго, на превью нет никакого эффекта!

Затем найдите ответ на Stack Overflow:
how-to-enable-mathjax-rendering-in-sublime-text-markdown-preview

Ответ на @VividD, который был здесь принят, уже относительно рано, и сейчас такой возможности нет! Тогда есть ответ ниже, который нужно добавить в настройки:

  {
    "enable_mathjax": правда,
    "js": [
    "https: // cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js ",
            "res: //MarkdownPreview/js/math_config.js",
    ],
}

После этого мне нужно его отредактировать. math_config.js . Я здесь не редактировал. math_config.js , (не могу найти этот файл !!!), а затем сказал в комментариях к этому ответу: github.com / facelessuser / MarkdownPreview / issues / 12 ，
Эту проблему также необходимо добавить:

  "markdown_extensions": {
"pymdownx.arithmatex": {
"generic": правда
}
}

Я добавил этот параметр и обнаружил, что добавленные математические формулы отображаются! Но обнаружил, что новой проблемой является автоматически сгенерированный каталог. [TOC] Не показано, и формат кода полностью испорчен!

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

  {
"enable_mathjax": правда,
"js": [
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res: // MarkdownPreview / js / math_config.js ",
    ],
"markdown_extensions": [
        
        
        
        
        "markdown.extensions.footnotes",
        "markdown.extensions.attr_list",
        "markdown.extensions.def_list",
        "markdown.extensions.tables",
        "markdown.extensions.abbr",
        "pymdownx.betterem",
        {
            "markdown.extensions.codehilite": {
                "guess_lang": ложь
            }
        },
        
        
        "pymdownx.extrawhtml",

        
        {
            "уценка.extension.toc ":
            {
                "постоянная ссылка": "\ ue157"
            }
        },
        "markdown.extensions.meta",
        "markdown.extensions.sane_lists",
        "markdown.extensions.smarty",
        "markdown.extensions.wikilinks",
        "markdown.extensions.admonition",

        
        {
            "pymdownx.superfences": {
                "custom_fences": [
                    {
                        "имя": "поток",
                        "class": "uml-блок-схема",
                        "формат": {"!! python / name": "pymdownx.superfences.fence_code_format "}
                    },
                    {
                        "имя": "последовательность",
                        "class": "uml-диаграмма-последовательность",
                        "формат": {"!! python / name": "pymdownx.superfences.fence_code_format"}
                    }
                ]
            }
        },
        {
            "pymdownx.magiclink": {
                "repo_url_shortener": правда,
                "repo_url_shorthand": правда
            }
        },
        "pymdownx.список заданий",
        {
            "pymdownx.tilde": {
                "нижний индекс": ложь
            }
        },
        {
            "pymdownx.emoji": {
                "emoji_index": {"!! python / name": "pymdownx.emoji.gemoji"},
                "emoji_generator": {"!! python / name": "pymdownx.emoji.to_png"},
                "alt": "короткий",
                "параметры": {
                    "attributes": {
                        "выровнять": "абсурдно",
                        "height": "20 пикселей",
                        "width": "20px"
                    },
                    "image_path": "https: // assets-cdn.github.com/images/icons/emoji/unicode/ ",
                    "non_standard_image_path": "https://assets-cdn.github.com/images/icons/emoji/"
                }
            }
        },
        {
        "pymdownx.arithmatex": {
        "generic": правда
        }
        }
    ],
}

Тогда найдите красоту, математическая формула может показать, каталог также может быть автоматически сгенерирован, формат кода не испорчен!

Например, например:

  ** Типичным показателем производительности для проблем регрессии является среднеквадратическая ошибка (RMSE) **

 RMSE соответствует евклидовой норме, также известной как норма $ \ iota_ {2} $, обозначаемой как $ \ left \ | .{(i)} \ right | $$

Затем соответствующий эффект отображения вверху:

хорошо, очень красиво!

Наконец, соберите один онлайн-редактор LaTeX, вы можете увидеть эффект отображения, а также дать несколько часто используемых математических символов, очень удобно!

Sublime Text 3 Config

Я перешел с Atom на Sublime. Atom — хороший редактор с множеством функций, но у него много проблем с производительностью для того, что я хочу делать.

Ниже приведены мои настройки для справки.Когда я захочу сделать это снова через год (или на новой машине), я могу просто использовать все здесь или просто использовать файлы конфигурации.

Install Package Control

Install package control, используя: https://packagecontrol.io/installation.

Установка пакетов

Теперь вы можете устанавливать пакеты.

  1. Нажмите Ctrl + Shift + P , чтобы открыть палитру команд.
  2. Тип Установите , а затем выберите Package Control: Install Package .
  3. Введите имя пакета, который вы ищете для его поиска.
  4. Выберите пакет и нажмите Enter.

Пакеты Markdown

  1. Markdown Extended: Подсветка синтаксиса.
  2. Предварительный просмотр Markdown.
  3. Markdown Editing: горячие клавиши (например, ctrl + 1 означает заголовок 1).
  4. Monokai Extended: Нужен для мелирования.
  5. LiveReload: для предварительного просмотра уценки в реальном времени.
  6. MarkdownTOC: автоматическое создание интерактивного оглавления для документов с уценкой.
  7. TOML: Подсветка TOML.

Как использовать файлы конфигурации

После установки пакетов просто скопируйте файлы конфигурации в каталог параметров пользовательского пакета. В Windows это будет "% Appdata% \ Sublime Text 3 \ Packages \ User \" (не забудьте двойные кавычки, если вы хотите просто вставить его в строку запуска).

Настройки и расположение пакета

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

Настройки

можно открыть в разделе «Настройки »> «Настройки пакета»> «Настройки по умолчанию / Пользовательские ». Обычно я копирую из файла по умолчанию пользователю, удаляю ненужные настройки и отменяю остальные.

Параметры пакета в Windows: % Appdata% \ Sublime Text 3 \ Packages \ User \ package-name.sublime-settings .

Основные настройки могут быть переопределены в Preferences.sublime-settings или доступны через Preferences> Settings .Это откроет два файла в одном окне. Слева — настройки по умолчанию, а справа — файл настроек пользователя. Скопируйте с левой панели на правую и переопределите.

Выделение Markdown и проверка орфографии

Markdown Editing имеет собственную цветовую схему. Мне это не нравится. Вместо этого я использую Monokai Extended . Его можно выбрать из Preferences> Color Scheme> Monokai Extended> Monokai Extended .

Чтобы он заработал, тип документа должен быть установлен на Расширенная уценка .Это можно установить, щелкнув тип документа (внизу справа).

Затем вы хотите настроить все файлы уценки, которые будут открываться как Markdown Extended для выделения синтаксиса (включая блоки кода). Это можно сделать:

  • Просмотр (меню)> Синтаксис> Открыть все с текущим расширением как> Markdown Extended .

Этот метод устанавливает его только для текущего расширения (например, md).

Перейдите в «Настройки»> «Настройки» - «Специфичный для синтаксиса» или отредактируйте настройки пакета Markdown Extended.sublime-settings и добавьте следующее:

  {
  "расширения":
  [
    "мкр",
    "уценка",
    "больше расширений"
  ],
  "spell_check": true // включить проверку орфографии
}

Обратите внимание, что Markdown Editing добавил себя для файлов .mdown . Вы можете просто удалить файл Markdown.sublime-settings и добавить расширения в предыдущий файл.

Настройка Markdown Live Preview

Включите LiveReload через настройки

Добавьте следующее в пользовательские настройки для пакета LiveReload LiveReload.sublime-settings :

  {
  "enabled_plugins": [
   "SimpleReloadPlugin",
   "SimpleRefreshDelay" // использовать SimpleRefresh для перезагрузки без задержки
  ]
}

Таким образом, его не нужно повторно включать после каждого запуска.

Включить LiveReload вручную (повторять после каждого запуска Sublime)

  1. Откройте палитру команд и введите livereload .
  2. Выбрать LiveReload: включить / выключить плагины .
  3. Выберите Включить - простая перезагрузка с задержкой (400 мс) .
  4. Вы должны увидеть консольное сообщение о том, что функция включена. Обратите внимание, что в меню будет указано Включить независимо от того, включен он или нет, если он уже включен, выбор меню отключит его, поэтому обязательно посмотрите сообщения консоли.

Настроить предварительный просмотр Markdown

Предположительно эти два плагина работают из коробки. В моем случае этого не было. Мне пришлось добавить автозагрузку в предварительный просмотр уценки. Я удалил парсер github , потому что он отправляет файл уценки в Github для обработки.

Добавьте следующее в MarkdownPreview.sublime-settings :

  {
  "enable_autoreload": правда,
  "enabled_parsers": ["уценка"],
  "enable_highlight": правда
}

Файлы предварительного просмотра

  1. Откройте палитру команд и выберите Предварительный просмотр уценки: предварительный просмотр в браузере .
  2. Откроется новое окно обозревателя, в котором отобразится подготовленный документ.
  3. Браузер должен обновляться после каждого сохранения.

Preview Keybind

Добавьте следующее в Default (Windows).sublime-keymap или откройте его через Preferences> Key Bindings .

  [
  {
  "ключи": [
    "alt + p"
  ],
  "команда": "markdown_preview",
  "args": {
    "target": "браузер",
    "парсер": "уценка"
  }
  }
]

Markdown Оглавление

  1. Установить пакет Markdown TOC .

  2. Добавьте следующие пользовательские настройки в MarkdownTOC.sublime-settings :

      {
"defaults": {
"autoanchor": правда,
"автолинк": правда,
}
}

  3. В любом документе с уценкой поместите курсор в то место, где вы хотите получить T0C.Затем Tools> MarkdownTOC> Insert TOC .

  4. Всеми настройками также можно управлять в T0C, добавляя их в верхний комментарий. Например:

      

- [Заголовок 1]
- [Заголовок 2]

TOC Keybind

Добавьте следующее в раскладку клавиш Default (Windows) .sublime-keymap :

  {
  "ключи": [
    "alt + t"
  ],
  "command": "markdowntoc_insert" // обновление markdowntoc_update
}

Изменить жирный и курсивный маркеры

По умолчанию при редактировании уценки жирный маркер — __ , а курсив — _ .Я больше привык к ** для полужирного и * для курсива.

Просто добавьте файл с именем Bold and Italic Markers.tmPreferences и поместите его в обычный каталог пользователя.

  



   имя 
   Полужирный и курсивный маркеры 
   область действия 
  <строка> текст.html.markdown 
   настройки 
  
     переменные оболочки 
    <массив>
      
         имя 
         MD_BOLD_MARKER 
         значение 
         ** 
      
      
         имя 
         MD_ITALIC_MARKER 
         значение 
         * 
      
    
  
   uuid 
   E3F0F1B0-53C8-11E3-8F96-0800200C9A66

Фрагменты vs.Завершено

По сути, оба делают то же самое.

  1. Фрагменты — это XML, а дополнения — JSON. Фрагменты
  2. легче читать, потому что вы можете иметь новые строки в тегах CDATA , в то время как вам нужно избегать двойных кавычек и использовать специальные символы для новых строк (например, \ n ).
  3. Для каждого файла разрешен только один фрагмент, в то время как вы можете иметь несколько завершений в одном файле.

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

Snippet

Tools> Developer> New Snippet создаст и откроет шаблон. Файлы хранятся в каталоге User аналогично файлам конфигурации (хотя пакеты могут иметь свои собственные фрагменты). Расширение для сниппетов — sublime-snippet .

Страница неофициальной документации: http://docs.sublimetext.info/en/latest/extensibility/snippets.html.

Фактический фрагмент находится в теге содержимого , который поддерживает новые строки внутри CDATA .

Например, фрагмент для моего шорткода Hugo codecaption (ссылка) (удалите / * s).

  
   }}
$ {3: текст по умолчанию}
{{}}
    ]]> 
  
   кодовая шапка 
  
  <область> текст.html.markdown 
  
   Шорткод Codecaption Hugo

$ 1 означает, что курсор будет там после активации фрагмента, после ввода и нажатия вкладки мы перейдем к $ 2 . $ 3 имеет текст по умолчанию, который будет выделен после перехода к нему курсора и может быть перезаписан.

Область видимости — это то место, где будет активен фрагмент.Без области действия он активен во всех документах. Чтобы получить текущую область видимости, нажмите ctrl + alt + shift + p или выберите Инструменты> Разработчик> Показать имя области .

То же самое можно сделать для imgcaption (ссылка) (удалите / * , * / s).

  
   }}]]> 
  
   imgcap 
  
  <область> текст.html.markdown 
  
   Шорткод Imagecaption Hugo

Завершение

Я предпочитаю завершения, потому что все может быть в одном файле. Для большинства целей мы можем рассматривать их как фрагменты. Это файлы JSON, поэтому избегайте " с \" , а новая строка — \ n .

Ссылка на неофициальную вики: http://docs.sublimetext.info/en/latest/reference/completions.html.

Завершение хранится в каталоге User с расширением .sublime-completions .

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

  {
   "scope": "text.html.markdown - источник - meta.tag, punctuation.definition.tag.begin",

   «доработки»:
   [
      {"trigger": "codecap \ tCodecaption Hugo Shortcode", "contents": "{{}} \ n $ {3: текст по умолчанию} \ n {{}} "},
      {"trigger": "imgcap \ tImagecaption Hugo Shortcode", "contents": "{{}}"}
   ]
}

Обратите внимание на триггер , первая часть — это фактический триггер, а все после \ t — это подсказка, которая появляется в списке автозаполнения, как и описания фрагментов.

Есть тонны файлов завершения для разных языков и фреймворков онлайн и в управлении пакетами.

Триггеры фрагмента и завершения

Вкратце введите триггер (или его части, если он уникален) и нажмите вкладку .Если есть фрагменты и завершения с одинаковыми триггерами, фрагменты всегда имеют приоритет.

  • Набрав codecap и нажав вкладку , вы активируете фрагмент / завершение.
  • Набрав код и ctrl + пробел отобразит его в меню автозаполнения.
  • При вводе сниппета в палитре команд будут показаны все фрагменты для текущей области вместе с их триггерами.

Исправление «Ошибка сборки MarGo» для GoSublime в Windows

Исполняемый файл GoSublime содержит версию Go.В большинстве случаев он не может получить версию в Windows, и сборка завершится неудачно:

  MarGo: сбой сборки MarGo
cmd: `['C: \\ Go \\ bin \\ go.exe', 'build', '-tags', '', '-v', '-o',
       'gosublime.margo_r17.12.17-1_go? .exe', 'gosublime / cmd / margo'] `

Где ? — это неизвестная версия го.

Отредактируйте этот файл:

  • % AppData% \ Sublime Text 3 \ Packages \ GoSublime \ gosubl \ sh.py

Найдите эти строки:

  cmd = ShellCommand ('go run sh-bootstrap.идти')
cmd.wd = gs.dist_path ('gosubl')
cr = cmd.run ()
raw_ver = ''
ver = '' # Измените это на '1'

Измените ver на что угодно, я обычно делаю 1 . Перезапустите Sublime Text, и Марго построит.

К сожалению, это необходимо делать для каждой новой версии GoSublime.

Markdown предварительный просмотр sublime Text3 в реальном времени

Как упоминалось выше в разделе «Установка и использование управления пакетами Sublime Text3», Sublime имеет мощные расширения плагинов, и в этой статье подробно рассказывается, как предварительно просмотреть или даже обновить предварительный просмотр в реальном времени при написании Markdown документация с Sublime.

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

Комбинация Ctrl + Shift + P вызовите панель команд и введите Управление пакетами: Установить пакет , нажмите Enter и войдите в пакет. имя, которое будет установлено (одно за другим, а не несколько одновременно) в поле поиска. Через несколько секунд установка будет успешной.

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

функция

0

2

4

5

6

8

0

2

3

4

функция
1 MarkdownEditing 3 плагин, улучшающий функции редактирования Markdown в Sublime Markdown
7 MarkdownПредварительный просмотр 9 Markdown to HTML, предварительный просмотр в браузере
MarkdownLivePreview обеспечивает предварительный просмотр в реальном времени в поле редактирования
LiveReload 1 подключаемый модуль, который обеспечивает предварительный просмотр обновления в реальном времени документов, таких как md / HTML

5
Следующие несколько подключаемых модулей представлены одновременно.

1. MarkdownEditing
Редактор Markdown, как следует из названия, является обязательным плагином для авторов Markdown, который не только выделяет синтаксис Markdown, но также поддерживает выделение синтаксиса для многих языков программирования. Специальное примечание
: MarkdownEditing доступен только для файлов в формате md \ mdown \ MMD \ TXT. Функции

MarkdownEditing реализует серию оптимизаций для редактирования документов Markdown, как визуально, так и удобно. Например:
Цветовые схемы, такие как Byword и iA Writer, автоматически сопоставляют звездочки (*), подчеркивания (_) и обратные кавычки (‘) в выделенном тексте, нажимая указанные выше символы, чтобы автоматически добавлять совпадающие символы до и после выделенного текста, чтобы облегчить полужирным шрифтом, курсивом и вводом в поле кода
Эффект:

2.MarkdownLivePreview
function
Предварительный просмотр в реальном времени Файл Markdown, файл MD слева и результаты предварительного просмотра справа. Может использоваться с MarkdownEditing.
use
MarkdownLivePreview по умолчанию отключает предварительный просмотр в реальном времени, поэтому теперь, когда у вас установлен плагин, вы обязательно должны его использовать. Открыть в настройках — & GT; Настройки пакета -> MarkdownLivePreview -> Добавьте «markdown_live_preview_on_open» справа от Settings: true, и перезапустите sublime.
Это связано с тем, что конфигурация по умолчанию на левой стороне не может быть изменена (только для чтения), а область редактирования на правой стороне является областью, определяемой пользователем.
рендеринг

Подробнее:

Live HTML и предварительный просмотр Markdown в Sublime Text с автосохранением

Я обнаружил автосохранение, когда решил, что буду писать свое резюме в HTML и никогда больше не буду использовать MS Word. С надеждой.

Благодарим Джеймса Чжана за написание этого плагина. Когда вы включаете его, он автоматически сохраняет текущий открытый файл после каждого редактирования. Вызовы на save отклоняются на 1 секунду, чтобы избежать перегрузки Sublime Text API.

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

Для редактирования HTML я использую следующий рабочий процесс:

  • Установите с автоматическим сохранением через Package Control.
  • Откройте <файл> .html в ST и из палитры команд запустите Включить автоматическое сохранение резервной копии: только текущий файл .
  • Установите gulp-server-livereload или что-то подобное через npm , и пусть он следит за вашим текущим каталогом.
  • Запустите браузер и отправляйтесь туда, где gulp-server-livereload обслуживает ваши файлы. Откройте <файл> .autosave.html в браузере, вернитесь в ST и отредактируйте.

Вы редактируете HTML и смотрите, как он выглядит в вашем браузере, с таблицами стилей и всем остальным, в реальном времени .Магия! Наличие двух мониторов, одного для ST и одного для вашего браузера, делает это еще приятнее.

Чтобы получить предварительный просмотр Markdown в реальном времени, необходимо выполнить несколько дополнительных шагов:

  • Установите MarkdownEditing или что-то подобное с помощью Package Control.
  • Установите markdown-html.
  • Используйте его в режиме watch : markdown-html -w .autosave.md -o .html . Когда вы редактируете <файл> .md , автоматически сохраняет постоянно записывает его в <файл>.autosave.md и markdown-html постоянно компилирует это в .html .
  • Запустите браузер и отправляйтесь туда, где gulp-server-livereload обслуживает ваши файлы. Откройте <файл> .html , вернитесь в ST и отредактируйте.

markdown-html красотка. Документация — это ода простоте, и плагин даже поддерживает вставку пользовательского CSS и JS в вывод HTML. Хотя его сложнее настроить, этот рабочий процесс лучше, чем использование редактора Markdown, такого как Byword или Macdown.Вы можете редактировать текст с помощью настоящего текстового редактора, и ваш «предварительный просмотр» совсем не такой — это буквально отображение документа браузером!

Помимо настройки, для серьезного редактирования статических HTML-документов это несложно, и я думаю, что это верно и для Markdown. Дайте мне знать, что вы думаете…

.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *