• Web-based content is flexible and easy to share
• Better integration with AI tools like Claude and ChatGPT
• Provides professional look for academic presentations
• Easy to version control with Git
• Supports multimedia content better than traditional tools

Reveal.js logo

• Include RevealMath.KaTeX plugin
• Write inline math with $\LaTeX$ syntax
• Create complex equations
• Renders faster than MathJax

Example equation:

$$E = mc^2$$

$$\frac{d}{dx}\left( \int_{a}^{x} f(u)\,du\right)=f(x)$$

Einstein's theory of relativity and the Fundamental Theorem of Calculus

Write slides in Markdown for faster content creation

<section data-markdown>
  <textarea data-template>
    # Slide Title
    
    * Bullet point 1
    * Bullet point 2
    
    ---
    
    ## Next Slide
    
    ```javascript
    let code = "highlighted";
    ```
  </textarea>
</section>

• Syntax highlighting for all programming languages
• Line highlighting for focusing attention
• Copy-paste functionality
• Perfect for teaching and tutorials

// Initialize Reveal.js with options
Reveal.initialize({
  hash: true,
  slideNumber: true,
  progress: true,
  // Transition style
  transition: 'slide',
  // More configuration options...
  plugins: [ RevealMarkdown, RevealHighlight ]
});

Example of code highlighting with line numbers

• Embed any webpage with iframes
• Perfect for demos and interactive content
• Keeps your presentation self-contained
• Great for showing tools, applications, or supplementary material

<iframe 
  src="https://example.com" 
  width="600" 
  height="400">
</iframe>

• Native HTML5 video support
• Easily embed video in your presentations
• Controls for playback
• Video can be paused during presentations
• Perfect for demos and tutorials

<video 
  data-autoplay 
  src="path/to/video.mp4" 
  controls
></video>

Example of embedded video in Reveal.js

• Create dynamic charts in your presentations
• Based on Chart.js library
• Support for line, bar, pie charts and more
• Interactive with hover effects
• Customize colors, labels, and animations

Example of Chart.js integration

• Create diagrams and flowcharts using text definitions
• Supports multiple diagram types: flowcharts, sequence, class, etc.
• Renders beautiful SVG diagrams dynamically
• Simple text-based syntax similar to Markdown
• Perfect for visualizing processes and relationships

flowchart LR
  %% Define a reusable class for consistent styling
  classDef common fill:#e0e0ff,stroke:#4b0082,stroke-width:1px,color:#000080;

  subgraph "Your Computer"
    direction TB
    client["Host with MCP Client
(Claude, IDEs, Tools)"]:::common

    subgraph "MCP Servers"
      direction LR
      A["MCP Server A"]:::common --> DataA[(Local Data Source A)]:::common
      B["MCP Server B"]:::common --> DataB[(Local Data Source B)]:::common
      C["MCP Server C"]:::common --> Web[(Web APIs)]:::common
    end
  end

  subgraph Internet
    Remote[(Remote Service C)]:::common
  end

  client -->|MCP Protocol| A
  client -->|MCP Protocol| B
  client -->|MCP Protocol| C

  DataA --> A
  DataB --> B
  Web   --> Remote
									

MCP architecture overview

• Create a NodeJS Workspace in Coder
• Clone the template repository
• Install dependencies with npm install
• Start the dev server with npm start
• Edit files in your preferred code editor
• Changes appear instantly in browser

# Clone the repository
git clone https://github.com/phasheen/revealjs-snuphel

# Navigate to the directory
cd revealjs-snuphel

# Install dependencies
npm install

# Start the development server
npm start

• Each slide is a <section> element
• Vertical slides use nested sections
• Use HTML or Markdown for content
• Add notes with <aside class="notes">

<section>
  <h2>Slide Title</h2>
  <ul>
    <li>Bullet point 1</li>
    <li>Bullet point 2</li>
  </ul>
  <aside class="notes">
    Speaker notes here
  </aside>
</section>

• Edit custom/custom-scripts.js to update presenter info
• Change theme color in custom/custom-styles.css
• Add your own custom components
• Modify slide transitions and animations

// In custom-scripts.js
const presenterName = "Your Name";
const presenterDepartment = "Your Department";
const presenterUniversity = "Your University";
const presenterEmail = "[email protected]";
const sessionName = "Your Presentation Title";

/* In custom-styles.css */
:root {
  --theme-color: #2a76dd; /* Change this color */
  --theme-color-transparent-10: rgba(42, 118, 221, 0.1);
}

PDF Export URL:

http://localhost:8000/?print-pdf

Share Link:

https://localhost:8000/#/2/3

Why GitHub Pages?

• Free hosting for your presentations
• Integrated with Git workflows
• Automatic builds with GitHub Actions
• Custom domains with SSL certificates
• Easy collaboration with teammates

GitHub Pages deployment overview

• Included in the template as .github/workflows/github-pages.yml
• Automatically deploys on push to main branch
• No configuration needed
• Fast deployment (usually less than a minute)

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      - name: Setup Pages
        uses: actions/configure-pages@v4
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
      
      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4

Template Development

• Created modern, clean design
• Implemented responsive layouts
• Added custom components:
  • Image comparison slider
  • Data tables with styling
  • Image galleries
  • Citation formats
• Organized code for maintainability
• Documented features and usage

Open Source & Community

• Template is freely available for academic use
• Contributions welcome via GitHub
• Based on the open-source Reveal.js project
• Developed specifically for SNUPHEL members
• Continuously improving based on feedback