Emacs Muse — WYSIWYM для WordPress

WYSIWIM в Emacs’e
Как настроить Emacs Muse для работы с WordPress
Написание постов, редактирование страниц
Кратко о разметке текста в Muse
Некоторые полезные клавиши Muse


WYSIWIM в Emacs’e

Онлайновый текстовый процессор, как у WordPress или на Ipernity — это здорово, но не всегда есть возможность им воспользоваться. Я часто пишу и редактирую статьи для сайтов или блогов на карманном компьютере по дороге на работу или с работы. А на нем к моим услугам только примитивный текстовый процессор, который меня не устраивает совершенно, да несколько текстовых редакторов разной мощности. Так что по началу я редактировал HTML в Emacs’е. Некоторое время это меня устраивало, тем более, что в редакторе есть хорошая поддержка HTML - и синтаксическая подсветка, и быстрая вставка нужных тегов…

Но все-таки вычитывать и править текст, продираясь глазами сквозь многочисленные теги, не очень приятно. Да и вставлять эти теги руками быстро надоело. Хотелось такого же комфорта, как в текстовом процессоре — хотелось WYSIWYG-редактора. Я перепробовал разные варианты, но все забраковал. Странно даже, неужели нет ни одного WYSIWYG-редактора, который бы просто порождал код HTML без кучи ненужных стилей и прочего мусора? Чтобы если я выбираю стиль H1, в коде бы не появлялось кучи тегов типа «<h1 class="the-best-html-editor-header-one-style"><span style="color: 000000;">...» — неужели это так трудно?

Наконец, я вспомнил о таком замечательном изобретении, как разметка вики. С одной стороны, не надо загромождать текст тегами HTML, а с другой — форматирование и вёрстка производится просто вставкой нужных символов (например, чтобы выделить текст жирным, вместо <strong>таких тегов</strong> текст просто обрамляется **двойными звездочками**). А учитывая, что тот же EmacsWikiMode красиво и удобно выделяет шрифтами и цветом синтаксис вики, а также прячет часть символов разметки, работа с вики-текстом напоминает скорее работу в текстовом процессоре.

В конце концов, я остановился на Muse — более новом пакете, пришедшем на смену EmacsWiki. Правда, пришлось повозиться с настройкой пакета, чтобы он конвертировал вики-текст в HTML именно так, как надо для WordPress: во-первых, нужно удалить содержимое muse-html-header и muse-html-footer, а также muse-html-style-sheet, чтобы в результат не попадали разные <html><head>…. Потом нужно отключить auto-fill-mode в muse-mode-hook и вместо него добавить longlines-mode — это чтобы не было не нужных разрывов строк (который WordPress оставляет как есть). Последнее, что я сделал — это создал два проекта в muse-projects и настроил их.

Теперь я могу набирать текст в «почти WYSIWYG» (или WYSIWYM — What You See Is What You Mean) в своем любимом Emacs’е:

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

После того, как пост или статья готовы, я нажимаю C-c C-t, загружаю получившийся HTML-файл в редактор WP и вношу окончательные коррективы (загружаю картинки и исправляю ссылки на них…).


Как настроить Emacs Muse для работы с WordPress

Скачать, установить и подключить Emacs Muse

  1. Где и как скачать и установить написано тут: http://www.emacswiki.org/cgi-bin/wiki/EmacsMuse
  2. Вставить следующие строки в ~/.emacs и перезапустить Emacs:
    (require 'muse-mode)     ; load authoring mode
    (require 'muse-html)     ; load publishing styles I use
    (require 'muse-project)  ; publish files in projects

Настроить Muse соответствующим образом

  1. Набрать M-x customize-group RET muse-project RET и добавить новый проект.
    • Задать ему имя, нажать INS под строкой Settings, нажать Value Menu и выбрать Directory, ввести путь к проекту (где будут храниться файлы).
    • Затем нажать INS под строкой Output styles, отметить галку Publishing style и ввести в поле значение html; отметить галку Path и ввести путь, куда будут складываться сгенерированные HTML-файлы.
    • Нажать ниже State и выбрать пункт Set for future sessions.
  2. Набрать M-x customize-group RET muse-mode RET
    • Нажать Show справа от опции Muse Mode Hook, поставить галку на footnote-mode, все остальные убрать/
    • Нажать INS чуть ниже и ввести в поле longlines-mode.
    • Нажать ниже State и выбрать пункт Set for future sessions.
  3. Набрать M-x customize-group RET muse-html RET
    • Очистить содержимое настроек Muse Html Style Sheet, Muse Html Header и Muse Html Footer.
    • Для опции Muse Html Table Attributes установить значение border="1".
    • Проверить, чтобы для опций Muse Html Encoding Default и Muse Html Charset Default стояло значение utf-8.
    • Перейдите к началу буфера настроек и нажмите кнопку Set for Future Sessions.


Написание постов, редактирование страниц

Идеология простая: все тексты вы редактируете и храните в формате Muse. Когда текст готов для публикаци, вы генерируете из него HTML (C-c C-t в буфере с текстом), который и выкладываете на сайт или в блог.

Так как вы убрали хедеры и футеры HTML, а также стили CSS, то будет сгенерирована только содержательная часть страницы — то, что находится между тегами <body>...</body> — именно то, что надо.

Далее вы заходите на свой сайт на WordPress.com (или где он там у вас), открываете страницу создания новой страницы или записи в блоге, переключаете режим работы онлайнового текстового редактора с визуального (WYSIWIG) на простой текст (HTML), и загружаете туда сожержимое готового HTML-файла. После чего можно вновь переключиться на визуальный редактор и посмотреть все ли в порядке. Наконец, вы нажимаете кнопку сохранения (публикации). Вот и все.


Кратко о разметке текста в Muse

Абзацы отделяются пустой строкой (WordPress сохраняет все разрывы строк в текстах, поэтому мы при настройке вместо autofill-mode установили longlines-mode, который “заворачивает” строки только на экране, а в результирующем файле каждый абзац будет представлен как одна длинная строка).

Строка, начинающаяся с шести и более пробелов, будет центрирована. Также можно использовать тег <center>.

Строка начинающаяся с пробелов, числом меньшим шести, считается цитатой (можно использовать тег <quote>).

Для вставки примеров исходного кода можно использовать тег <example>. Если вы хотите вставить текст в HTML буквально, окружите его тегом literal.

Заголовки задаются звездочками в начале строки:

* Первый уровень
** Второй уровень
*** Третий уровень
**** Четвертый уровень

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

Шрифты: **жирный**, *курсив*, ***жирный курсив***, _подчеркнутый_, =моноширинный= (в последнем случае вместо “=” можно использовать также тег code; текст будет выведен без интерпретации как разметка Muse или HTML).

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

  1. Раз
  2. Два
  3. Три

  - Превый
  - Второй
  - Третий

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

Ссылки задаются в квадратных скобках: [[url][текст ссылки]]. Например, [[http://ru.oramezo.org/][Ссылка на мой сайт]]. Если текст не нужен, он может быть опущен: [[http://dmych.livejournal.com]].

Изображения вставляются аналогично: [[http://ru.oramezo.org/files/muse1.png]].

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

Два дефиса, окруженные пробелами, будут превращены в символ тире.

Для вставки содержания страницы нужно вставить в текст тег <contents> (закрывающего тега не требуется).


Некоторые полезные клавиши Muse

C-c C-a — Показать список всех существующих файлов проекта.

C-c C-e — Редактировать ссылку под курсором.

C-c C-f — Открыть новый muse-файл.

C-c C-i — Вставить ссылку/тег/URL

C-c C-l — Включить/выключить подсветку синтаксиса.

C-c C-p — Перегенерировать все изменившиеся страницы проекта.

C-c C-s — Искать текст во всех файлах проекта.

C-c C-t — Сгенерировать выходной файл для текущего muse-файла.

TAB — Перейти к следующей ссылке в тексте.

S-TAB — Перейти к предыдущей ссылке в тексте.

M-TAB — Дополнить название страницы под курсором (из страниц текущего проекта).

M-RET — Вставить новый элемент списка под курсором.

C-< — Уменьшить отступ списка под курсором.

C-> — Увеличить отступ списка под курсором.

Trackback

One Comment

  1. Ежедневный Фотограф » Blog Archive » Тест weblogger.el:

    [...] еще идея интегрировать Muse с ним, чтобы после выгрузки статьи в HTML можно было [...]

    29 May 2008, 6:02 pm