Фотография | Компьютеры | Программы | Эсперанто | Кровное
Emacs Muse — WYSIWYM для WordPress
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 соответствующим образом
- Набрать
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.
- Набрать
M-x customize-group RET muse-mode RET- Нажать Show справа от опции Muse Mode Hook, поставить галку на
footnote-mode, все остальные убрать/ - Нажать INS чуть ниже и ввести в поле
longlines-mode. - Нажать ниже State и выбрать пункт Set for future sessions.
- Набрать
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://dmych.wordpress.com/][Ссылка на мой сайт]]. Если текст не нужен, он может быть опущен: [[http://dmych.livejournal.com]].
Изображения вставляются аналогично: [[http://dmych.wordpress.com/files/2008/05/muse1.png]].
Горизонтальная черта вставляется как строка, состоящая из четырех или более дефисов, отделенная пустыми строками от остального текста.
Два дефиса, окруженные пробелами, будут превращены в символ тире.
Для вставки содержания страницы нужно вставить в текст тег <contents> (закрывающего тега не требуется).
Некоторые полезные клавиши Muse
C-c C-a– Показать список всех существующих файлов проекта.C-c C-e– Редактировать ссылку под курсором.C-c C-f– Открыть новый muse-файл.C-c C-i– Вставить ссылку/тег/URLC-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→– Увеличить отступ списка под курсором.