DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Creating Scrolling Text With HTML, CSS, and JavaScript
  • Mastering SSR and CSR in Next.js: Building High-Performance Data Visualizations
  • How to Create a Pokémon Breeding Gaming Calculator Using HTML, CSS, and JavaScript
  • How to Convert HTML to DOCX in Java

Trending

  • Customer 360: Fraud Detection in Fintech With PySpark and ML
  • Beyond Linguistics: Real-Time Domain Event Mapping with WebSocket and Spring Boot
  • How AI Agents Are Transforming Enterprise Automation Architecture
  • How to Format Articles for DZone
  1. DZone
  2. Coding
  3. Languages
  4. Loading External HTML Into Reveal.js Presentations

Loading External HTML Into Reveal.js Presentations

I recently created External, which is just the loader from Markdown, stripped of all its post processing. Check it out.

By 
Cal Evans user avatar
Cal Evans
·
Dec. 17, 15 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
6.5K Views

Join the DZone community and get the full member experience.

Join For Free

One of the things I do at Zend is help rehab existing classes. Soon after I was hired, I got my team together and we decided that going forward, all classes would be in Reveal.js. Personally, I like Keynote, but other trainers had PowerPoint. We ended up porting classes to each of the major formats. That means that if you change one, you have to change them all, and we didn’t.

Because Reveal.js is HTML, you can present using just a browser. Our recommendation is to use PHP’s built-in web server so that you get access to features like speaker notes. All-in-all though, Reveal.js looks like it is going to be a solid solution for us.

One Problem

The one problem we have run into is that our slide decks are large. A single class could be 300-500+ slides. Yes, we could break them up into multiple presentations, but we would rather have them as a single presentation.

We are not the first people to want this. In reading the issues on the Reveal.js repo, I ran into this request “Support for external HTML” from 2013 by my friend Larry Garfield. Since this was important to Zend and our presentations, I decided to take a crack at it.

If you read the thread that Larry started, you will see that it was suggested that he use the Markdown plugin for Reveal.js. It would load external files. I played with this plugin for a while. Yes, it would load external files of any kind, it does a lot of post processing to the content because it assumes it is Markdown. This post processing is complex enough so that after about 3 slides,  it starts to affect the outcome. In our case, the title slide lost its image as soon as we added a 4th slide to the external file.

One Solution

So, I did what any decent programmer would do, I stole code from the Markdown plugin and created External. External is just the loader from Markdown, stripped of all its post processing. It is a very simple solution, but this problem did not require a more complex one. I do note in the header comments of External.js that it was blatantly ripped off from Markdown.

The README in the External repo gives instructions on how to install it and how to implement it.

For those who have heard me talk about PHP, this is “Scratch your own itch” development. I needed it, I wrote it, I am sharing it with you.

And yes, I realize I could have solved this with a simple <?php include...?>, but then it would only work if you were actually using the PHP server. I wanted something that would work no matter what your setup.

HTML

Published at DZone with permission of Cal Evans, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Creating Scrolling Text With HTML, CSS, and JavaScript
  • Mastering SSR and CSR in Next.js: Building High-Performance Data Visualizations
  • How to Create a Pokémon Breeding Gaming Calculator Using HTML, CSS, and JavaScript
  • How to Convert HTML to DOCX in Java

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: