try

WeChat public account: Yan Jiadashao
If you have any questions or suggestions, please leave a message on the public account.
Latest update: 2018-02-26, please refer to UpdateList [^1]

Introduction to Md2All

Markdown typesetting tool, supports "one-click typesetting" style template selection, supports custom CSS, and supports more than 80 kinds of code highlighting.
It can make Markdown content, without any adjustment, at the same time in WeChat public account, blog garden, Nuggets, Zhihu, csdn, 51cto, wordpress, hexo. . . Wait for the platform to correctly display the effect of the current preview.
And can generate the corresponding Html document.
For the complete tutorial of Md2All, please refer to: https://www.cnblogs.com/garyyan/p/8329343.html

• The WeChat Official Account has been specially optimized:
  support code blocks, and solve the common code block wrapping error, especially the problem that cannot be scrolled on iPhone and iPad;
  solve the problem of missing pictures or styles when pasting content to the official account ;
  For the public account, I wrote an article in particular, please refer to this blog post: http://www.cnblogs.com/garyyan/p/8243696.html

• Support general Markdown syntax [^2] and some extended syntax (such as: table [^3], task list [^4], katex math formula [^5], footnote [^6], TOC[^7] etc...), and has good support for html, css styles (please see the advanced usage part of the following example [^8]);

• After the preview is ok, just click the "copy" button, and then paste it to the official account;
  note: click the "copy" icon, which has been implemented: select all + copy, cannot use ctrl+c, or right-click to copy

• in addition

  • Support to directly "copy" the page to "CSDN" and "Blog Garden", all styles are consistent.
    Please refer to this blog post: http://blog.csdn.net/gary_yan/article/details/78645303

  • Supports direct "copying" of pages to "Nuggets":
    please refer to this blog post: https://juejin.im/post/5a1bcc6ef265da431f4acb09

  • Supports "copying" the page directly to "Zhihu" , but because some styles of "Zhihu" will be forced to use their own default, so the style of the final title will be like the effect in "default style";

  • It supports to "copy" the page directly to the rich file editor of 51CTO, or to your worpress and hexo blog. It may support more blog platforms. If you are interested, you can try it yourself.

Some little tips:

• Please click the "Edit" icon in the upper left corner to start writing, so that the writing content can be automatically saved. At present, all saved content is stored in the local browser cache (local storage), so, even if you restart, these content will not be saved. It will be lost, but for the sake of safety, please back up important content by yourself before the account cloud synchronization function is implemented;

• "One-click Typesetting" supports standard CSS, and has provided a lot of style templates, but because everyone's preferences are different, if the existing style templates are not suitable for you, please customize the CSS style as much as you like.
  Even if you make a mistake, it will be OK to "restore the default value", so don't worry. Once you master the custom css style, you will know how powerful it is ^_^;

• Not tested for browser compatibility, please use Chrome browser as much as possible for editing!

• It is not equipped with a high-capacity image server, and currently only supports links to images that have been uploaded. If you need to use pictures,
  you can first edit your Markdown content on a blog platform that supports Markdown editing (such as CSDN, Nuggets, Jianshu, etc.), and upload all the pictures you need (when uploading pictures, the markdown content will be Automatically add picture links), and save;
  then copy the Markdown content to Md2All rendering;
  finally "copy", "paste"..."paste" .. to each platform, the whole thing is completed, simple; of
  course , you can also upload the picture to the official account, then right-click the picture, select "copy picture address" to get the link address of the picture; or "copy" Md2All to the official account and then insert the picture.

• During the development phase, the content of each css style template may be updated, so if you have "saved" a certain style, you may need to "restore the default value" to see its latest css style. It is recommended that you integrate your favorite styles into the "Favorite Styles", and on this basis, customize the CSS styles under the "Favorite Styles" page.

• Maybe some friends like to use different styles for the titles in the same article, just define the styles under the css style template as the styles you h1,h2,h3,h4,h5,h6want , and then use them to represent different styles of titles. Similarly, not commonly used: italics, strikethrough, emphasized italics, can also be defined as different styles you want, and then used as additional functions. You can even format directly with HTML and CSS. Please refer to the "Comprehensive Example" style template.font-sizecolorh1 ~ h6
emdelstrong em
  

• More features are in development, so stay tuned. . . . . .
  ***

  First look at the code block display effect

  Note: Markdown's syntax for code blocks is to add both the start and end lines: ```, where ` is the one in the upper left corner of the Windows keyboard, as follows:

public class MyActivity extends AppCompatActivity {
@Override  //override the function
    protected void onCreate(@Nullable Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       try {
            OkhttpManager.getInstance().setTrustrCertificates(getAssets().open("mycer.cer");
            OkHttpClient mOkhttpClient= OkhttpManager.getInstance().build();
        } catch (IOException e) {
            e.printStackTrace();
        }
}

To specify the language (such as: etc.) precisely java,cpp,css,xml,javascript,python,php,go,kotlin,lua,objectivec, specify it directly in the header, such as: ```javascript, as follows:

function DisplayWindowSize(){

  var w=window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
}

Note: When specifying the language, the blank lines in the code will be automatically reserved.
If all the "Code Themes" do not meet your requirements, you can refer to the "Code Block Style" under "One-click Typesetting" to customize your favorite code highlight

---

Look at the display effect of the picture

Note: It is not equipped with a high-capacity image server, and currently only supports the link of the uploaded image (you can upload the image you want on the official account or blog platform as the image library)

The following is the QR code picture of my public account, welcome to follow me.

Note: Markdown's syntax for image links is: ![](), such as: ![这里写图片描述](http://img.blog.csdn.net/20171012163602706), the
default is to center the image. If you want to center the image on the left, please open the css style under "One-click Typesetting". The description img{margin:0 0;}of
[这里写图片描述]the image in the center will be automatically generated in the image. bottom, corresponding stylefigcaption{}

---

Take a look at the support for the basic syntax of Markdown

H1

H2

H3

H4

H5

H6

Try inline code, such as: AppCompatActivityclass, markdown syntax for inline code is used before and after: `, where ` is the one in the upper left corner of the windows keyboard,

try to emphasize

try italics

try accented italics
trydelete
Try the hyperlink of the external link: I am the hyperlink of the external link , the syntax of markdown for the link is: [](), such as: [我是外链的超链接](http://blog.csdn.net/gary_yan/article/details/78645303)
try the hyperlink in the page: I am the hyperlink in the page , note: you have to jump first Place an <a id="footnote-1">任意内容</a>anchor point similar to: . Originid="footnote-1" match.

ordered list

1. ordered list 1
2. ordered list 2
3. ordered list 3

unordered list

• Unordered List 1
• Unordered List 2
• Unordered List 3

The quoted block
just needs to be prepended >, as follows:

I am a reference block
WeChat public account: Mr. Yan family
welcome to follow me, learn together, and progress together!

Form
| Class | Boys | Girls |
|-----|-----|------|
| Class One (7) | 30 | 25 |
| Class One (8) | 25 | 30 |

Note: When the table is previewed on the official account, it may not be displayed in the correct full screen on the PC side, but when previewed on the mobile phone, it will be displayed in full screen normally.

Take another look at support for Markdown extended syntax

task list:

• [x] Task 1, completed;
• [x] Task 2, completed;
• [ ] Task 3, not completed;

katex data formula:
inline display: \(e^{x^2}\neq{e^x}^2\) , another one: \(\sin\alpha+\sin\beta=\sin\gamma\)

The block shows
\[e^{x^2}\neq{e^x}^2\]
to a "complex point" :
\[H(D_2) = -(\frac{2}{4}\ log_2 \ frac{2}{4} + \frac{2}{4}\ log_2 \frac{2}{4}) = 1\]

and:

\[\sum_{i=1}^ni^3 = \left( \frac{n(n+1)} 2 \right) ^2\]
Note: I'm sorry to tell you that the above coordinate position " The formula of "complex point" , some attributes involved are not supported by the official account, it is recommended that you use http://quicklatex.com/ to generate the corresponding picture Url, and then link the picture Url to the text.
As follows, the chain is the link Url corresponding to the image generated by the above mathematical formula at http://quicklatex.com/:

Try footnotes:
I'm footnotes[^10]. It's a click to know where I've jumped.
Or jump to <a id="footnote-10">任意内容</a>the place where:, [^10] corresponds toid="footnote-10"

Try TOC:

auto-generated directory

[TOC]

Chapter 1 Getting Started with C++

1.1 From C to C++

...content

1.2 Programs and Languages

...content

Chapter 2 Basic Data Types

2.1 Character set

...content

2.2 Basic data types

...content

Note: As long as you place: [TOC], the title after it can be #,##,...######automatically generated such as: a directory tree, pay attention [TOC]to a separate line, and a blank line in front and in the face

---

Advanced Section

If you know html and css, the following effects are not a problem:

Go to an in-page jump , jump to the text below: <a id="jump_1">我是页内跳转到的位置</a>, Corresponding: id="jump_1"
give some color first , then
give some color ,
try changing the font size
, change the font size, and how about a bold font?

Try content centering

What about the content on the right?

Come to a comprehensive try
the second line

Please refer to the prompt modification of the "Title Caption" style in "One-click Typesetting", you can make the first character of this title stand out:

1 Try the first letter highlighting

Note: In theory, Md2All supports all standard html and css, but the problem is that many official accounts do not support it, so only some of the supported ones are demonstrated above.

---

Update List:

---

Version number: V2.6.1
Update date: 2018-02-26
1: Solve the problem that in the V2.6.0 version, when the image url contains special characters ( such as the escape character %40 of @ ), the problem may be parsed incorrectly;
2: Solved On some special models of mobile phones (such as OPPO R11), the indentation of the code block has no effect;
3: Solve the problem that the code will be converted when the code block contains a pair of ~.

---

Version number: V2.6.0
Update date: 2018-02-05
1: Add the display of picture annotation content, and add the corresponding css style figcaption{};
2: Support content directory [TOC][^7], can automatically generate a table of contents according to all titles, and Links are implemented automatically. And add corresponding .toc{}styles to each template;
3: Add the highlighting of go,kotlin,luathese programming languages;
4: Modify the title h2 of "Comprehensive Example";

---

Version number: V2.5.0
Update date: 2018-02-04
1: Add the option of "Display Lines of Code", allowing users to choose whether to display the number of lines of code;
2: Update the "Title Highlight" style, the previous version is copied to In the official account, the title style is invalid. The current version provides an html solution, but users are required to change it according to the instructions
. .
4: Solve the problem that the style file cannot be found in the "pre-title modification"
5: Increase the display of the website record number

---

Version number: V2.4.0
Update date: 2018-01-22
1: Modify the main color of the editing bar to make editing and previewing stronger. And remove the input syntax detection in the edit bar;
2: Add the selection panel of material color, which is convenient for reference when customizing the color;
3: Add "Elegant title", "Title upside down", "Post-title modification", "Grid background" "style, and adjusted "Title Capillary", "Title Four Borders", "Title Top and Bottom Borders";
4: Add more references in "Comprehensive Example", so that you can know how to change the style more clearly
4: Solve the problem that some katex formulas are not displayed correctly, such as:
\[H(D_2) = -(\frac{2}{4}\ log_2 \frac{2}{4} + \frac{2}{4} \log_2 \frac{2}{4}) = 1\]

---

Version number:
V2.3.0 Update date: 2018-01-10

1. Added these styles: title lower border, title upper and lower border, title quad border, title first word prominent, comprehensive example. and added more descriptions below each style;
2. Change the styles below each style p code{}to code {}avoid inline code styles that may not work when listed;
3. Updated to 引用块样式make changes more representative.

---

Version number: V2.2.0
Update date: 2018-01-04

1. Add task list[^4], katex math formula[^5], footnote[^6]; and add its corresponding css style under each style file.

---

Version number: V2.1.0
Update date: 2017-12-20

1. Added file export function to enable the export of html files containing styles;
2. Remove the horizontal scrolling function of the edit bar. The current practice is that when the length of the user's input exceeds the input box, it will automatically wrap to the next line instead of scrolling to the right before. I feel that the editing experience will be better;
3. Add css styles: 'Title background gradient' and 'Kerning is too large';
4. Add demo of table and corresponding style table{};
5. Increase in each mode, so that the image is centered by default, and the image will not exceed the screen, which will be closer to the actual situation:
   img
   {
   display: block;
   margin: 0 auto;
   max-width: 100%;
   }
   a {
   word-wrap :break-word;
   }

---

Version number: V2.0.7
Update date: 2017-12-06

1. Add inline code (p code), and italic (em) css style values ​​under all style themes, and the corresponding demo

2. Added descriptions to all style theme files under "One-click Typesetting" to make friends who are not familiar with CSS more aware of the corresponding functions

3. Add image center demo

---

Version number: V2.0.6
Update date: 2017-12-04

1. Added support for :before and :after under the h1~h6 span, and added the corresponding "title before and after decoration" style
2. Based on the update of Nuggets.com, the "Nuggets Style" has been updated

---

Version number: V2.0.5
Update date: 2017-11-29

1. A more detailed description of the "Nuggets Style" in "One-click Typesetting";
   Note: The PC browser display of "Nuggets" is OK, but the mobile app does not support custom styles yet, so you will see As some styles are lost, this problem has been reported to the technical staff of "Nuggets", and their reply will be fixed as soon as possible.
2. Adjusted the padding of "xt256" in "Code Theme" to make the margin more reasonable;

---

Version number: V2.0.4
Update date: 2017-11-27

1. Added "Nuggets Style" in "One-click Typesetting", and added support for Nuggets.com.

---

Version number: V2.0.3
Update date: 2017-11-27

1. Remove the HTML functionality. Considering that users rarely use it. If you want to see the corresponding HTML just "copy" it into a text editor.

---

Version number: V2.0.2
Update date: 2017-11-24

1. Solve the situation that some global styles are invalid in "One-click Typesetting"
2. Add more styles of "one-click typesetting", and open all css styles for you to modify
   Note: All styles will be reset, and the ones you saved before will be invalid.
3. Save some content previously saved in the cookie to the local stage to avoid the 4KB limit
4. When "copying" content to csdn, blog garden, you no longer need to click HTML

---

Version number: V2.0.1
Update date: 2017-11-20

1. Solve the problem that the following highlight fails when the code block is commented with '//'
2. Convert spaces to escape characters only in html mode;

---

Version number: V2.0.0
Update date: 2017-11-13

1. Add css style reference template, and custom css style
2. Add the function of HTML source code, you can directly "copy"/"paste" the HTML source code to the html editor of csdn, blog garden, etc. or the html under the rich text editor, so as to keep all the styles
3. Add the function of synchronous scrolling of the editing and preview scroll bars (not very accurate yet, will improve later)
4. Add some less attributes under the favorite code style
5. Added the function of automatically saving the draft to the local browser cache after selecting "Edit".
6. Add an example of the language of the specified code
   ***
   Version number: V1.0.4
   Update date: 2017-10-20
7. Update "Code Theme": display of js and css under favorite
8. Update "Code Theme": some properties missing from monokai-sublime and monokai
9. Update documentation
   ***
   Version number:
   V1.0.3 Update date: 2017-10-18
10. Increase the line spacing between codes in the "code compact" mode
    ***
    Version number: V1.0.2
    Update date: 2017-10-17
11. Add a cool "code theme": favorite, and use it as the default theme
12. Added "code compact" option to display more codes on one screen
    ***

Version number: V1.0.1
Update date: 2017-10-13

1. The first version is officially launched
   ***

I am the location where the page jumps to
[^10]: Footnote jump location