WordPressでソースコードのデモページを簡単に作る

    >


新しいウェブ系のライブラリ、jsでもCSS3でもjQueryでも、そういうのを使うときは必ずと言っていいほどデモプレイすると思います。
自分でローカルにファイル作ったり、サーバーに作ったりして、ブラウザで見ながらあーなるほどーと唸ったり。僕は面倒なのであんまやりませんけどnodejsで更新自動化したり。

そういうソースコードを、せっかく作ったので、ブログ、WordPressで簡単に紹介できたらなぁと思うわけです。

とりあえず、prismjsってのをちょうどいじっていたので、これを載せたいと思います。

作ってみたので、実際見てみてください。

prismjs demo | yuipro

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_45ff80b2-a0a6-4f25-aada-3127a08a09bc.png

で、作り方ですが、

まず、カスタムページってやつを作ります。

[internallinks “カスタムページ”]

こちらでHTMLはエスケープしましょう。

Free Online HTML Escape / Unescape Tool – FreeFormatter.com

で、こんな感じのHTMLで投稿します。(僕はMarkdownが自動でHTML展開されるプラグイン使ってるのでそこは随時置き換えてください)

## 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>




お困りですか?この記事で紹介していることをマンツーマンで指導、解説、代行します。まずはお気軽にお問い合わせください。


Close Menu