• 線上工具
  • - 計算器
    • 字元計數
  • - 下載
    • TikTok 下載
    • 抖音下載
  • - 網路工具
    • BASE64
    • Base64 轉圖片
    • 圖片轉 Base64
    • URL 編碼
    • JavaScript
    • 時間戳
    • Unicode 轉換器
    • JSON 格式化
    • 修改副檔名
    • 製作列表
    • CSS 優化器
  • - 加密工具
    • MD5 加密
    • 隨機生成器
  • - 圖像工具
    • 圖像壓縮
    • QR 碼生成器
    • QR 碼識別器
    • 壁紙預覽
  • - 資訊表
    • 血型遺傳
    • 服裝尺寸
  • [email protected]
DopuBox
  • English
  • Español
  • Français
  • 日本語
  • 한국어
  • 简体中文
  • 繁體中文
全部 ニュース Meta Code 文化・アート
LinuxでHTMLスライドを作成する簡単なチュートリアル
2022-01-22

見たところ得られたPPTは比較的低効率なもので、内容とスタイルが分離されていないため、スライドを作るときは半分の精力を内容ではなく外観に置かなければならない。複雑で膨大なファイルフォーマットは、Unixの純粋なテキスト哲学に合致せず、特定のGUIでマウス操作するのに適しており、テキストエディタで修正することはできず、テキストツールのスクリプトで処理することはさらに難しい。さらにマイクロソフトの彼の家のフォーマットが開放されていないことに加えて、各ルートのオープンソースのOffice製品は様々な程度の互換性を作り出し、非常に分裂しています。

したがって,Webというオープンで純粋にテキストベースの業界標準があることが重要である.

準備作業:Pandocのインストール

まず、テキスト変換の神器Pandocをインストールする必要があります。http://johnmacfarlane.net/pandoc/installing.html

具体的なインストール方法については、ここでは説明しないドキュメントを参照してください。

コードのコピー
$ cabal update
$ cabal install pandoc

内容を書く

内容はプレゼンテーションの主体です。PowerPointやOpenOffice Impressの「アウトライン」は、この本体を把握するためのビューです。これにより、著者はスライドの具体的な外観、レイアウトなどの表面化されたものを一時的に忘れ、スピーチ全体の論理的な流れと要綱の要領に集中することができる。

HTMLスライドを書くと、日常のメモのように簡単に書くことができます。実際、これらのスライド自体は軽量レベルのタグ言語で書かれた純粋なテキストであり、Pandocがサポートするタグ言語(Markdown、org-mode、reST、Textile......)を使ってその内容を書くことができます。ここではMarkdownを例に挙げます。
コードのコピー

% Nonsense Stuff

% John Doe

% March 22, 2005

# In the morning

## Getting up

- Turn off alarm

- Get out of bed

## Breakfast

- Eat eggs
- Drink coffee

# In the evening
## Dinner
- Eat spaghetti

- Drink wine
------------------
![picture of spaghetti](images/spaghetti.jpg)

## Going to sleep

- Get in bed

- Count sheep

格付けタイトル、リスト、挿入画像…などの標準的なMarkdown文法がサポートされており、通常のMarkdownノートでブログを書くのと変わらない。
Pandocがメタ情報を含まないMarkdownテキストを処理してスライドを生成するには、テキストの先頭に3行%で始まるメタ情報:タイトル、作成者、日付を含む必要があります。

プレゼンテーション用の適切なHTMLドキュメントを生成するには、デフォルトでは各2段階のタイトルが独立したスライドであることを覚えておいてください。このように書くときは、各2級タイトルの下の内容を適切な長さに抑えることに注意しなければならない。

リストの表示効果は人為的に設定することができ、例えばスライドショーの時に逐条漸入し、後述する。$を使用してTeX式を挿入することもできます。Pandocは、ほとんどの現代ブラウザでサポートされているMathMLに変換したり、MathJaxを使用して古いブラウザに表示したりすることができます。
Markdownなどのタグ言語ではサポートされていないテーブルを表示したり、フォントサイズを制御したり、より複雑なレイアウトをしたりするためのHTMLをテキストに直接埋め込むこともできます。もちろん、HTMLタグが多すぎると、Markdownなどの軽量レベルのタグ言語のせいではなく、スライドを作る方法に問題があるのかもしれません。プレゼンテーション自体が伝える内容なので、複雑なレイアウトには何の意味もありません。
スタイルの定義

現在Pandocには、5つのHTMLスライドフレームワークのサポートが含まれています。

    DZSlides

    Slidy
    S5

    Slideous

    reveal.js
カスタムHTMLテンプレート
要素が動いたり、良いHTMLスライドテンプレートがあったりすると、PandocにMarkdownを純粋なHTMLクリップに変換して、自分のテンプレートに埋め込むことができます。

コードのコピー

$ pandoc slides.md -o slides.html

ラベルと各種メタ情報):

コードのコピー
$ pandoc slides.md -o slides.html -s
DZSlides

もちろん、Pandocが複数のスライドテンプレートをサポートしているため、独自のHTMLテンプレートを書く必要はありません。DZSlidesはその中で最も簡単なもので、キーボード操作→/←ページをめくること、PgUp/PgDn、Home/Endをサポートしています。

Pandocが生成したDZSlidesスライドには、外部ファイルに依存することなく、必要なCSSとJavaScriptが含まれています。

デフォルトテンプレートを使用して、DZSlidesスライドを個別にレンダリングします。

コードのコピー
$ pandoc slides.md -o slides.html -t dzslides -s
テンプレートのスタイルを調整するには、--templateでカスタムテンプレートを指定します。デフォルトのテンプレートはdefaultです。dzslidesなので、上記のコマンドは次のようになります。

コードのコピー

$ pandoc slides.md -o slides.html -t dzslides --template default.dzslides

Slidy

HTML SlidyはW 3 Cが開発した極簡主義HTMLスライドテンプレートで、余分なスタイルはなく、マウスクリックでページをめくること、キーボード操作→/←、PgUp/PgDn、Home/Endをサポートしています。

既定のテンプレートを使用して、独立したSlidyスライドをレンダリングします。
コードのコピー

$ pandoc slides.md -o slides.html -t slidy -s

またはカスタムテンプレートを指定します。
コードのコピー

$ pandoc slides.md -o slides.html -t slidy --template default.slidy

S5
S 5(Simple Standards-Based Slide Show System)は、公有分野のHTMLスライド仕様である。マウスクリックでページをめくり、キーボード操作→/←、PgUp/PgDn、Home/Endをサポートします。

S 5をスライドフレームとして使用するためには、ここからS 5をダウンロードする必要がある。解凍後、S 5フォルダのui/defaultをスライドのあるパスにコピーし、s 5/defaultと名前を変更すればよい。

スライドのレンダリング:

コードのコピー

$ pandoc slides.md -o slides.html -t s5 -s
Slideous
Slideousはもう一つの古いHTMLスライドフレームワークです。マウスクリックでページをめくること、キーボード操作→/←、PgUp/PgDn、Home/Endをサポートします。

ダウンロードhttp://goessner.net/download/prj/slideous/slideous.jsおよびhttp://goessner.net/download/prj/slideous/slideous.cssこの2つのファイルは、ローカルディレクトリslideous/の下に置けばいいです。

スライドのレンダリング:
コードのコピー

$ pandoc slides.md -o slides.html -t slideous -s

reveal.js

reveal.jsというものはもう赤くならないほど赤くなって、最近火をつけ始めたWYSIWYGオンラインスライドツールslid.Esもそれに基づいている。

reveal.jsのデザインスタイル(フォント、HTML 5/CSS 3効果)は前のフレームワークよりも現代的なので、特別な理由(旧ブラウザ互換性)がなければreveal.jsはやはり一番お勧めの1つです。

といってもjs自体はMarkdown構文のサポートを提供していますが、Pandocのメリットは明らかです。それは、ユーザーがHTMLに触れる必要がないコマンドで問題を解決することです。

まずGitHubから取得する必要がありますhttps://github.com/hakimel/reveal.js、reveal.jsと同じ名前のフォルダをスライドのディレクトリの下に置けばいいです。

コードのコピー
$ git clone https://github.com/hakimel/reveal.js

スライドのレンダリング:

コードのコピー

$ pandoc slides.md -o slides.html -t revealjs -s

デフォルトの外観トピック以外はreveal.jsはまた、複数のトピックを選択できます。

コードのコピー
$ pandoc slides.md -o slides.html -t revealjs -s -V theme=beige

default:(デフォルト)濃いグレーの背景、白い文字

beige:ベージュ背景、濃い文字
sky:空色の背景、白い細い文字
night:黒い背景、白い太い文字

serif:薄い背景、灰色のセリフ文字

シンプル:白い背景、黒い文字

solarized:クリーム色の背景、濃い青色の文字 LaTeX Beamer

最後に、HTMLではありませんが、PandocはMarkdownファイルをLaTeX beamerスタイルのPDFスライドにレンダリングするためにも使用できます。プレゼンテーションではなく印刷が必要な場合に特に役立ちます。

コードのコピー

$ pandoc slides.md -o slides.pdf -t beamer

その他の設定 前文の例では コードのコピー # In the morning

## Getting up


ソース元URL:https://dopubox.com/article/p/c09cda415f5f7852

其他工具
  • 字元計數 TikTok 下載 抖音下載 BASE64 Base64 轉圖片 圖片轉 Base64 URL 編碼 JavaScript 時間戳 Unicode 轉換器 JSON 格式化 修改副檔名 製作列表 CSS 優化器 MD5 加密 隨機生成器 圖像壓縮 QR 碼生成器 QR 碼識別器 壁紙預覽 血型遺傳 服裝尺寸
  • 歯科医師の技術で愛好家も納得するサウナを細部まで再現するミニチュア作家
    2024-05-30

    『ボールアンドチェイン』南Q太著 評者:三木那由他【このマンガもすごい!】
    2024-05-30

    白と黒で奏でるインスタレーション 渡辺信子が京都で「White and Black」
    2024-05-31

    鎌倉幕府の地頭から海の武士団・松浦党に…古文書群「青方文書」からみる中世の漁業や製塩事情
    2024-06-01

    吉田南さん、バイオリン部門6位 エリザベート音楽コン、奈良出身
    2024-06-01

    エリザベートコンクールで吉田さん6位入賞
    2024-06-01

    森鷗外の教師像に迫る 研究の「盲点」、記念館で特別展 学生の評判も紹介
    2024-06-01

    「警察密着24時」担当者ら懲戒 テレビ東京、石川社長は3割返上
    2024-06-03

    映画「ゴジラ‐1.0」の震電は「コックピットだけ復元」のはずだった…山崎貴監督がエピソード披露
    2024-06-04

    現代美術作家の杉本博司がYouTubeチャンネル開設 素顔に迫る映像を公開
    2024-06-04

    千年後の未来へ 太宰府天満宮のふすま絵完成 日本画家神戸智行さん移住し10年かけ完成
    2024-06-04

    「君たちはどう生きるか」展 第二部 レイアウト編(三鷹の森ジブリ美術館)レポート。絵を描くことの営為、そして苦悩も見せる
    2024-06-04

    「TRIO パリ・東京・大阪 モダンアート・コレクション」(東京国立近代美術館)開幕レポート。トリオで再発見する3館のコレクション
    2024-06-05

    「梅津庸一 エキシビションメーカー」(ワタリウム美術館)開幕レポート。きっとあなたも展覧会をつくりたくなる
    2024-06-04

    「台北當代2024」開幕レポート。「台湾マーケットのニーズに応えるプラットフォームに」
    2024-06-04

    田名網敬一の巨大インスタレーションが、世界初大規模回顧展「田名網敬一 記憶の冒険」に登場。国立新美術館で8月7日から
    2024-06-06

    「Osaka Art & Design 2024」(大阪市内)開幕レポート。何気ない日常のなかで多様なカルチャーに触れる
    2024-06-06

    佐渡金山「情報照会」と勧告 世界遺産登録に可能性残す
    2024-06-06

    美術家藤井光さん個展「終戦の日/WAR IS OVER」 希望か絶望か…大分・佐伯の地下弾薬庫跡にこだまする泣き声
    2024-06-07

    もしあの時に戻れたら…歌人・穂村弘が話題書『迷子手帳』で明かす、今も忘れられない「失敗」
    2024-06-07

    ©  Dopu Box
    💛