Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

The introduction

It has recently been discovered that developers of some blog applets do not know how to handle the details of code highlighting, especially updating the code style library and automatically inserting code tags.

I article code highlighting implementation

Using the open source component MP-HTML to implement, highlighting function depends on PrismJS, default configuration only support HTML, CSS, CLIKE, javascript into the language. If you want to support more languages, go to prismjs and download the prism.min.js and prism.css files and replace them with plugins/highlight/.

When developing with HBuilder X, you can import directly from the plug-in marketplace.

<view class="data-view"> <mp-html :tag-style="tag_style" :content="detailData.content.rendered" : container_style ="container_style" selectable="true" > </mp-html> </view>Copy the code

A style library that supports languages

Prismjs.com/download.ht…

A powerful applet rich text component

1.1 Usage of MP-HTML

  1. Applet pages support code highlighting

wxml

<mp-html  content="{{html}" </mp-html>
Copy the code

Those that match the following Pre format will be highlighted

<! -- Pre contains a code and sets language in the class of pre or Code -->Copy the code

HBuilderX 2.5.5+ can be automatically imported via easycom github.com/jin-yufeng/…

  1. WordPress article pages support code highlighting

My applet is currently built using the wordpress API, so it is necessary to have the article page support code highlighting.

Other methods: The Code Prettify plugin is recommended

1.2 Update the support language style library

The mp-HTML component supports HTML, CSS, C-like, and JS by default

Update PrismJS to introduce more style libraries. Prismjs.com/download.ht…

II Automatically inserts code block code label

2.1 Method 1: After obtaining the data of the article, add the code label using the re

Small program end automatically insert code block code tag 

, using the re to add class

Disadvantages: Dead language style library, class=”language-css”

.replace(/<code([\s\w"=/.:;] ((+)? :(style="[^"]+")))/ig, '<code') .replace(/<code([\s\w"=/.:;] ((+)? :(class="[^"]+")))/ig, '<code') .replace(/<code>/ig, '<code class="language-css">')Copy the code

Fix: Optimize the regular to add classes, if a language-specific class already exists, do not add classes.

2.2 Method 2: Automatically insert code block label when publishing WP articles

Automatically insert code block code tag when publishing WP articles: recommend using WP plugin: WP Githuber MD

2.3 summary

It is not recommended to automatically insert the code block tag 

 on the applet side. It is recommended to use the WP plugin to automatically generate code tags. The code base tag should be automatically inserted when publishing wp articles, not forced to write CSS styles after getting the interface data.

This is also possible if the code tag is automatically inserted after the data is retrieved, rather than writing a language-specific style. A recommended WP plugin for automatic tagging: WP Githuber MD

Examples of incorrect code for this rule:

PosdData: function() {var that = this; uni.request({ url: API + '/wp-json/wp/v2/posts/' + that.posdCenterID, success: (res) => { that.detailData = res.data; that.posdCenterTitle = res.data.title.rendered; that.posTag = res.data.tags[0]; that.postID = res.data.id; // The assignment dynamic box that.percent = 100; . / / regular add a class that contentDate = res. Data. The content. rendered. Replace (/ < h1 ([\ s \ w = /. :; "] ((+)? :(style="[^"]+")))/ig, '<h1') .replace(/<h1([\s\w"=/.:;] ((+)? :(class="[^"]+")))/ig, '<h1') .replace(/<h1>/ig, '<h1 class="h1">') .replace(/<h2([\s\w"=/.:;] ((+)? :(style="[^"]+")))/ig, '<h2') .replace(/<h2([\s\w"=/.:;] ((+)? :(class="[^"]+")))/ig, '<h2') .replace(/<h2>/ig, '<h2 class="h2">') .replace(/<h3([\s\w"=/.:;] ((+)? :(style="[^"]+")))/ig, '<h3') .replace(/<h3([\s\w"=/.:;] ((+)? :(class="[^"]+")))/ig, '<h3') .replace(/<h3>/ig, '<h3 class="h3">') .replace(/<h4([\s\w"=/.:;] ((+)? :(style="[^"]+")))/ig, '<h4') .replace(/<h4([\s\w"=/.:;] ((+)? :(class="[^"]+")))/ig, '<h4') .replace(/<h4>/ig, '<h4 class="h4">') .replace(/<h5([\s\w"=/.:;] ((+)? :(style="[^"]+")))/ig, '<h5') .replace(/<h5([\s\w"=/.:;] ((+)? :(class="[^"]+")))/ig, '<h5') .replace(/<h5>/ig, '<h5 class="h4">') .replace(/<h6([\s\w"=/.:;] ((+)? :(style="[^"]+")))/ig, '<h6') .replace(/<h6([\s\w"=/.:;] ((+)? :(class="[^"]+")))/ig, '<h6') .replace(/<h6>/ig, '<h6 class="h6">') .replace(/<code([\s\w"=/.:;] ((+)? :(style="[^"]+")))/ig, '<code') .replace(/<code([\s\w"=/.:;] ((+)? :(class="[^"]+")))/ig, '<code') .replace(/<code>/ig, '<code class="language-css">')Copy the code

see also

If you have a better way to implement welcome to pay attention to # public number: iOS reverse communication.

I also recently launched # Applets: iOS Reverse, only for you to present valuable information, focus on mobile technology research field.

Article style for small program development

Kunnan.blog.csdn.net/article/det…