{"id":13609030,"url":"https://github.com/tasmo/reveal-jekyll","last_synced_at":"2025-04-12T17:33:38.449Z","repository":{"id":17015426,"uuid":"19779354","full_name":"tasmo/reveal-jekyll","owner":"tasmo","description":"Online presentation for GitHub Pages and Jekyll in Markdown using reveal.js with a Solarized Color Theme","archived":false,"fork":false,"pushed_at":"2023-02-28T20:27:48.000Z","size":1996,"stargazers_count":75,"open_issues_count":0,"forks_count":50,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-07T14:42:41.026Z","etag":null,"topics":["dark-theme","github-page","jekyll","light-theme","markdown","presentation","reveal-js","solarized-colors"],"latest_commit_sha":null,"homepage":"http://gh.tasmo.de/reveal-jekyll/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tasmo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-05-14T12:54:59.000Z","updated_at":"2024-08-14T21:06:11.000Z","dependencies_parsed_at":"2024-08-01T19:42:48.876Z","dependency_job_id":"be8bc1a1-3fae-4834-8830-872877884c52","html_url":"https://github.com/tasmo/reveal-jekyll","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tasmo%2Freveal-jekyll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tasmo%2Freveal-jekyll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tasmo%2Freveal-jekyll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tasmo%2Freveal-jekyll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tasmo","download_url":"https://codeload.github.com/tasmo/reveal-jekyll/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248605498,"owners_count":21132181,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dark-theme","github-page","jekyll","light-theme","markdown","presentation","reveal-js","solarized-colors"],"created_at":"2024-08-01T19:01:31.891Z","updated_at":"2025-04-12T17:33:33.440Z","avatar_url":"https://github.com/tasmo.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# reveal-jekyll\n\nTransforms Markdown files into presentation slides using [reveal.js](#revealjs) and [Jekyll](#jekyll). The theme is based on [Solarized Colors](https://github.com/altercation/solarized) (by Ethan Schoonover) containing a light and a dark theme.  \n**reveal-jekyll** is ready for [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/) as well as [GitHub Pages](https://pages.github.com/).\n\n[![Build Status](https://travis-ci.org/tasmo/reveal-jekyll.svg?branch=master)](https://travis-ci.org/tasmo/reveal-jekyll)\n\nTry the **[DEMO presentation](https://tasmo.gitlab.io/reveal-jekyll)** (how to use Jekyll written in German).\n\n- [Get `reveal-jekyll` running](#get-reveal-jekyll-running)\n  - [Hosted on GitLab Pages](#hosted-on-gitlab-pages)\n  - [Hosted on GitHub Pages](#hosted-on-github-pages)\n  - [Local Jekyll](#local-jekyll)\n  - [Write Your Slides](#write-your-slides)\n  - [Personalize](#personalize)\n  - [Start Your Slide Show](#start-your-slide-show)\n- [reveal.js](#revealjs)\n- [Jekyll](#jekyll)\n- [Differences and Limitations](#differences-and-limitations)\n  - [Slide Attributes](#slide-attributes)\n  - [Fragments](#fragments)\n  - [Vertical Slides](#vertical-slides)\n  - [Configuration](#configuration)\n  - [Code Syntax Highlighting](#code-syntax-highlighting)\n  - [Slide Numbers](#slide-numbers)\n  - [Speaker Notes](#speaker-notes)\n- [Runtime Dependencies for Development](#runtime-dependencies-for-development)\n- [Licenses](#licenses)\n\n## Get `reveal-jekyll` running\n\n### Hosted on GitLab Pages\n\nTo see how it works follow the [Tutorial: Create a GitLab Pages website from scratch](https://docs.gitlab.com/ee/user/project/pages/getting_started/pages_from_scratch.html).\n\n#### As a User or Organization Site on GitLab\n\nTo set up a user or organization site `https://${yourname}.gitlab.io/`, fork [reveal-jekyll](https://gitlab.com/tasmo/reveal-jekyll) and name your fork with your user or organization name like `https://gitlab.com/${yourname}/${yourname}.github.io`. Your site will build off the `main` branch.\n\n#### As a Project Site on GitLab\n\nTo set up a project site `https://${yourname}.gitlab.io/${projectname}`:\n\n- Fork as above, but name your fork with whatever `${projectname}` you want.\n- In [\\_config.yml](./_config.yml) change `baseurl: \"\"` to `baseurl: /${projectname}`. This is [needed](https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/) to construct asset include and internal link URLs correctly when you are serving your site from a non-root path.\n\n#### For an Existing Repository on GitLab\n\n- Clone your repository.\n- Go into it.\n- Add [reveal-jekyll](https://github.com/tasmo/reveal-jekyll) as an upstream remote.\n- Create an empty branch named like `pages`.\n- Delete all cached files of your new `pages` branch from git.\n- Clean the directory from uncached files.\n- Merge [`reveal-jekyll/main`](https://gitlab.com/tasmo/reveal-jekyll/-/tree/main) with your `${repository}/pages` branch.\n\n```shell\ngit clone git@gitlab.com/${yourname}/${repository}.git\ncd ${repository}\ngit remote add upstream https://gitlab.com/tasmo/reveal-jekyll.git\ngit checkout --orphan pages\ngit rm --cached -r .\ngit clean -fdx\ngit merge upstream/main\n```\n\n---\n\n### Hosted on GitHub Pages\n\nFollow the instructions on [get started with GitHub Pages](https://pages.github.com/).\n\n#### As a User or Organization Site on GitHub\n\nTo set up a user or organization site `https://${yourname}.github.io/`, fork [reveal-jekyll](https://github.com/tasmo/reveal-jekyll) and name your fork with your user or organization name like `${yourname}.github.io`. Your site will build off the main branch.\n\n#### As a Project Site on GitHub\n\nTo set up a [project site](https://help.github.com/articles/user-organization-and-project-pages/#project-pages) `https://${yourname}.github.io/${projectname}`:\n\n- Fork as above, but name your fork with whatever `${projectname}` you want.\n- Your site will build from the `gh-pages` branch, so you should [set that as the default branch](https://help.github.com/articles/setting-the-default-branch/).\n- In [\\_config.yml](./_config.yml) in your `gh-pages` branch change `baseurl: \"\"` to `baseurl: /${projectname}`. This is [needed](https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/) to construct asset include and internal link URLs correctly when you are serving your site from a non-root path.\n\n#### For an Existing Repository on Github\n\n- Clone your repository.\n- Go into it.\n- Add [reveal-jekyll](https://github.com/tasmo/reveal-jekyll) as an upstream remote.\n- Create an empty branch named `gh-pages`.\n- Delete all cached files of your new `gh-pages` branch from git.\n- Clean the directory from uncached files.\n- Merge [reveal-jekyll](https://github.com/tasmo/reveal-jekyll)/master with your `${repository}/gh-pages`.\n\n```shell\ngit clone git@github.com/${yourname}/${repository}.git\ncd ${repository}\ngit remote add upstream https://github.com/tasmo/reveal-jekyll.git\ngit checkout --orphan gh-pages\ngit rm --cached -r .\ngit clean -fdx\ngit merge upstream/main\n```\n\n---\n\n### Local Jekyll\n\nInstall [RubyGems](https://rubygems.org/pages/download) for your system.\n\nClone [reveal-jekyll](https://github.com/tasmo/reveal-jekyll) with submodule reveal.js (recommended):\n\n```shell\ngit clone --recursive --depth 1 https://github.com/tasmo/reveal-jekyll.git\n```\n\n…or just download the [zip file](https://gitlab.com/tasmo/reveal-jekyll/-/archive/main/reveal-jekyll-main.zip).\n\nMake sure you have a `Gemfile` in the root of your project containing at least:\n\n```ruby\nsource \"https://rubygems.org\"\n\ngem 'github-pages'\n```\n\nInstall [Bundler](https://bundler.io/) and the dependencies:\n\n```shell\ngem install bundler \\\nbundle install\n```\n\n---\n\n### Write Your Slides\n\nPut your Markdown slides in the `_posts` folder [like in any Jekyll](https://jekyllrb.com/docs/posts/) instance.  \nName the files in numbered order or dated following a pattern like `YEAR-MONTH-DAY-TITLE.md`:\n\n```text\n2014-1-1-start.md\n2014-1-1-intro.md\n…\n2014-3-2-third-topic-second-slide.md\n…\n2014-9-8-end.md\n2014-9-9-very-last-slide.md\n```\n\nWrite the slide's header in [Front-matter](https://jekyllrb.com/docs/frontmatter/) and put the Markdown formatted content below. In the header you need at least the `layout: slide` attribute:\n\n```markdown\n---\nlayout: slide\ntitle:\n---\n\nMARKDOWN_FOMATTED_SLIDE_CONTENT\n```\n\n### Personalize\n\nIn the `_config.yml` give your slide show an name, author's name and a description:\n\n```yml\ntitle:       reveal-jekyll\nauthor:      Thomas Friese\ndescription: Reveal.js for Jekyll with Solarized Color theme\n```\n\n### Start Your Slide Show\n\nOn GitLab/GitHub Pages you are done. Just open your pages URL in your browser.\n\nAn your local machine run:\n\n```shell\nbundle exec jekyll serve\n```\n\n…and go to `https://127.0.0.1:4000/`.\n\n---\n\n## [reveal.js](https://lab.hakim.se/reveal-js/)\n\nA framework for easily creating beautiful presentations using HTML.\n\n[reveal.js](https://github.com/hakimel/reveal.js) comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.\n\n### Links for reveal.js\n\n- [Installation](#installation): Step-by-step instructions for getting reveal.js running on your computer.\n- [Changelog](https://github.com/hakimel/reveal.js/releases): Up-to-date version history.\n- [Examples](https://github.com/hakimel/reveal.js/wiki/Example-Presentations): Presentations created with reveal.js, add your own!\n- [Browser Support](https://github.com/hakimel/reveal.js/wiki/Browser-Support): Explanation of browser support and fallbacks.\n- [Instructions](https://github.com/hakimel/reveal.js#instructions) How to use reveal.js.\n- [MIT License](https://github.com/hakimel/reveal.js/blob/master/LICENSE)\n\n## [Jekyll](https://jekyllrb.com/)\n\n[Jekyll](https://github.com/jekyll/jekyll) is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind [GitHub Pages](https://pages.github.com), which you can use to host sites right from your GitHub repositories.\n\n### Links for Jekyll\n\n- [Getting Started](https://github.com/jekyll/jekyll#getting-started) If you don't know Jekyll yet.\n- [Runtime Dependencies](https://github.com/jekyll/jekyll#runtime-dependencies)\n- [MIT License](https://github.com/jekyll/jekyll/blob/master/LICENSE)\n- [Contributors](https://github.com/jekyll/jekyll/graphs/contributors)\n\n## Differences and Limitations\n\n### Slide Attributes\n\nAttributes to the slide `\u003csection\u003e` elements are written in the [Front-matter](https://jekyllrb.com/docs/frontmatter/):\n\n```markdown\n---\nlayout: slide\ntitle: Background Transitions\ndata:\n  transition: linear\n  background: 'red'\n  background-transition: slide\n---\n```\n\n### Fragments\n\nMarkdown fragments must be covered in a HTML block element using the attribute `markdown=\"1\"`:\n\n```html\n\u003cdiv markdown=\"1\" class=\"fragment\"\u003e\n# Markdown Heading\n \nFragment 1 text\n\u003c/div\u003e\n\u003cdiv markdown=\"1\" class=\"fragment\"\u003e\nFragment 2 text\n\u003c/div\u003e\n```\n\nFragments can be nested.\n\n### Vertical Slides\n\nFor vertical scrolling you need to leave the `title:` blank. All content on vertical slides must be wrapped in HTML `\u003csection\u003e` blocks:\n\n```html\n---\nlayout: slide\ntitle:\n---\n\n\u003csection markdown=\"1\"\u003e\n# Top Slide\n\u003c/section\u003e\n\u003csection markdown=\"1\"\u003e\n# Bottom Slide\n\u003c/section\u003e\n```\n\n### Configuration\n\nAll options for the reveal.js presentation are available in the `_config.yml` as sub keys of `reveal:`.\n\nThe configuration will be built in the `\u003cscript /\u003e` block at the bottom of the `index.html` presentation file.\n\n### Code Syntax Highlighting\n\nTo insert a highlighted code block the code can be surrounded with the [Liquid](https://shopify.github.io/liquid/) tag `highlight`:\n\n```liquid\n{% highlight coffee %}\n# Objects:\nmath =\n  root:   Math.sqrt\n  square: square\n  cube:   (x) -\u003e x * square x\n{% endhighlight %}\n```\n\nInsted of Rouge for highlighting the code, reveal-jekyll uses the [Reveal.js's preferred method](https://revealjs.com/code/) via [highlight.js](https://highlightjs.org/). To use all options it is possible to surround the code with HTML nodes `pre` and `code` using the class `language-*` adding optional `data` tags:\n\n```html\n\u003cpre\u003e\u003ccode class=\"language-coffee\" data-trim data-noescape data-line-numbers=\"1|3-5\"\u003e\n# Objects:\nmath =\n  root:   Math.sqrt\n  square: square\n  cube:   (x) -\u003e x * square x\n\u003c/code\u003e\u003c/pre\u003e\n```\n\n### Slide Numbers\n\nYou can show slide numbers by selecting a format in the `_config.yml` file:\n\n```coffee\nslideNumber:\n  # Slide number formatting can be configured using these variables:\n  #  \"h.v\":  horizontal . vertical slide number (default)\n  #  \"h/v\":  horizontal / vertical slide number\n  #    \"c\":  flattened slide number\n  #  \"c/t\":  flattened slide number / total slides\n  # \"none\":  don't show slide numbers\n  format:    \"c/t\"\n```\n\n### Speaker Notes\n\nreveal.js comes with a speaker notes plug-in which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Press the 's' key on your keyboard to open the notes window.\n\nNotes are defined by appending an `\u003caside\u003e` element to a slide as seen below. You can add the `markdown=\"1\"` attribute to the aside element if you prefer writing notes using Markdown:\n\n```html\n---\nlayout: slide\n---\n\nSlide text...\n\n\u003caside class=\"notes\" markdown=\"1\"\u003e\nOh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).\n\u003c/aside\u003e\n```\n\nWhen used locally, this feature requires that reveal.js [runs from a local web server](https://github.com/hakimel/reveal.js#full-setup).\n\n---\n\n## Runtime Dependencies for Development\n\n### Running Jekyll on Your Server\n\n- Commander: Command-line interface constructor (Ruby)\n- Colorator: Colorizes command line output (Ruby)\n- Classifier: Generating related posts (Ruby)\n- Directory Watcher: Auto-regeneration of sites (Ruby)\n- Kramdown: Default Markdown engine (Ruby)\n- Liquid: Templating system (Ruby)\n- Pygments.rb: Syntax highlighting (Ruby/Python)\n- Safe YAML: YAML Parser built for security (Ruby)\n- Sass: CSS extension language (Ruby)\n- CoffeeScript: compiling to JavaScript (Ruby)\n\n### Running reveal.js\n\nReveal.js doesn't _rely_ on any third party scripts to work but a few optional libraries are included by default. These libraries are loaded as dependencies in the order they appear, for example:\n\n```javascript\nReveal.initialize({\n  dependencies: [\n    // Cross-browser shim that fully implements classList - //github.com/eligrey/classList.js/\n    { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },\n\n    // Zoom in and out with Alt+click\n    { src: 'plugin/zoom-js/zoom.js', async: true },\n\n    // Speaker notes\n    { src: 'plugin/notes/notes.js', async: true },\n\n    // Remote control your reveal.js presentation using a touch device\n    { src: 'plugin/remotes/remotes.js', async: true },\n\n    // MathJax\n    { src: 'plugin/math/math.js', async: true }\n  ]\n});\n```\n\nYou can add your own extensions using the same syntax. The following properties are available for each dependency object:\n- **src**: Path to the script to load\n- **async**: [optional] Flags if the script should load after reveal.js has started, defaults to false\n- **callback**: [optional] Function to execute when the script has loaded\n- **condition**: [optional] Function which must return true for the script to be loaded\n\n---\n\n## Licenses\n\n[Jekyll](https://github.com/jekyll/jekyll): [MIT licensed](https://github.com/jekyll/jekyll/blob/master/LICENSE)\n\n[reveal.js](https://github.com/hakimel/reveal.js): [MIT licensed](https://github.com/hakimel/reveal.js/blob/master/LICENSE)  \nCopyright (C) 2020 Hakim El Hattab, \u003chttps://hakim.se\u003e\n\n[reveal-jekyll](https://github.com/tasmo/reveal-jekyll) contains the third party fonts:\n\n- [Open Sans](https://www.google.com/fonts/specimen/Open+Sans) ([Apache License, version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html))\n- [Droid Serif](https://www.google.com/fonts/specimen/Droid+Serif) ([Apache License, version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html))\n- [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([License: SIL OFL 1.1](https://fontawesome.io/license/))\nand the color scheme [Solarized Colors](https://github.com/altercation/solarized) ([MIT License](https://github.com/altercation/solarized/blob/master/LICENSE))\n\n[reveal-jekyll](https://gitlab.com/tasmo/reveal-jekyll/): [MIT licensed](https://gitlab.com/tasmo/reveal-jekyll/-/blob/main/LICENSE)  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasmo%2Freveal-jekyll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftasmo%2Freveal-jekyll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftasmo%2Freveal-jekyll/lists"}