プレゼンツールSpectacleのデモを動かしてみる

前提

  • Ubuntu Desktop 18.04 LTS(minimal)

コード

素うぶん前提なのでcurlインストールから。


サーバの外からアクセス可能にする

ポート開放設定は省略。
[package.json]の以下の行を書き換える。

画面例

最新の仕様では２ペインでコードを表示する機能があります。
デモを動かしてみるとこんな感じで表示される。

参考URL

公式サイト
デモサイト
GitHub>

コメント

コメントを投稿

このブログの人気の投稿

livedoorブログで、コメントのいいね（ハート）機能やスレッド表示機能を生かしたままコメントIDを表示させる

イメージ
概要 livedoorブログのコメント欄の「いいね」や「スレッド表示」機能は、管理画面でオンオフを選択できますが、コメントIDの表示の有無を管理画面から設定する事はできません。 ソースを編集すればコメントIDを表示させる事は可能ですが、トレードオフとして「いいね」や「スレッド表示」機能が使えなくなってしまいます。 コメントIDを表示させるだけでそれらの機能を殺してしまうのは勿体ないので、上手く両立させる事ができるようにコードを書いてみました。 ただしスマホ用の設定ではソースを編集する事ができない為、PC用画面のみの対応です。 表示サンプルのブログ 設定手順 １．livedoorブログの管理画面から、【ブログ設定】→【デザイン / ブログパーツ設定】-【PC】→【カスタマイズ】→【個別記事ページ】と辿ってソースコードを表示します。 ２．ソースから<$CommentsList$>を探して、その真下にコードを挿入します。 挿入するコード： <!--コメントID付与:start--> <AllCommentsLoop> <IfCommentStatus> <span style="display:none" class="comment-id-list" data-comment-num="<$CommentNumber$>" data-comment-id="<$CommentIdString$>"></span> </IfCommentStatus> </AllCommentsLoop> <script type="text/javascript"> try {   document.querySelectorAll("span.comment-id-list").forEach((elm)=>{     let commentNum=elm.getAttribute("data-comment-num");     let newElm=document.createEl...
続きを読む »