автор:Кодекс жреца Soul Painter
Адрес Markdown Nice, упомянутый в этой статье:mdnice.com
В 2019 году верстка публичного аккаунта WeChat была слабой, и она всегда подвергалась критике со стороны операторов, такие инструменты, как Xiumi и редакторы 135, были разделены.
Но будь то нативные инструменты WeChat или другие редакторы, создателям приходится использовать свой ограниченный творческий опыт для набора текста.
MarkdownРешите версию спиритического лекарства, оживите.
1. Введение
1.1 Что такое уценка?
Markdown — это синтаксис набора текста с минимальными методами ввода и чрезвычайно низкими затратами на обучение.
Он богат заголовком, цитатой, полужирным шрифтом, ссылкой, изображением, фрагментом кода, формулой и всеми форматами набора, необходимыми для создания текста.
Его наличие позволяет сосредоточиться на самом содержании, не отвлекаясь на формат.
1.2 Как совместить с официальной учетной записью WeChat?
Такая отличная грамматика набора текста, но публичный аккаунт WeChat ее не поддерживает.
Не волнуйтесь! Markdown Приятно помочь вам решить проблему!
1.3 Что такое Markdown Nice?
Редактор Markdown с открытым исходным кодом, набор текста выполняется успешно после написания, и вы можете скопировать и вставить его в общедоступную учетную запись WeChat.
И что? Только ли это?
конечно, нет! Милый малыш, какие еще у тебя есть качества?
- Поддержка изображения кровати, сноски, кода, формулы
- Поддерживает 8 тем оформления и 7 тем кода.
- Поддерживает пользовательские стили и может предлагать темы для восхищения людей
- Помимо официальной учетной записи, он также поддерживает такие платформы, как Zhihu, Nuggets, Blog Park и CSDN.
- Я красивый
Чего же вы ждете, имея перед собой так много отличных функций?
адрес:https://mdnice.com
Сделайте свой набор текста в WeChat красивым!
2. Текст
Я не думал, что ты все еще смотришь
кашель кашель,
Не стоит недооценивать Милого, детка меня, чтобы иметь возможность использовать Markdown для верстки пабликов, я полгода боролся с редактором пабликов WeChat, а потом выиграл текущий результат!
Хотите услышать, как я сражаюсь? Послушайте меня ниже!
2.1 Боевой пролог
Редактор официальной учетной записи WeChat основан на открытом исходном коде интерфейсной команды Baidu FEX.ueditorProject, вот что я нашел, подобрав код веб-страницы, как показано на рисунке:
Поскольку ueditor — это редактор форматированного текста, я собираюсь столкнуться сmarkdown->富文本В индустрии открытого исходного кода или программного обеспечения существует довольно много отличных реализаций такого рода битв за конверсию. Например:
- Веб-сторона:editor.md,mavonEditor
- Сторона ПК:typora,MWeb
Однако с вышеперечисленными инструментами есть проблема, и они плохо интегрированы.Стили CSSИнтегрируйте его в форматированный текст, а затем адаптируйте к редактору WeChat, чтобы редакторы форматированного текста других основных платформ в Китае.
Итак, есть ли какие-либо инструменты, которые пытаются это исправить? На самом деле есть:
- Веб-сторона:md2all,wechat-format
- Плагин для браузера:markdown-here
Тем не менее, у вышеперечисленных инструментов также есть свои недостатки, поэтому, малышка Найс, я нашел эту возможность и создал себя, чтобы решить все недостатки!
Markdown Nice — это проект с открытым исходным кодом, состоящий из множества технологий с открытым исходным кодом, в том числе:
- React: структура слоя представления js с открытым исходным кодом facebook
- markdown-it: уценка конвертировать форматированный текстовый парсер
- juice: Инструмент для преобразования селекторов классов CSS во встроенные стили.
- codemirror: Редактор веб-кода
- ant-design: Библиотека компонентов пользовательского интерфейса React.
- mobx: Государственная библиотека управления
- highlight.js: библиотека подсветки кода
- MathJax-node: Формула для галереи изображений
- axios, ali-oss, qiniu-js и т. д.
Примечание: некоторые из вышеупомянутых библиотек с открытым исходным кодом будут упомянуты ниже.Пожалуйста, обратитесь к конкретным функциям библиотек с открытым исходным кодом здесь.
Обладая вышеперечисленными технологиями, я объявил войну редактору WeChat и сделал первый выстрел в битве!
2.2 Первый кадр битвы: кодовая тема
До 2018 года публичный аккаунт WeChat вообще не поддерживал блоки кода, текущая поддержка тоже очень простая, и есть проблема больших шрифтов кода.
Раздражает тот факт, что разработчики редактора паблик-аккаунтов WeChat никогда об этом не задумывались.Насколько важны блоки кода для сообщества программистов?? ?
для этого я нашелhighlight.jsАртефакт подсветки кода помогает решить проблему единой темы кода.
После определенного скрининга на ваш выбор были наконец выбраны 7 стилей кода, включая темы кода atom-one-dark, atom-one-light, monoikai, GitHub, vs2015, xcode и WeChat.
Среди них тема кода WeChat не является частьюhighlight.jsСледовательно, его структуру необходимо получить из исходного кода редактора паблик-аккаунта WeChat, и на следующих двух рисунках показано, как его получить:
а такжеhighlight.jsа такжеmarkdown-itПарсеры используются в ассоциации, поэтому в инструменте есть 2 парсера уценки, которые используются для анализа тем кода WeChat и других тем кода соответственно.Ссылка на исходный код.
В дополнение к вышеуказанным проблемам будет существовать множество технических кодов общедоступных учетных записей:Проблема многострочного отображения, вызванная слишком длинной строкой кода.
Проблема может быть решена с помощью следующего кода CSS:
pre code {
display: -webkit-box !important
}
Эффект сравнения показан на рисунке:
Отныне код товарищей, использующих Markdown Nice, краше!
2.3 Второй кадр боя: загрузка картинки
Как в хорошей статье может не быть картинок?
(некоторые техники говорят: у меня их нет)
Управление изображениями — это проблема, с которой столкнется каждый опытный редактор.
Приятное первое использование ребенкаSM.MSКартинная кровать, эта картинная кровать управляется и обслуживается большим боссом, большое спасибо!
Хотя для загрузки изображений можно использовать платформу изображений, при вставке в редактор WeChat частота сбоев чрезвычайно высока (Хотите наступить на редактор WeChat), как показано на рисунке:
Это действительно {рад слышать это | хе хе хе хе}!
Чтобы решить вышеуказанные задачи, Markdown Bill подряд поддерживает Custom Clibaba Cloud и Qiniu Cloud Image Close Image и использовал самостростроительные изображения, покупая облако Alibaba Cloud и Hinau облачных услуг.
но! Пусть пользователи настраивают сами.Хотя и есть документы по настройке, весь процесс настройки чрезвычайно сложен и трагичен!
Таким образом, Baby Nice использовал свою собственную учетную запись, создал собственную кровать с изображениями, установил время сохранения на один день и предоставил кровать с изображениями mdnice для временного набора. На данный момент поддержка загрузки изображений в инструменте выглядит следующим образом:
| картина кровать | Стоимость | Срок годности | интенсивность отказов |
|---|---|---|---|
| mdnice | бесплатно | 1 день | Низкий |
| SM.MS | бесплатно | длинная | высоко |
| Али Клауд | Ссылаться на | настроить | Низкий |
| Семь Ниуюн | 10G бесплатно | настроить | Низкий |
Самая большая трудность в этой битве за изображения заключается в том, что вам нужно прочитать документы Alibaba Cloud OSS и Qiniu Cloud KODO и использовать их наборы инструментов с открытым исходным кодом ali-oss и qiniu-js.
Это также включает в себя волшебное преобразование между FormData, файловым объектом, base64 и blob,Ссылка на исходный код.
В общем, бой был веселым.
2.4 Третий выстрел боя: математическая формула
В макете публичного аккаунта WeChat математические формулы — это кошмар!
Потому что редактор WeChat делает следующие три вещи:
- Редактирование формул не поддерживается
- Формулы, сгенерированные html и css, не поддерживаются, поскольку шрифты нельзя импортировать.
- Не поддерживает svg, выдает сообщение об ошибке после его ввода
Эти три вещи подобны дьявольской поступи: тереть, тереть и тереть искателей формулы по гладкому полу...
Единственное возможное решение в настоящее время - преобразовать формулу в изображение, а затем вставить изображение непосредственно в общедоступный аккаунт. Baby Nice считает, что эта идея идеальна!
Но как это сделать...
Внезапно у меня появилась идея, и я подумал о веб-сайте формулы конверсии, рекомендованном другом.codecogs, этот веб-сайт может преобразовать любую формулу в изображение png и дать доступную ссылку.
Однако из-за стабильности изображения ссылка не может быть использована напрямую.Как и во втором сражении, будет ситуация, когда изображение не вставляется, что делает людей несчастными.
- Как решить эту проблему?Было бы неплохо, если бы вы могли создать свою собственную формулу для службы изображений PNG.
- Есть ли такая библиотека с открытым исходным кодом?имеют! MathJax-узел сделает это!
Итак, Nice Baby создала собственную фоновую службу, инкапсулировала интерфейс RESTful для внешних вызовов и реализовала функцию формулы для изображения! После тестирования его можно использовать полностью.После вставки вы можете настроить размер изображения в соответствии с макетом.
Среди них для преобразования большого количества формул фронтенд разумно использует асинхронные запросы, не по одному, а параллельное выполнение.С точки зрения производительности достигнут эффект преобразования 10 формул за 2 секунды., полностью доступны для набора формул.
2.5 Четвертый кадр битвы: внешняя цепочка WeChat на сноску
Как мы все знаем (если вы не знаете, вы должны знать), WeChat не поддерживает внешние ссылки, за исключением доменного имениhttps://mp.weixin.qq.com/В дополнение к законным ссылкам, другие ссылки будут автоматически удалены после их появления.
Единственным официальным способом добавления внешних ссылок является чтение полного текста.Конечно, также возможно непосредственно вставить саму ссылку в текст или сделать картинку QR-кода.
И Nice Baby предоставляет способ конвертировать внешние ссылки WeChat в сноски, чтобы решить эту проблему, не правда ли, очень элегантно?
Разница между использованием ссылок и сносок заключается в следующем:
链接：[文字](链接 "文字")
脚注：[文字](脚注解释 "脚注名字")
Здесь задействована еще одна распространенная проблема, то есть многие статьи автора официального аккаунта изначально являются ссылками, когда они публикуются на других платформах, но их нужно модифицировать одну за другой, когда они печатаются здесь, что действительно раздражающий.
Итак, детка Найс, я сделал еще одно небольшое улучшение, то есть при вставке статьи она будет автоматически следить, есть ли внешняя ссылка, и подсказывать автору, преобразовать ли ее в сноску одним кликом, чтобы вы не придется модифицировать его вручную, хвалить или нет!
2.6 Резюме кампании
Бороться с редактором официального аккаунта WeChat — крайне интересный процесс. В дополнение к проблемам, упомянутым выше, есть много деталей, на которые необходимо обратить внимание, поэтому я не буду обсуждать их здесь по отдельности, если вам интересно, пожалуйста, ознакомьтесь с исходным кодом.
Битва за Markdown Nice далека от завершения, и такие функции, как создание веб-сайтов, плагины для браузера, собственные инструменты и типографика, готовы к взлету.
3. Говорить о чем-то, не имеющем отношения к битве
3.1 Концепция дизайна
Для большинства людей содержимое важнее, чем наборные, макет важнее дизайна.
Контент — это основа привлечения читателей, поэтому он наиболее важен.
Что касается сравнения верстки и дизайна, то, как бывший арт-редактор WeChat, с увеличением опыта верстки я обнаружил, что эффект от статьи заключается не в лишнем кружеве и приукрашивании.
Аккуратно, удобно и просто - последнее слово!
3.2 Контент, типографика и дизайн
Дизайн = Типографика + Креативность
Потому что: у большинства людей нет идей или они думают, что они слишком дороги.
Итак: большинство людей не занимаются дизайном, а форматированный текст не подходит для редакторов чистого контента.
Хотя: Большинство людей также не печатают или думают, что набор текста слишком дорог.
но:Markdown Nice освобождает пользователей от типографики и фокусируется только на самом контенте.
3.3 Об открытом исходном коде
Открытый исходный код — это простой и сложный процесс:
- просто потому что: Заметки, списки книг, инструменты, все ценные вещи платформы можно выводить в GitHub, это очень просто сделать
- Трудность, потому что: Стремитесь быть ценным для других, всегда настаивайте на выходе, это очень трудно сделать
Как описано выше, работа с открытым исходным кодом на самом деле означает создание продукта. Это может быть технический продукт (например, Redis, ant design) или бизнес-продукт (например, Markdown Nice). другие. .
Процесс создания продукта извилист и долог, по сравнению с процессом разработки Markdown Nice можно увидеть следующие этапы:
- Имейте идею, и проверяйте ее реализуемость и необходимость, сравнивайте с аналогичными продуктами и будьте в курсе
- Улавливайте болевые точки, осваивайте основные ценности, думайте с точки зрения пользователя и прислушивайтесь к отзывам.
- Спираль вверх, непрерывная итерация, выпуск высококачественной продукции
- Самое главное,Делать продукт — это не только писать код, но и продвигать его! ! Аромат вина тоже боится глубокого переулка! !
Попутно участвовать в open source нелегко, надеюсь, вы дорожите этим.
Наконец, благодаря каждому участнику с открытым исходным кодом, больше людей могут участвовать в открытом исходном коде, и еще много кода ждет, пока кто-нибудь напишет!
«Объяснение серии проектов с открытым исходным кодом»——Пусть больше не боятся люди, интересующиеся проектами с открытым исходным кодом, и пусть инициаторы проектов с открытым исходным кодом больше не остаются в одиночестве. Следите за нашими статьями, и вы откроете для себя радости программирования, насколько легко им пользоваться, и узнаете, как легко участвовать в проектах с открытым исходным кодом. Добро пожаловать, чтобы оставить сообщение, чтобы связаться с нами, присоединиться к нам, позволить большему количеству людей влюбиться в открытый исходный код и внести свой вклад в открытый исходный код~