Front-end: Add a syntax highlight to the blog or website to display the code method summary.

Source: Internet
Author: User
Tags wordpress blog

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

  • Basic HTML and CSS knowledge

Target

  • Highlight embedded code in a blog or webpage.
  • Automatically ignores HTML and PHP code in Wordpress.

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.