簡書中代碼框的效果實現(xiàn)

如何在簡書中用代碼框顯示代碼塊?少廢話先接上效果圖

private String s1 = "Hello";
private String s2 = "World";

這篇文章是學成后的第一個實踐成果,下面便是整理的詳細步驟,希望對各位朋友有所幫助。

1.設(shè)置簡書的編輯器

代碼塊的實現(xiàn)下過是實際上是用 Markdown這種輕量級的標記語言。即,通過一些簡單的標記語法使得文字以某種特殊樣式顯示。

簡書中支持 Markdown的使用,但需要進行設(shè)置,因為默認的設(shè)置是無法使用。

具體操作:在簡書"設(shè)置"中"基礎(chǔ)設(shè)置"選項卡下的"選擇常用的編輯器"選擇" Markdown"即可,截圖如下:


7PQ%V2DIBB}B_AC788)UHT7.jpg

2.切換到預(yù)覽模式

接下來,新建一篇文章,點擊右上角的"預(yù)覽模式":

![~GYDO6J(J]_)3D6FDC]}2%D.png](http://upload-images.jianshu.io/upload_images/2027104-48da8f99fbbe91e4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
此時便出現(xiàn)了兩個窗口,左側(cè)窗口便可使用Markdown標記語言,右側(cè)窗口便會出現(xiàn)對應(yīng)的效果預(yù)覽。

![FNIGXBXQKY]]ROX$2YD03JM.png](http://upload-images.jianshu.io/upload_images/2027104-eea9b707b0815782.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3.代碼塊的效果實現(xiàn)

如果想顯示一段代碼,在左側(cè)窗口中按照以下方式即可:

  • 方法一:在代碼的前后分別加上三個反引號```
    其中,反引號的輸入方式為:英文輸入法狀態(tài)下,按鍵盤左上角數(shù)字1旁邊的鍵
    V1}))S(TG8Q4Z($Y(O`H}@R.jpg](http://upload-images.jianshu.io/upload_images/2027104-583ae4fe02049f4e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) *實現(xiàn)代碼如下:* ![)`FEK00DGC}T9}N%EUKMAN9.png

    效果如下:
private String s1 = "Hello";
private String s2 = "World";
  • 方法二:在每行代碼前面輸入三個Tab鍵
    private String s1 = "Hello";
    private String s2 = "World";'

4.Markdown的其他使用語法

沒有空格效果
 全角1個空格鍵效果
  全角2個空格鍵效果
   全角3個空格鍵效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,893評論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,161評論 4 61
  • 文|米格格 《少年派》里說:“人生到頭來就是不斷地放下,但遺憾的是,我們卻來不及好好道別。” 01. 馬航MH...
    米格格閱讀 12,837評論 51 147
  • 開普勒452b.類地行星.人類的能力和智力既渺小又偉大.什么時候能找到地外生命.帶去人類的問候和文明.也接觸和了解...
    說錯了_是相對孤獨閱讀 338評論 2 5
  • 消費者接觸一個產(chǎn)品,首先看到的會是這個產(chǎn)品的外觀包裝,其次才是這個產(chǎn)品的內(nèi)涵,所以產(chǎn)品包裝對于消費者的消費...
    茶園陸記閱讀 585評論 0 0

友情鏈接更多精彩內(nèi)容