Time – consuming rich text editor

I believe that those of you who have used the rich text editor of the wechat public platform will know that “writing for 5 minutes and typesetting for 2 hours” is not too much to say. For some friends who only do content operation, may be good, nothing more than to write content and then typesetting, the above formatting function is basically enough. But it may not be so friendly for us programmers who do technical content precipitation. Even though the “article template” is supported on wechat’s public platform, you still have to be careful to fill in and replace the content, sometimes accidentally changing the original style without noticing.

Before visiting baidu and 404 search engine, summarize the methods we provide, nothing more than three kinds:

  1. Download the Chrome browser plug-inMarkdown Here, first customize the CSS style you want, and then use it in the wechat rich text editormarkdownWrite good grammar content, and then a key conversion, but you will find that the effect is unsatisfactory;
  2. Using the wechat typesetter of a third-party platform, as shown below:

    It’s very painful. It’s basically card writing, where you have to drag out a new card container for each paragraph and continue writing. Fresh! It was intolerable that the flow of thought should be interrupted by such an operation;

  3. Use native desktop Markdown editor application, immersion in the writing, and then write a script replacement of a particular element, according to the style they want, finally paste to online CKEditor rich text editor, fine style, and then all copy and paste to WeChat rich text editor, the process is being, But not Lazy enough, I refuse~

First we need to put our code snippets in the article; Second, we also require that snippets be syntactically highlighted; Third, when we’re not copy-pasting source code, we need snippets for code word speed for handwritten code; Fourth, we are more focused on the dissemination of ideas or the logic of business code or the steps of building tools, style and layout are really not that important to us, ok? ! But as a programmer, even such a simple style can not handle, is not too shameful. Emmmm… Then offer our program ape innovation creative power – “lazy”! Yes, I think one of the most important reasons for the technology rush is “consumed.” “Lazy economy”, visible.

We don’t want to settle.

Innovative wechat article editor

Friends can directly use the wechat article formatting tool: md.ironmaxi.com

The snapshot is as follows:

Project directory structure:

. ├ ─ ─ dist / / production folder └ ─ ─ the SRC / / the source code folder │ ├ ─ ─ the CSS style code / / folder │ │ ├ ─ ─ pageThemes / / page style folder │ │ └ ─ ─ themes / / code style folder │ ├ ─ ─ imgs ├─ exercises - exercises - exercises - exercises - exercises - exercises - exercises - exercises - exercises - exercises ├─ ├─ ├─ └ └ └ └ └ └ └ └ └ └ └ └ └ ├─ index.html ├─ package.json └ │ ├─ CNAME │ ├─ dem.md │ ├─ favicon ├ ─ ─ LICENSE ├ ─ ─ the README. Md ├ ─ ─ webpack. Config. Js / / debugging └ ─ ─ webpack. Production. Config. Js/packaging/production with 10 directoriesCopy the code

The project used modular packaging tool Webpack, debugging and production are corresponding to the command, we can directly use.

package.json:

{
  "scripts": {
    "server": "NODE_ENV=development && webpack-dev-server --host 0.0.0.0 --port 5014 --inline --hot --progress --config ./webpack.config.js"."build": "NODE_ENV=production && webpack --progress --profile --color --display-modules --display-chunks --config ./webpack.production.config.js"}},Copy the code

Debugging and production directly on the terminal:

http://localhost:5004/dist # debugging for a visit
$ npm run server
# production
$ npm run build
Copy the code

Detailed code can be clone on Github repository for reference, and then analyze the process and ideas of building the tool.

Tool idea

The tool has two pages, one edit page, which allows us to copy and paste content written in the Markdown editor directly. Another preview page, switch to the preview page when the preview function is triggered in the edit page.

List of features:

  1. The edit page collects all user-written Markdown text and automatically converts it to HTML text and renders it to a browser page when it is previewed
  2. On the preview page, users can switch between page formatting and code highlighting to suit their preferences
  3. Preview page can select all copy content, and paste to wechat rich text editor, content and style is not missing, there is no discrepancy
  4. The preview page can return to the edit page

At this point, the key and difficult points can be typed on the blackboard:

  1. Markdown syntax text is converted to HTML text
  2. Syntactic highlighting of code snippets in HTML text
  3. Full copy of render result

Rebuilding the wheel is no longer necessary, the solutions to the above two problems are as follows :(part of the 404 page, please go to science 🙂

  1. Markdown To HTML Converter: showdownjs.com
  2. Google Code Prettify: google-code-prettify
  3. Clipboard written in Javascript: clipboardjs.com

All we have to do is put the wheels together and do the “upper application”.

Engineering construction configuration

Webpack. Config. Js is used for debugging using the configuration of the webpack. Config. Production. The js production packaging is used for the final project. Configuration file is a bit long, to avoid taking up space, we directly look at the source code, very clear. The former just adds a copy of the corresponding webpack-dev-server configuration:

devServer: {
    hot: true.inline: true.historyApiFallback: false.disableHostCheck: true,},Copy the code

Home page template file index.html

Building the page document structure is simple. The following script code is for Baidu statistics, do not need a friend directly delete, need a friend to register a Baidu account, and then baidu statistics application to obtain a statistical script code, directly paste over the line.

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?5450f754e48ed6303fe9c7c617346a78";
  var s = document.getElementsByTagName("script") [0]; s.parentNode.insertBefore(hm, s); }) ();</script>
Copy the code

Project entry file SRC /js/index.js

The entry file first loads the home page style file index.less. The main purpose of loading in JS is to use less-loader to compile directly into CSS code and inject it into the home page template file index. HTML in

The import file also loads the following most important dependencies in the project, which will be explained briefly later:

  • showdown.js
  • clipboard.min.js
  • run_prettify.js
  • code-theme.js
  • page-theme.js

After doing some preparatory work, a Markdown syntax parser and a wechat article MD converter were instantiated and initialized.

require('.. /css/index.less');

var$=require(". / jquery - 3.1.1. Js. "");
var showdown = require("./showdown.js");
var Clipboard = require("./clipboard.min.js");
var CodeTheme = require("./theme/code-theme");
var PageTheme = require("./theme/page-theme");

require("./showdown-plugins/showdown-prettify-for-wechat.js");
require("./showdown-plugins/showdown-github-task-list.js");
require("./showdown-plugins/showdown-footnote.js");

require("./google-code-prettify/run_prettify.js");

// Make sure the webpack style comes first before the custom style takes effect
$('head').eq(0).append($('<link rel="stylesheet" href="./themes/github-v2.css" id="codeThemeId" />'));
$('head').eq(0).append($('<link rel="stylesheet" id="pageThemeId" />'));
$('.li-qrcode').on('mouseover'.function(){$('.qrcode-container').show();
}).on('mouseleave'.function(){$('.qrcode-container').hide();
});
$('img').each(function(){
  var _this = this;
  var newImg = new Image();
  newImg.onload = function(){
    $(_this).show();
  };
  newImg.src = this.src;
});

// Parse the Path in the browsing URL to remove useless parameters
var kv = location.href.split('? ') [1];
kv = kv && kv.split('&') | | [];var params = {};
$.each(kv, function(index, item) {
  var m = (item || ' ').split('=');
  if (m && m[0] && m[1]) {
    params[m[0]]= m[1]; }});// Easy to load resources across domains
if (/\.ironmaxi\.com$/.test(location.hostname)) {
  document.domain = 'ironmaxi.com';
}

// instantiate the Markdown syntax parsing object
var converter =  new showdown.Converter({
  // omit, see source code
});

// Instantiate the wechat article Markdown converter
var WechatMakdowner = {
  // omit, see source code
};

// Initialize the wechat article converter
WechatMakdowner.init();
Copy the code

showdown.js

The official website: showdownjs.com making address: making | showdownjs portal official introduction to its slogan is:

Modern copy to clipboard. No Flash. Just 3kb gzipped.

This is a js library that can convert Markdown text into HTML text. It is based on John Gruber’s original work. Yeah, John Gruber is the creator of Markdown Grammar. The library can run renderings both in the browser and on the server.

Step 1: Install NPM package

$ npm install --save showdown
Copy the code

Step 2: Load the dependencies and use them

var showdown  = require('showdown'),
    converter = new showdown.Converter(),
    text      = '#hello, markdown! ',
    html      = converter.makeHtml(text);
Copy the code

Ps: This project directly copied the main file to use, no NPM package installation

clipboard.min.js

The official website: clipboardjs.com making address: making | clipboardjs portal official introduction to its slogan is:

A Markdown to HTML converter written in Javascript!

This is an extremely lightweight with JS sticky board function library, the use is also extremely convenient.

Step 1: Install NPM package

$ npm install --save clipboard
Copy the code

Step 2: Load the dependencies and use them

var Clipboard = require("clipboard");
new Clipboard('.btn');
Copy the code

Ps: This project directly copied the main file to use, no NPM package installation

run_prettify.js

Official site: the Google Code Archive lot address: making | Google Code – prettify portal official introduction to its slogan is:

An embeddable script that makes source-code snippets in HTML prettier.

It supports syntax highlighting for many languages, even if some are not in the supported list, but can be supported through extensions. Many advantages:

  1. Work in HTML
  2. Supports inline links and line numbers in code
  3. API simple and practical
  4. Lightweight enough
  5. Styles can be customized through CSS
  6. Supports c-like, bash-like, XML-like languages without explicitly declaring the language category
  7. Provides extensible interfaces for other languages
  8. Cross-browser support

Step 1: Import the JS entry file

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
Copy the code

Step2: Direct practical

<pre class="prettyprint">class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
  // will not interfere with embedded <a href="#voila2">tags</a>.
}</pre>
Copy the code

In addition, different language types can be explicitly declared:

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include:
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".
</pre>
Copy the code

Can also automatically check:

/ / recommend
PR.prettyPrint()
Copy the code

code-theme.js

The results of rendering text provide various code pages highlight style of switching function In the. / SRC/themes/directory, highlight the style of the file to store all kinds of code, style documents are out Repo download the lot | code highlight style library

I added a new style file called ‘Material-Dark’, which is customized according to the Atom Material Syntax editor plug-in and is my favorite Syntax highlighting style.

page-theme.js

In the./ SRC /pageThemes/ directory, stored in 3 page layout format files, there is a need to customize their own, very simple.

How to choose the Markdown editor

Markdown is a universal syntax, and choosing different editors for different platforms is a matter of personal preference. Here are my recommendations, suitable for different groups.

If you’re a content operator, choose an editor that supports “proper” Markdown syntax tags:

  • Mac
    • “Mou”
    • “Macdown”
    • “MWeb”
  • Windows
    • “Flying Elephant mark”

If you’re a programmer, do either of the following, or just use the code editor you’re already using, perhaps with a Markdown syntax highlighting plugin:

  • “Atom”
  • “VScode”
  • “SublimeText3”

Write in the last

May we all be able to write without fuss. After all, there must be a place in this society where we can be peaceful and happy.