Home > Developer > JavaScript
Front-end: Add a syntax highlight to the blog or website to display the code method summary.
Code method summary for adding syntax highlighting to a blog or website
Document directory
Recently, I encountered a problem when writing code, that is, how to make the code as highlighted on a webpage or blog (such as display) in the IDE or professional compiler. I checked a lot of information online, the following is my summary of the learned methods.
The following methods are basically implemented using a third-party javascript plug-in, so you don't have to worry about how difficult the method is. You just need to use it. Before describing the method, we should first introduce the following conditions:
Prerequisites
Target
There are two main methods. One is to introduce a third-party JavaScript and highlight syntax plug-in to highlight the code in the pre and code labels, another method is to directly embed the syntax code of mainstream websites.
Method 1: Embed
The embedding method is the most convenient and quick. Many websites provide the code export function. It can automatically introduce the highlighted code Display Mode of professional websites, which is elegant and elegant.
GitHub gist
Usage:
<! DOCTYPE html>
Effect:
Codepen pen
Usage:
<! DOCTYPE html>Effect:
Method 2:JavaScriptHighlight plug-in
By introducing the Code highlight plug-in, you can also highlight the embedded code of blogs and other websites. The following are some mainstream methods. I only show the basic usage methods. For details about the usage and interfaces, click here to go to the official website.
Highlight. js
Usage:
<! DOCTYPE html>
Effect:
Prism. js.
Usage:
<!DOCTYPE html>Effect:
Google Prettify
Usage:
<!DOCTYPE html>
Effect:
Method 3: IgnoreHTMLAndPHP
To display HTML and PHP code, the browser must automatically ignore the displayed code. You can use the online Conversion Tool.Free Online HTML Escape ToolTo convert the HTML code to be displayed. If you use a wordPress blog,WordPress pluginThis function can be implemented, but it cannot be used together with Prism. js.
Summary
Embed good-looking code in your blog or website. If you want to learn more useful WordPress functions, we recommend that you visitThis is the resource for you.
For more information, see http://www.cnblogs.com/dragonir/p/7426965.html. For more information, see dragonir.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
