prime.js Integration in Ghost

Da sich dieser Blog primär mit Softwareentwicklung beschäftigt, liegt die Einbindung des einen oder anderen Source-Code-Listings auf der Hand. Für diesen Zweck wird prism.js per Code injection in den Eigenschaften eines Postings eingebunden.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-coy.css" integrity="sha512-epQrFDNiuRFVbCb6pdYk2XnL/mqmDGLph8DuExKxa3IoKy7CAZkw2PKK9I/xFrLYV5Dij1XdwuT5DHkhtpMd0Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2yw3LRUQvjJ0Pjx0EShmaQjcHa6AXiOv6qHQu9lCAIR8O+/D8FtaCoJ2c0Tf9Xo7hYH01Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-SkmBfuA2hqjzEVpmnMt/LINrjop3GKWqsuLSSB3e7iBmYK7JuWw4ldmmxwD9mdm2IRTTi0OxSAfEGvgEi0i2Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css" integrity="sha512-Dqf5696xtofgH089BgZJo2lSWTvev4GFo+gA2o4GullFY65rzQVQLQVlzLvYwTo0Bb2Gpb6IqwxYWtoMonfdhQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js" integrity="sha512-st608h+ZqzliahyzEpETxzU0f7z7a9acN6AFvYmHvpFhmcFuKT8a22TT5TpKpjDa3pt3Wv7Z3SdQBCBdDPhyWA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js" integrity="sha512-/kVH1uXuObC0iYgxxCKY41JdWOkKOxorFVmip+YVifKsJ4Au/87EisD1wty7vxN2kAhnWh6Yc8o/dSAXj6Oz7A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Die prism.js Abhängigkeiten unter Verwendung des Themes COY werden über das CDN (Content Delivery Network) cloudflare eingebunden: https://cdnjs.com/libraries/prism

Zusätzlich werden Plugins für das automatische Nachladen der Abhängigkeiten einer unterstützten Programmiersprache und für das Kopieren des Source-Codes eingebunden.

Source-Code, z.B. Javascript, wird dann als HTML-Card wie folgt integriert:

<​pre​><​code class="language-javascript"​>
...
<​/​code​><​/​pre​>

Beispiele für den Programmier-Klassiker "Hello World":

// Java
public class HelloWorld 
{
       public static void main (String[] args)
       {
             System.out.println("Hello World!");
       }
}

/* C++ */
#include <iostream>

int main() {
    std::cout << "Hello World!";
    return 0;
}

# Python
print("Hello World.")