打造屬於自己的個性博客高亮代碼?

採用notepad++打造屬於自己的個性博客高亮代碼效果,過程有點小複雜,就我個人而言還是樂意接受的。

工具/原料

notepad++

方法/步驟

首先在電腦上安裝個輕量級的文本編輯器:notepad++

打造屬於自己的個性博客高亮代碼

然後用notepad++打開代碼源文件,並且設置自己喜歡的代碼風格,如下圖

打造屬於自己的個性博客高亮代碼

打造屬於自己的個性博客高亮代碼

設置好之後,將我們的代碼導出HTML文件,這裡為了演示,我就直接保存在桌面上了

打造屬於自己的個性博客高亮代碼

打造屬於自己的個性博客高亮代碼

我們可以雙擊查看一下效果

打造屬於自己的個性博客高亮代碼

然後我們再用notepad++打開我們剛才導出的HTML文件,為了在博客上能很好的展示,我們需要對代碼做小小的改動,如圖

打造屬於自己的個性博客高亮代碼

打造屬於自己的個性博客高亮代碼

然後我就以網易博客為例,將代碼粘貼進去:新建一篇日誌,先在編輯狀態拍好版,然後進入代碼編輯狀態,將我們改好的代碼粘貼進去,記得將titile那句代碼刪掉,然後我們直接發佈,不能預覽之後再發布,不然博客會把我們設置好的樣式給清除的

打造屬於自己的個性博客高亮代碼

打造屬於自己的個性博客高亮代碼

發佈之後就能看到我們設置的個性代碼高亮效果,是不是很有成就感呢,趕緊來試試吧,對於有一定HTML和css網頁編程基礎的人來說會更好理解。

打造屬於自己的個性博客高亮代碼

注意事項

notepad++導出後的HTML文件的span標籤裡面的樣式一定要修改

notepad++導出後的HTML文件需要根據博文的寬度做一定的修改

記得將title標籤那句代碼去掉哦

相關問題答案