搜尋此網誌

顯示具有 外掛相關 標籤的文章。 顯示所有文章
顯示具有 外掛相關 標籤的文章。 顯示所有文章

Code Prettify 取代 SyntaxHighlighter

很久之前SyntaxHighlighter常會發生程式碼無法上色的問題,最近這一陣子因為發現部落格常常載入過久,這才發現原來好用的SyntaxHighlighter似乎掛掉一陣子了,目前找了Code Prettify來替代掉SyntaxHighlighter

首先一樣到後台的head裡將SyntaxHighlighter相關外掛移除,並加上jsdelivr提供的Code Prettify套件

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<style>
  li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
   list-style-type: decimal !important
  }
  .prettyprint {
    overflow: auto
  }
</style>

另外這邊也有提供一些skin可供替換,請參考以下連結,使用方式為在run_prettify.js後面加上「?skin=套件名稱」,比如MH目前比較中意sons-of-obsidian,則改為「run_prettify.js?skin=sons-of-obsidian」
https://raw.githack.com/google/code-prettify/master/styles/index.html

使用方式則為
<pre class="prettyprint">你的程式碼貼這邊</pre>

範例如下
#include <stdio.h>

int main(void) {

    printf("Hello World!\n");
    return 0;

}

但當程式碼很長時,會不太容易指出哪段,所以通常會標上行號,使用方式是在pre class裡加上「linenums」,例如「pre class="prettyprint linenums"」,而且值得一題的是複製程式碼的時候不會複製到行號

範例如下
#include <stdio.h>

int main(void) {

    printf("Hello World!\n");
    return 0;

}

如果行號不想從 1 開始的話,可以在「linenums」後面加上「:起始行號」,例如「pre class="prettyprint linenums:123"」

範例如下
#include <stdio.h>

int main(void) {

    printf("Hello World!\n");
    return 0;

}

另外由於< >與&等一些常用符號會因為HTML關係無法正常顯示,建議直接將< >要改成「&lt; &gt;」,&則要改成「&amp;」等xml格式,當然也可以加個<xmp></xmp>將程式碼包起來,範例如下,但這樣在所見即所得與HTML切換時還是會變亂碼,而且在Code Prettify奇數行的行距會變得比較大不知道是不是bug

<pre class="prettyprint"><xmp>你的程式碼貼這邊
</xmp></pre>

用MathJax在網頁或部落格顯示數學方程式

以往在編寫含有數學式的文章時,都需要將先在 MathType、Word 或 LaTeX 編輯好數學式再截圖並放到圖片空間才能貼在網頁或部落格中使用,若要修改就必須再截圖一次,使用上非常不方便

現在有了 MathJax 就完全解決這個問題(手機可能無法正常顯示),做法很簡單,以 Blogger 為例,請先到後台的「主題」→「編輯HTML」,在 <head> 後面貼上

<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_CHTML" type="text/javascript">
</script>



其他解說可參考官網 Simple integration

使用方式為在想要表式數學的地方先加上以下符號,中間的 ... 插入想要的數學式
$ ... $ 或 \( ... \)
或者用以下方法顯示獨立一行的方程式
$$ ... $$ 或 \{ ... \}

以下為測試結果
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$


若要替方程式加上編號的話,可參考 MathJax in Blogger 這篇文章的方式

<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js' type='text/javascript'>   
    MathJax.Hub.Config({
        HTML: ["input/TeX","output/HTML-CSS"],
        TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
               equationNumbers: { autoNumber: "AMS" } },
        extensions: ["tex2jax.js"],
        jax: ["input/TeX","output/HTML-CSS"],
        tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ],
                   displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
                   processEscapes: true },
        "HTML-CSS": { availableFonts: ["TeX"],
                      linebreaks: { automatic: true } }
    });
</script>



使用方式如下,eq_name 請自行修改成想要表示該方程式的名字
\begin{equation}\label{eq:eq_name}
...
\end{equation}
範例
\begin{equation}\label{eq:eq_name}
E=mc^2
\end{equation}


而引用方式則為
(\ref{eq:eq_name})
範例
引用 (\ref{eq:eq_name}) 式子

不過如果文章裡常有程式碼或其他特殊符號時,還滿容易會出現 Undefined control sequence,主要是因為$符號的關係,改成全形就解決了,使用前請自行檢查一下

BlogUpp! 流量交換

BlogUpp! 是一個用來增加自己網站曝光率的工具,只要輸入自己的網址,並將小工具貼到自己的網頁上就可以了,步驟非常的簡單

網頁連結:http://www.blogupp.com/

交換比率為10:9

線上 Windows Live Messenger

這款與 Plugoo 還滿類似的,不過只能用MSN

請先進入網頁:http://settings.messenger.live.com/applications/Default.aspx

並做登入的動作

登入完之後,請到 Web Settings 裡的 Create HTML 做樣式設定,並將 Copy the HTML and paste it into your webpage 裡的程式碼貼上即可使用

チャラっと! 動漫時鐘

チャラっと!提供動漫類的網頁時鐘,每個時鐘都很可愛喔!

網頁連結:http://www.charatto.net/index.html

進入網頁後請點選右側的 Enter 進入,再點選左邊的 ブログパーツとか,有相當多種類型,MH選擇flash時計置き場へ,使用方法很簡單,只要將程式碼複製貼上即可

其他像是web拍手置き場「けいおん!」編へ裡面有些就滿搞笑的XDD,大家不彷可以多試試其他的

LinkWithin 以縮圖顯示相關文章

雖然說相關文章若是以文字顯示的話會比較簡潔,但是若有縮圖的話會比較吸引人的眼光,透過縮圖也可以大概了解該文章的內容,而 LinkWithin 就是提供更這樣的功能

網頁連結:http://www.linkwithin.com/learn

進入 LinkWithin 網站後,可於右方選擇你要的樣式,比如說 MH 選擇 Blogger 平台



選擇完畢後會跳到安裝插件頁面,點選第一條的 Install Widget,如下圖所示



安裝完之後會到 Blogger 後台設定,不過怎麼會是舊版面 = =

結果就如下(引用別人的圖

ClockLink 網頁時鐘

你是否想在網頁裡內嵌一個小時鐘呢? ClockLink 就提供了這樣的功能

網頁連結:http://www.clocklink.com/index.php

請先進入該網站,於左排選擇你要的樣式,比如說MH選擇 Logo and Custom,並挑選 Name: thedog001,接著請點選 View HTML Tag



選 Accept



你需要設定的只有時區與時鐘尺寸



最後將程式碼貼上即可看到結果

Cbox留言板

Cbox是目前熱門的留言板之一,可內嵌於網頁中或在頁面上跟著視窗浮動,最重要的是可以自訂樣板,相當的多元化,不過免費會員有許多的限制,即使如此,還是相當得夠用了



簡單的測試結果



網頁連結:http://www.cbox.ws/

還有一款滿像的留言板 ShoutMix 以及另一款即時通留言板 Plugoo 以後有時間會再做介紹

aBowman裝飾小工具

aBowman提供了許多部落格或網頁用的小工具

網頁連結:http://abowman.com/google-modules/

比如說MH覺得fish的小工具不錯,就進入該頁面,將 embed code 貼上,如果是 wrodpress ,就貼 embed code for wordpress.com 的程式碼,結果如下:

Google Chrome Theme

2019/05/05

CRX HEADER INVALID

自從 Google Chrome 73 版後就更改了 HEADER,使得 73 版前的 .crx 在安裝時會顯示 CRX HEADER INVALID,目前可以手動解決,將 .crx 副檔名改成 .zip 並解壓縮出來,再進擴充功能 「chrome://extensions/」,開啟「開發人員模式」,再選擇「封裝擴充功能」,最後選擇要封裝的資料夾即可

如果出現封裝擴充功能錯誤,就請開啟「manifest.json」,在 version 下面增加一行「"manifest_version": 2,」,存檔後再重新封裝一次,這樣就解決 CRX HEADER INVALID 的問題了
封裝擴充功能錯誤
The 'manifest_version' key must be present and set to 2 (without quotes). See developer.chrome.com/extensions/manifestVersion.html for details.


如果更新 chrome web store 的主題,記得更改 version 號碼,將整個資料夾重新壓縮成 .zip 就可以上傳更新了,直接將重新封裝的 .crx 改成 .zip 無法上傳

參考資料
1. Chrome 73 安装crx扩展插件方法汇总,解决CRX HEADER INVALID https://chrome.zzzmh.cn/help?token=setup

---

Google Chrome瀏覽器以介面陽春、瀏覽速度快,在網路上很快就占有一席之地,不過有時太過陽春也覺得滿空洞的,因此MH打算更換一下Google Chrome Theme

網路上的Google Chrome主題很多,Google有一個主題庫(點我前往),不過大多也不怎麼好看...,動漫類相關最近多了起來,以下簡單挑幾個還滿不錯的,需要者可自己下載:

Good Smile Company 的 NENDROID 系列:Mediafire下載




初音未來:Mediafire下載




輕音少女K-ON!:Mediafire下載




除此之外,MH還在網路上找到一個不錯的夏ノ雨的Google Chrome Theme,夏ノ雨是一款GalGame...,因此就不多說明了,夏ノ雨的Google Chrome Theme還滿好看的,想要的就下載吧~

夏ノ雨:Mediafire下載Google Drive下載




想分享自製 Google Chrome Theme 的話,可到 chrome theme creator online https://www.themebeta.com/chrome-theme-creator-online.html 製作,包出來的 zip 檔可到開發人員帳戶 https://chrome.google.com/webstore/developer/dashboard 上傳分享

讓MSN顯示foobar2000播放音樂歌名

插件名稱為foo_msnalt.dll,foobar2000 v1.1 以上才能使用

最新插件可至以下位置下載:
foobar2000 Components


將foo_msnalt.dll放至components資料夾下,並重新啟動foobar2000,開啟MSN後,至"選項 → 個人"裡,將"顯示我正在收聽的歌曲資訊"打勾即可

Rainmeter播放器面板

安裝完Rainmeter後,到NowPlaying頁面下載插件,在此以foobar2000示範,因此MH下載foo_rainmeter.dll,並將foo_rainmeter.dll放到foobar2000\components下。

再來是面板,到deviantART下載Leij面板,作者為White-Baron,請雙手合十、滿懷感激的下載XD,下載完解壓縮後,點兩下Leij.rmskin選Install就安裝完畢了。

接著選擇你要使用的播放軟體,目前支援AIMP, foobar2000, iTunes, MediaMonkey, Spotify, Winamp 和 WMP,在Player中輸入軟體名稱,如下圖所示:



比如說MH輸入foobar2000,再來開啟播放軟體,最後按下中間的播放鈕即可,結果如下圖所示



不過MH試用過後發現當調整進度條時會有延遲的現象,而且如果要更換其他播放軟體時,需到Documents\Rainmeter\Skins\Leij底下更改Leij.ini,看是要把"PlayerName=你設定的播放軟體名稱"直接改成比如說WMP還是就讓他空白(即"PlayerName="),記得存檔,然後像剛剛那樣在Player中輸入軟體名稱也可。