機能 ショートカットキー
リファレンス(参考URL)一覧へ移動 R
記事URLをMarkDownとしてコピー Ctrl+M
前のコードタグへ移動 Ctrl+←
次のコードタグへ移動 Ctrl+→
ヘルプを表示・非表示 H
Tips
- ショートカットキーは記事上で有効です。ヘッダー/フッター付近では機能しないことがあります。
- コードタグ移動機能がうまく動かないときは、Shift+F5でページを更新してみてください。
- このウィンドウを閉じるには、Hキーをもう一度押してください

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

プログラミング

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

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

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

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

[prismjs demo | yuipro](https://yuis-programming.com/prismjs-demo/)

![https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_45ff80b2-a0a6-4f25-aada-3127a08a09bc.png](https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_45ff80b2-a0a6-4f25-aada-3127a08a09bc.png)

で、作り方ですが、

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

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

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

[Free Online HTML Escape / Unescape Tool – FreeFormatter.com](https://www.freeformatter.com/html-escape.html#ad-output)

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

“`
## DEMO of [Prism](https://prismjs.com/).

## Source code of above showing.


<!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 class="language-markup code-toolbar line-numbers ">&lt;p class="red">red text &lt;/p>        </code></pre>
        <pre> <code class='language-markup command-line-prompt '>sudo vim hoge.md              </code>        </pre>
    </body>
</html>


```

この記事で欲しい情報が見つからなかった方へ

この記事の更新情報がある場合があります。
この記事は以下の記事とも関連性があると思われます。

WordPressブログを雛形だけコピーしてポートフォリオに加える方法
WordPressにSNSシェアボタンを実装しました [メタ]
WP-CLIでサイトアドレスとWordPress アドレスのURLをSSH経由で変更
SQLでWordPressの記事ごとのメタタグ(メタキーワード)を簡単に確認/編集する
SQLでWordPressの記事を正規表現検索してMarkDown形式にする – 簡単にWordPressブログの記事リンクを取得する方法
WordPress URLによって404ページの内容を変更する
SQLでWordPressで非公開の記事を特定して対処する


管理人の方針で、既存の記事の編集はせず、新しい情報や大きな既存情報の更新があった場合には、新しい記事として公開することになっています。
当記事で欲しい情報が見つからなかった・解決に至らなかった場合、これらのリンクがお役に立てるかも知れません。

どうやってこの関連記事を生成しているの?
この機能のPHPソースコード(2500行)

コメントを残す

Close Menu