Ein Memo zur Erstellung von Quellcode-Demoseiten in WordPress.
Für neue Web-Bibliotheken, ob JS, CSS3 oder jQuery, wenn Sie solche Dinge verwenden, demonstrieren Sie sie fast immer. Sie erstellen Dateien lokal oder auf einem Server, betrachten sie im Browser und nicken “ach so, verstehe.” Ich bin faul, also mache ich es nicht oft, aber einige automatisieren Updates mit Node.js.
Da ich mir die Mühe gemacht habe, solchen Quellcode zu erstellen, dachte ich, es wäre schön, ihn einfach in meinem Blog, WordPress, zu präsentieren.
Vorerst habe ich gerade mit prism.js gearbeitet, also möchte ich das einbinden.
Für die Erstellung,
Erstellen Sie zunächst eine benutzerdefinierte Seite.
Maskieren Sie das HTML hier.
Free Online HTML Escape / Unescape Tool - FreeFormatter.com
Dann posten Sie mit HTML wie diesem. (Ich verwende ein Plugin, das Markdown automatisch in HTML erweitert, also ersetzen Sie das entsprechend)
## DEMO of [Prism](https://prismjs.com/).
<iframe src="https://yuis-programming.com/demo/prismjs.html" width="" height=""></iframe>
## Source code of above showing.
<pre><code>
<!DOCTYPE html>
<html>
<head>
<link href="https://yuis.xsrv.jp/cdn/css/prism.css" rel="stylesheet" />
</head>
<body>
<script src="https://yuis.xsrv.jp/cdn/js/prism.js">
<pre><code><p class="red">red text </p> </code></pre>
<pre> <code>sudo vim hoge.md </code> </pre>
</body>
</html>
</code></pre>
<code>
</code><code></code>