[WordPress]CodeMirror Blocks – 極具美觀及實用性的代碼高亮插件

發布帶有代碼的文章時,代碼高亮為必須安裝的插件之一,能突出代碼之外還可根據不同的程式語言以不同的顏色和字體顯示代碼。這是一種提高文本的可讀性和上下文的策略,特別是對於跨越幾頁的代碼。讀者可以根據自己的需求輕鬆地忽略大部分註釋或代碼。

CodeMirror Blocks這個插件甚至有呈現前端運行效果的功能,如果你的blog時常需要發布帶有代碼的文章,這個插件就必須裝起來啦!

官網:https://codemirror.net/

支持100多種編程,腳本和標記語言,具有56種不同的主題。

使用方法

在文章編輯頁面添加CodeMirror Block即可新增代碼區塊,在該區塊內貼上代碼即可。

插入 [WordPress]CodeMirror Blocks - 極具美觀及實用性的代碼高亮插件

點選代碼區塊,右側可以選擇該代碼的語言類型以及主題。

設定 1 [WordPress]CodeMirror Blocks - 極具美觀及實用性的代碼高亮插件

設定

後台-CodeMirror Blocks 可以設定預設代碼類型以及主題,也可以選擇是否在左側顯示行數、是否顯示高亮行。

image 3 [WordPress]CodeMirror Blocks - 極具美觀及實用性的代碼高亮插件

還可以選擇是否顯示控制列、左上方顯示代碼類型還是檔名、是否啟用執行/全屏/複製按鈕(預設是全部顯示)。

image 4 [WordPress]CodeMirror Blocks - 極具美觀及實用性的代碼高亮插件
image 5 [WordPress]CodeMirror Blocks - 極具美觀及實用性的代碼高亮插件
Control Panel
image 6 [WordPress]CodeMirror Blocks - 極具美觀及實用性的代碼高亮插件
Language Label

效果演示

HTML

<ol class='breadcrumb-tmc'>
   <li>
      <a href="https://www.example.com/">Home</a>
   </li>
   <span class='breadcrumb-tmc-separator'> » </span>
   <li>
     <a href="https://www.example.com/hello-world">Hello World</a>
   </li>
 <ol>

PHP

<?php echo do_shortcode( '[breadcrumb-tmc]' ); ?>

Python

import mysql.connector
mydb = mysql.connector.connect(
  host="localhost",
  user="root",
  passwd=""
)
print(mydb)

JavaScript

var date = new Date();
var options = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};
console.log(date.toLocaleString('en-US', options));

JAVA

import java.util.*;
public class main{
    public static void main(String[] args) {
            Scanner sc=new Scanner(System.in);
            while(sc.hasNext()){
            	long S = sc.nextLong(),D = sc.nextLong();
            	long total = S;
            	while(total < D){
            		S++;
            		total += S;
            	}
            	System.out.println(""+S);
            }
    }
};
0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論