起因是我們在做愛學啊官方網站的時候，要用到富文字的地方有電子書頁面，文章頁面，所以就要用到富文字編輯，調研了一圈就選用了Tower開源的Simditor編輯器，各方方面都還不錯基本上沒有什麼大的Bug，主要是他原來上傳圖片需要服務端配合，但是現在大部分情況下都是將圖片這類資源託管的到第三方，所以我們這裡修改了他的原始碼，支援直接將圖片上傳到阿里雲。但有了富文字，貼別是 裡面貼程式碼，如果不高亮總感覺死氣成成的，感覺先不說程式碼內容這麼樣，要格式不好看就沒有靈魂，最後實在不能忍所以就到處尋找發現用的最多的highlight.js，但是他所支援的格式是：
<pre>
<code class="java">
</code>
</pre>
複製程式碼而Simditor預設編輯出來的程式碼塊是： 也就是說highlight.js支援的是沒有字首的，這裡也說不上誰對誰錯，畢竟Simditor也是按照H5規範來的，而highlight.js可能由於年代久遠，那時候還沒這規範，所以就這樣實現的，但是好像在highlight.js官網看到所可以設定字首，不過沒找到；接著就想的是更改Simditor原始碼，但更改後升級就不太好升級了，接著想的是更改highlight.js原始碼，檢視一番後發現沒太看懂，也挺麻煩，所以這個需求就一直擱置了，直到有一天知道PrismJS然後就是這加進來的，佔時沒有發現什麼大的問題，所以就在做一個記錄也幫助到需要的人。
下載PrismJS
來到PrismJS官網，可以發現在首頁他就佔時了幾個主題的切換按鈕，下面就相應的效果，我們這裡選用的是預設主題。來到PrismJS下載頁面：
第一步：選擇下載的版本是開發版本，還是壓縮版本。
第二步：選擇主題。
第三步：選擇需要的語言，如果你第一次整合，建議你選擇預設的語言，先下載下來整合到專案中，確認沒問題，能實現需求，然後在選擇語言。
第四步：選擇外掛，我們這裡沒有選用。
複製程式碼下載完成後得到兩個檔案：
prism.css，prism.js
在網頁中引入資源 現在就可以在網頁中引入這個兩個資源，js建議在body內容後面引入，例如這樣：
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./prism.css">
</head>
<body>
<pre><code class="lang-java">private void showCommentMoreDialog(final Comment data) {
CommentMoreDialogFragment dialogFragment = new CommentMoreDialogFragment();
dialogFragment.show(getSupportFragmentManager(), new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
processOnClick(which, data);
}
});
}
</code></pre>
<!-- 引入js，該js內部處理了，也就是說在head中引入也是沒問題的 -->
<script type="text/javascript" src="./prism.js"></script>
</body>
</html>
複製程式碼效果如下圖：
<!DOCTYPE html>
<html>
<head>
<title>test1</title>
<!-- 引入css -->
<link rel="stylesheet" type="text/css" href="./prism.css">
</head>
<body>
<pre><code class="lang-java">private void showCommentMoreDialog(final Comment data) {
CommentMoreDialogFragment dialogFragment = new CommentMoreDialogFragment();
dialogFragment.show(getSupportFragmentManager(), new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
processOnClick(which, data);
}
});
}
</code></pre>
<!-- 引入js，該js內部處理了，也就是說在head中引入也是沒問題的 -->
<script type="text/javascript" src="./prism.js" data-manual></script>
<script type="text/javascript">
//然後在需要的位置呼叫如下方法
Prism.highlightAll();
</script>
</body>
</html>
複製程式碼顯示效果和上面一樣。
Simditor增加更多語言 預設情況下Simditor大概就10多種語言，所以說可能不夠用，比如：Groovy，Go，Swift，Kotlin就沒有，所以說這不能忍，就需要修改，另外還有個問題是，好像部分語言他們的命名還不一樣，我們這裡就統一修改成了PrismJS的命令，修改的方法也很簡單：
修改simditor.js中的this.langs = this.editor.opts.codeLanguages屬性。
複製程式碼我這裡修改完成後的程式碼如下，大概有40中語言，大家拿去直接就可以放到你的原始碼中就行了：
this.langs = this.editor.opts.codeLanguages || [
{
name: 'ASP.NET',
value: 'aspnet'
},
{
name: 'Bash',
value: 'bash'
},{
name: 'Basic',
value: 'basic'
}, {
name: 'C',
value: 'c'
}, {
name: 'CoffeeScript',
value: 'coffeescript'
}, {
name: 'C++',
value: 'c++'
}, {
name: 'C#',
value: 'csharp'
}, {
name: 'CSS',
value: 'css'
}, {
name: 'Diff',
value: 'diff'
}, {
name: 'Erlang',
value: 'erlang'
}, {
name: 'Go',
value: 'go'
}, {
name: 'Groovy',
value: 'groovy'
}, {
name: 'HTML,XML',
value: 'html'
}, {
name: 'Java',
value: 'java'
}, {
name: 'JavaScript',
value: 'js'
}, {
name: 'JSON',
value: 'json'
}, {
name: 'Kotlin',
value: 'kotlin'
}, {
name: 'Less',
value: 'less'
}, {
name: 'Lisp',
value: 'lisp'
}, {
name: 'Lua',
value: 'lua'
}, {
name: 'Markdown',
value: 'markdown'
}, {
name: 'Markup',
value: 'markup'
}, {
name: 'Matlab',
value: 'matlab'
}, {
name: 'Objective C',
value: 'objectivec'
}, {
name: 'Perl',
value: 'parl'
}, {
name: 'PHP',
value: 'php'
}, {
name: 'PL/SQL',
value: 'plsql'
}, {
name: 'PowerShell',
value: 'powershell'
}, {
name: 'Python',
value: 'python'
}, {
name: 'R',
value: 'r'
}, {
name: 'Ruby',
value: 'ruby'
}, {
name: 'Rust',
value: 'rust'
}, {
name: 'Scala',
value: 'scala'
}, {
name: 'Sass',
value: 'sass'
}, {
name: 'Scss',
value: 'scss'
}, {
name: 'SQL',
value: 'sql'
}, {
name: 'Swift',
value: 'swift'
}, {
name: 'TypeScript',
value: 'typescript'
}, {
name: 'VB.NET',
value: 'vbnet'
}, {
name: 'VisualBasic',
value: 'visual-basic'
}, {
name: 'Yaml',
value: 'yaml'
}
];
複製程式碼修改完成後，在選擇語言的時候就改變了。
關於Simditor的問題 感覺Simditor還有一些問題，不知道大家是如何解決的，建議大家收藏這篇文章(只有官方才會更新)，後面如果解決的相應的問題會在更新的。
-
有時候從編輯器中直接複製原始碼到編輯中，有些換行符沒有了，臨時解決辦法就是先貼上到文字編輯器，然後在複製。
-
撤銷感覺不太好使。
-
有時選中一段文字，再貼上會貼上到編輯器最前面。
原文來自如何在Tower開源的富文字編輯器Simditor中使用PrismJS來高亮程式碼？，如果感覺我們寫的不錯，可以支援我們一下，我們官網提供線上視訊教程在官網購買可以優惠5元喲，同時視訊課程也可以在網易雲課程，騰訊課堂上購買。
有任何問題可以新增我們的QQ來討論：3469271680；也可以掃描下面的二維碼新增Android開發交流群和微信公眾號(愛學啊官網底部也有聯絡方式喲)，我們平均每天都會推送一篇優質文章；評論可能回覆不是很及時，還望大家體諒；購買課程後可以獲得一對一答疑服務，當然也可以談人生談理想瞎扯淡；同時如果是零基礎想學程式設計的朋友也可以聯絡我們進行諮詢，我們可以提供一些建議和幫助，讓你在程式設計道路上更順暢。
