diff --git a/.hugo_build.lock b/.hugo_build.lock new file mode 100644 index 0000000..e69de29 diff --git a/content/_index.md b/content/_index.md index fba3be6..c6a7045 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,22 +1,56 @@ +++ -title = "reveal-hugo" -description = "A Hugo theme for creating Reveal.js presentations" +title = "fablab Coh@bit" +description = "Le fablab Coh@bit est ouvert à TOUT LE MONDE pour venir expéirmenter, documenter, partager des fabrications plus ou moins créatives. Basé à Gradignan (33)." outputs = ["Reveal"] [reveal_hugo] -custom_theme = "reveal-hugo/themes/robot-lung.css" +custom_theme = "reveal-hugo/themes/sunblind.css" margin = 0.2 highlight_theme = "color-brewer" transition = "slide" -transition_speed = "fast" -[reveal_hugo.templates.hotpink] -class = "hotpink" -background = "#FF4081" +transition_speed = "slow" +++ + + +## LE FABLAB COHABIT EST OUVERT A TOUT LE MONDE : # 📽️ +### EXPERIMENTER, +### FABRIQUER, +### DOCUMENTER, +### PARTAGER. -# reveal-hugo -A Hugo theme for creating Reveal.js presentations. -~ made by [@dzello](https://dzello.com/) ~ \ No newline at end of file +--- + +{{< slide class="hello" background-color="#EA5C2B">}} + +# EQUIPEMENT +& +# OUTILLAGE + +--- + +{{< slide class="" background-color="#FF7F3F">}} + +# ESPACE, +# PERSONNES, +# FONCTIONNEMENT + +--- + +{{< slide class="" background-color="#F6D860">}} + +# LES PROJETS EN COURS + +--- + +{{< slide class="" background-color="#95CD41">}} + +# VISITER LE FABLAB + +--- + +{{< slide class="" background-color="">}} + +# S'INSCRIRE AU FABLAB diff --git a/content/bundle-example/continued.md b/content/bundle-example/continued.md deleted file mode 100644 index b2a4381..0000000 --- a/content/bundle-example/continued.md +++ /dev/null @@ -1,16 +0,0 @@ -+++ -+++ - -If more markdown files are present in the bundle, their contents will be added to the presentation. - ---- - -Specify `weight` in the frontmatter if it's necessary to order them. - ---- - -If you don't want them to be included, specify `layout = "list"` in the front matter instead of `layout = "bundle"`. - ---- - -## THE END \ No newline at end of file diff --git a/content/bundle-example/index.md b/content/bundle-example/index.md deleted file mode 100644 index 087bffe..0000000 --- a/content/bundle-example/index.md +++ /dev/null @@ -1,30 +0,0 @@ -+++ -title = "Bundle example presentation" -outputs = ["Reveal"] -layout = "bundle" -[reveal_hugo] -theme = "night" -margin = 0.2 -+++ - -# Page Bundles - ---- - -[Hugo page bundles](https://gohugo.io/content-management/page-bundles/) are a useful way to organize content. - ---- - -To create a reveal-hugo presentation from the `index.md` file of a leaf page bundle, you need to specify the layout manually. - -```toml -layout = "bundle" -``` - ---- - -Why? By default, reveal-hugo doesn't create pages for single template types (foo.md), only for list template types (_index.md). - ---- - -This technique can also be used to output an HTML file for any section of a presentation, should you need to. diff --git a/content/custom-theme-example/_index.md b/content/custom-theme-example/_index.md deleted file mode 100644 index dd09946..0000000 --- a/content/custom-theme-example/_index.md +++ /dev/null @@ -1,74 +0,0 @@ -+++ -title = "Custom theme example presentation" -outputs = ["Reveal"] -[reveal_hugo] -custom_theme = "custom-theme.scss" -custom_theme_compile = true -+++ - -## 🖌 ️ - -## Custom Themes - -*with Hugo Pipes* - ---- - -This presentation uses a custom Reveal.js theme written in SCSS that is compiled by Hugo, using [Hugo pipes](https://gohugo.io/hugo-pipes/). - ---- - -Hugo pipes compiles the source code of the theme, located in `assets/custom-theme.scss`, into CSS. - ---- - -## 😄 - -No separate build process is required, which means you can iterate on your theme and your content at the same time. - ---- - -To set a custom theme and use Hugo to compile it: - -```toml -[reveal_hugo] -custom_theme = "custom-theme.scss" -custom_theme_compile = true -``` - -`custom-theme.scss` must live in the `assets` folder. - ---- - -To pass compilation options, use the `custom_theme_options` param: - -```toml -[reveal_hugo.custom_theme_options] -targetPath = "css/custom-theme.css" -enableSourceMap = true -``` - -See all the [available options](https://gohugo.io/hugo-pipes/scss-sass/#options). - ---- - -Note: to use a custom theme that doesn't need compilation, put it in the `static` directory and do not set the `custom_theme_compile` parameter. It will be served to the browser directly. - ---- - -Write a custom Reveal.js theme in four steps: - -```text -1. Import `mixins` and `settings` from the templates directory -2. Override variables and functions for colors, fonts and sizes -3. Import `theme` from the templates directory -4. Add any additional selectors to override the built CSS -``` - ---- - -See the [Reveal.js theme docs](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md) to learn what overrides are possible. - ---- - -See `assets/custom-theme.scss` or any file in `assets/reveal-js/css/theme/source` for an example. diff --git a/content/extending-layout-example/_index.md b/content/extending-layout-example/_index.md deleted file mode 100644 index 108d840..0000000 --- a/content/extending-layout-example/_index.md +++ /dev/null @@ -1,53 +0,0 @@ -+++ -title = "Extend layout with configuration" -outputs = ["Reveal"] -[reveal_hugo] -theme = "night" -margin = 0.2 -custom_css = "css/custom.css" -custom_js = "js/custom.js" -+++ - -### Extending an existing layout - -If you are using an existing theme and you want to a specific CSS class or add a dynamic function using javascript. It is possible to extend existing layout. - ---- - -### Extending CSS - -You can use `partials` or you can specify `custom_css` in your configuration : - -```toml -[reveal_hugo] -custom_css = "css/custom.css" -``` - -The `custom.css` can be present in `static/css/custom.css` - - ---- - -### Extending with javascript - -Same as CSS you can extend your presentation with javascript using `partials` or with `custom_js` in your configuration: - -```toml -[reveal_hugo] -custom_js = "js/custom.js" -``` - - -The `custom.js` can be present in `static/js/custom.js` - - ---- - -{{< slide class="custom" id="customjs" >}} -## Extend layout example -Here the slide has an additional css class `custom` using `slide` *shortcode*. This class is hosted in a custom CSS. - -If you click on this text background-color will using a custom javascript file. - - - diff --git a/content/highlightjs-linenumbers-example/_index.md b/content/highlightjs-linenumbers-example/_index.md deleted file mode 100644 index a285336..0000000 --- a/content/highlightjs-linenumbers-example/_index.md +++ /dev/null @@ -1,160 +0,0 @@ -+++ -title = "Reveal.js 3.9.0 highlighting example" -outputs = ["Reveal"] - -[reveal_hugo] -theme = "white" -highlight_theme = "vs" -+++ - -## Multiline highlighting with Highlight.js - ---- - -This presentation shows the use of the [new highlighting features](https://github.com/hakimel/reveal.js/blob/master/README.md#step-by-step-highlights) which were introduced with Reveal.js [v3.9.0](https://github.com/hakimel/reveal.js/releases/tag/3.9.0). - ---- - -## Prerequisite - -Disable `codeFences` in to your `config.toml` to prevent Hugo's built-in highlighting for code inside of `---` fences. - -{{< highlight toml "style=github" >}} -[markup.highlight] -codeFences = false -{{< /highlight >}} - ---- - -## Theme - -Specify a theme for Highlight.js in `config.toml` - -{{< highlight toml "style=github" >}} -[params.reveal_hugo] -highlight_theme = "github" -{{< /highlight >}} - ---- - -...or in the `_index.md` front matter - -{{< highlight toml "style=github" >}} -[reveal_hugo] -highlight_theme = "github" -{{< /highlight >}} - ---- - -## Usage - -The line highlighting is configured by adding `{}` immediately after the language selection of the markdown code block. - -{{< highlight md >}} -```foo{} - -``` -{{< /highlight >}} - ---- - -## Just line numbers - -`{}` - -{{< highlight md >}} -```go{} -package main -import "fmt" -func main() { - fmt.Println("Hello world!") -} -``` -{{< /highlight >}} - -```go{} -package main -import "fmt" -func main() { - fmt.Println("Hello world!") -} -``` - ---- - -## Highlight specific lines - -`{}` - -{{< highlight md >}} -```go{1,3-5} -package main -import "fmt" -func main() { - fmt.Println("Hello world!") -} -``` -{{< /highlight >}} -```go{1,3-5} -package main -import "fmt" -func main() { - fmt.Println("Hello world!") -} -``` - ---- - -## Multi step highlight - -`{}` - -{{< highlight md >}} -```go{1|2|3-5} -package main -import "fmt" -func main() { - fmt.Println("Hello world!") -} -``` -{{< /highlight >}} - -```go{1|2|3-5} -package main -import "fmt" -func main() { - fmt.Println("Hello world!") -} -``` ---- - -## Hiding the line numbers - -There is no Reveal.js parameter to use line highlighting *without* line numbers. -However it can be achieved by adding the some [custom CSS](https://github.com/dzello/reveal-hugo#adding-html-to-the-layout). - -{{< highlight html "style=github" >}} - -{{< /highlight >}} - ---- - -💡 Put the custom CSS in either of these partials: - -```text -# for all presentations -layouts/partials/reveal-hugo/body.html -``` - -```text -# for one presentation -layouts/partials/{presentation-name}/reveal-hugo/body.html -``` - ---- - -Thanks! \ No newline at end of file diff --git a/content/home/configuration.md b/content/home/configuration.md deleted file mode 100644 index 1d13e9b..0000000 --- a/content/home/configuration.md +++ /dev/null @@ -1,170 +0,0 @@ -+++ -weight = 21 -+++ - -# Configuration - -Place configuration values in `config.toml` or a presentation's front matter (`_index.md`). - ---- - -## Reveal.js themes - -Themes control the look and feel of your presentation. Set the `theme` param to any [valid Reveal.js theme](https://github.com/hakimel/reveal.js/#theming). - -```toml -[params.reveal_hugo] -theme = "moon" -``` - ---- - -## Use a custom theme - -To use a custom Reveal.js theme, place the CSS file in the `static` directory and set the `custom_theme` param. - -```toml -[params.reveal_hugo] -custom_theme = "reveal-hugo/themes/robot-lung.css" -``` - ---- - -### Use a custom theme (advanced) - -To use Hugo pipes to build a custom Reveal.js theme, place the source file (SCSS / PostCSS) in the `assets` directory and set the `custom_theme_compile` param. - -```toml -[params.reveal_hugo] -custom_theme = "reveal-hugo/themes/custom-theme.scss" -custom_theme_compile = true -``` - - - -💡 See the [custom theme example presentation](/custom-theme-example/) for more details. - - - ---- - -## Bundled themes - -reveal-hugo comes with 2 extra Reveal.js themes: - -- [robot-lung](https://github.com/dzello/revealjs-themes#robot-lung) (this one) -- [sunblind](https://github.com/dzello/revealjs-themes#sunblind) - -
- - - -They live in the `static/reveal-hugo/themes` folder and also [on Github](https://github.com/dzello/revealjs-themes). - - - ---- - -## Reveal.js params - -Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`. - -```toml -[params.reveal_hugo] -history = true -slide_number = true -transition = 'zoom' -transition_speed = 'fast' -``` - -[Full list of params](https://github.com/hakimel/reveal.js/#configuration) - ---- - -## highlight.js themes - -To change the syntax highlighting theme, set the `highlight_theme` -to a valid [highlight.js theme name](https://highlightjs.org/static/demo/). - -```toml -[params.reveal_hugo] -highlight_theme = "zenburn" -``` - ---- - -## Extending the layout - -Use partials to add HTML to the page for one or all presentations at a time. - - -💡 This is the recommended way to add script and style tags to customize your presentations. - - ---- - -Here is where to put partials for different presentations and places in the DOM. -

- -| Presentation | Before </head> | Before </body> | -|--------------|---------------------------------|---------------------------------| -| All | reveal-hugo/head.html | reveal-hugo/body.html | -| Root | home/reveal-hugo/head.html | home/reveal-hugo/body.html | -| Section | {section}/reveal-hugo/head.html | {section}/reveal-hugo/body.html | - -  - - - -💡 You can also create an `end.html` to put content before the end of the `.reveal` div tag. - - - ---- - -## Custom CSS Example - -In `home/reveal-hugo/head.html`: - -```html - -``` - ---- - -## Custom JS Example - -In `home/reveal-hugo/body.html`: - -```html - -``` - ---- - -### Extending the layout -#### (alternative) - -You can declare a custom CSS or javascript in your configuration. - -```toml -[reveal_hugo] -custom_css = "css/custom.css" -custom_js = "js/custom.js" -``` - - - -These files can be located in `static/css`, `static/js` folder - -💡 See the [extending layout example](/extending-layout-example/#) for more details. - - diff --git a/content/home/features.md b/content/home/features.md deleted file mode 100644 index 5d70186..0000000 --- a/content/home/features.md +++ /dev/null @@ -1,25 +0,0 @@ -+++ -weight = 10 -+++ - -## What's included? - -- All Reveal.js HTML, CSS and JS (v3.9.2) -- All out-of-the-box Reveal.js themes -- Two custom Reveal.js themes (including this one) - -
-
- -[see the code on github](https://github.com/dzello/reveal-hugo) - ---- - -## Features - -- Write slides in Markdown in one or more files -- Shortcodes for fragments, sections, slides & more -- All Reveal.js parameters can be customized -- Any Hugo section can be output as a presentation -- Supports offline development or using a CDN - diff --git a/content/home/resources.md b/content/home/resources.md deleted file mode 100644 index e19cbc1..0000000 --- a/content/home/resources.md +++ /dev/null @@ -1,43 +0,0 @@ -+++ -weight = 42 -+++ - -# Resources - ---- - -## Code and docs - -- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo) -- [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite) - ---- - -## External resources - -- [Reveal.js](https://revealjs.com/) -- [Hugo docs](https://gohugo.io/) -- [Hugo output format docs](https://gohugo.io/templates/output-formats/) - ---- - -## Designed to... - -- Deploy to [Netlify](https://netlify.com/) -- Edit with [Forestry](https://forestry.io/) - ---- - -# 🙏 - -Contribute by opening issues and pull requests. - ---- - -# Thanks! - ---- - -# ↩️ - -#### [Start over](#) diff --git a/content/home/shortcodes/fragment.md b/content/home/shortcodes/fragment.md deleted file mode 100644 index e53592c..0000000 --- a/content/home/shortcodes/fragment.md +++ /dev/null @@ -1,41 +0,0 @@ -+++ -weight = 30 -+++ - -## Fragment - -The `fragment` shortcode makes content appear incrementally. - -``` -{{%/* fragment */%}} One {{%/* /fragment */%}} -{{%/* fragment */%}} Two {{%/* /fragment */%}} -{{%/* fragment */%}} Three {{%/* /fragment */%}} -``` - -{{% fragment %}} One {{% /fragment %}} -{{% fragment %}} Two {{% /fragment %}} -{{% fragment %}} Three {{% /fragment %}} - ---- - -## Frag - -The `frag` shortcode is more terse than `fragment`. It accepts a `c` attribute. - -``` -{{}} -{{}} -{{}} -``` - -{{< frag c="One" >}} -{{< frag c="Two" >}} -{{< frag c="Three" >}} - ---- - -Both `fragment` and `frag` accept two additional parameters: - -- `class`: sets the class of the wrapping `span` element -- `index`: controls the order in which sections will appear - diff --git a/content/home/shortcodes/introduction.md b/content/home/shortcodes/introduction.md deleted file mode 100644 index 2978a52..0000000 --- a/content/home/shortcodes/introduction.md +++ /dev/null @@ -1,11 +0,0 @@ -+++ -weight = 29 -+++ - -# Shortcodes - ---- - -Hugo's shortcodes are similar to functions or templates that extend what you can do with Markdown. - -[Shortcode documentation](https://gohugo.io/content-management/shortcodes/) \ No newline at end of file diff --git a/content/home/shortcodes/markdown.md b/content/home/shortcodes/markdown.md deleted file mode 100644 index 0c49b4e..0000000 --- a/content/home/shortcodes/markdown.md +++ /dev/null @@ -1,38 +0,0 @@ -+++ -weight = 36 -+++ - -{{< markdown >}} - -## Markdown - -Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#markdown). To use that instead of Hugo, surround a slide with the markdown shortcode. - -```markdown -{{}} - -# Hello world! - -{{}} -``` - -
- -💡 Make sure to use the `{{}}` shortcode syntax to avoid rendering by Hugo. - - ---- - - - -Reveal.js markdown uses HTML comments to change slide properties, like background color. - -```markdown -{{}} - -# I'm a colorful slide -{{}} -``` - -{{< /markdown >}} - diff --git a/content/home/shortcodes/other.md b/content/home/shortcodes/other.md deleted file mode 100644 index fda5276..0000000 --- a/content/home/shortcodes/other.md +++ /dev/null @@ -1,49 +0,0 @@ -+++ -weight = 38 -+++ - -## Notes - -Add speaker notes (with markdown) to your presentation with the `note` shortcode. Type 's' to see this slide's speaker notes. - -```markdown ---- - -{{%/* note */%}} -- You found the **speaker notes**! -{{%/* /note */%}} - ---- -``` - -{{% note %}} -- You found the **speaker notes**! -{{% /note %}} - ---- - -{{< slide notes="You found the notes!" >}} - -## Notes - -You can also add notes with the `slide` shortcode and `notes` attribute: - -```markdown ---- - -{{%/* slide notes="You found the notes!" */%}} - ---- -``` - ---- - -
-

Write slides in HTML

-

Use a section tag with a data-noprocess attribute to avoid any processing by reveal-hugo.

-
-<section data-noprocess>
-  <h1>Hello world!</h1>
-</section>
- 💡 This is useful if you can't get Markdown to output exactly what you want. -
diff --git a/content/home/shortcodes/section.md b/content/home/shortcodes/section.md deleted file mode 100644 index 797ba21..0000000 --- a/content/home/shortcodes/section.md +++ /dev/null @@ -1,44 +0,0 @@ -+++ -weight = 33 -+++ - -{{% section %}} - -## Section - -The `section` shortcode groups slides into a **vertical display**. - -
- -use the down arrow or swipe down to continue - -
-🔽 - ---- - -Put the shortcode around the slides you want to group together. - -```markdown -{{%/* section */%}} - -## Section slide 1 - ---- - -## Section slide 2 - -{{%/* /section */%}} -``` - -Keep going down. - ---- - -## That's it! - -Use the right arrow or swipe right to continue. - -{{% /section %}} - - diff --git a/content/home/shortcodes/slide.md b/content/home/shortcodes/slide.md deleted file mode 100644 index 3ce5b8c..0000000 --- a/content/home/shortcodes/slide.md +++ /dev/null @@ -1,250 +0,0 @@ -+++ -weight = 34 -+++ - -## Slide - -Use this shortcode when you need to customize slide attributes like id, class, background color and transition. - ---- - -{{< slide class="hello" >}} - -## Slide - -Add the shortcode above the slide's content, below the `---`. - -```markdown ---- - -{{}} - -## Hello, world! - ---- -``` - ---- - -{{< slide transition="zoom" transition-speed="fast" >}} - -## Custom slide 1 - -Did you notice? This slide has a fast zoom transition. - -```markdown ---- - -{{}} - -## Custom slide 1 - ---- -``` - ---- - -{{< slide background-color="#FF4081" >}} - -## Custom slide 2 - -This slide has a different background color. - -```markdown ---- - -{{}} - -## Custom slide 2 - ---- -``` - ---- - -{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}} - -## Custom slide 3 - -This slide has a background image. - -```markdown ---- - -{{}} - ---- -``` - -(credit Alex Litvin) - ---- - -{{< slide id="custom-slide" >}} - -💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation. -

- -```markdown ---- - -{{}} - -## Custom slide - ---- -``` - ---- - -```markdown -[Try the link](#custom-slide) -``` - -
- -[Try the link](#custom-slide) - ---- - -Slide attribute possibilities from the [Reveal.js docs](https://github.com/hakimel/reveal.js): - -- `autoslide` -- `state` -- `background` -- `background-color` -- `background-image` -- `background-size` -- `background-position` -- `background-repeat` - ---- - -- `background-video` -- `background-video-loop` -- `background-video-muted` -- `background-interactive` -- `background-iframe` -- `background-transition` -- `transition` (can have different in and out transitions) -- `transition-speed` -- `notes` (can also use the note shortcode) -- `timing` - ---- - -{{% section %}} - -## Slide templates - -Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute. - -
- -navigate down to learn more - -
-🔽 - ---- - -Create templates in config.toml, _index.md or the current page's front matter. Put them under the **templates** key with a meaningful name: - -```toml -[reveal_hugo.templates.hotpink] -class = "hotpink" -background = "#FF4081" -``` - ---- - -{{< slide template="hotpink" >}} - -Apply the template using the **template** attribute of the slide shortcode: - -```markdown -{{}} - -# I'm a hot pink slide! -``` - ---- - -If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is: - -- page -- section (_index.md) -- site (config.toml) - -{{% /section %}} - ---- - -{{% section %}} - -{{< slide content="home.reusable" >}} - ---- - -{{< slide content="common.nested.reusable" >}} - -{{% /section %}} - ---- - -{{% section %}} - -## Slide-specific CSS - -Add more variety to your presentation by applying slide-specific CSS. - -
- -navigate down to learn more - -
-🔽 - ---- - -First, use the `slide` shortcode to give the slide a class: - -```markdown ---- - -{{}} - -# 📈 - -# 📊 - ---- -``` - ---- - -Next, use a layout extension partial like `reveal-hugo/head.html` to add CSS selectors: - -```html - -``` - ---- - -{{< slide class="side-by-side" >}} - -# 📈 - -# 📊 - -{{% /section %}} diff --git a/content/home/usage.md b/content/home/usage.md deleted file mode 100644 index a9ebe9d..0000000 --- a/content/home/usage.md +++ /dev/null @@ -1,109 +0,0 @@ -+++ -weight = 20 -+++ - -# Usage - ---- - -## Prerequisite - -First, add this to your `config.toml`: - -```toml -[outputFormats.Reveal] -baseName = "index" -mediaType = "text/html" -isHTML = true -``` - ---- - -### Presentation at site root - -Create `content/_index.md`: - -```markdown -+++ -outputs = ["Reveal"] -+++ - -# Slide 1 - -Hello world! -``` - ---- - -### Add slides - -Separate them by `---` surrounded by blank lines: - -``` -# Slide 1 - -Hello world! - ---- - -# Slide 2 - -Hello program! -``` - ---- - -### Add slides with other files - -Add slides to `content/home/*.md` - -```markdown -+++ -weight = 10 -+++ - -# Slide 3 - ---- - -# Slide 4 -``` - -💡 Tip: Use `weight` to specify the order that files should be considered. - ---- - -### Presentation at '/{section}/' - -Add slides to `content/{section}/_index.md`: - -```markdown -+++ -outputs = ["Reveal"] -+++ - -# Slide 1 - ---- - -# Slide 2 -``` - ---- - -Add slides from other files in `content/{section}/*.md` - -```markdown -+++ -weight = 10 -+++ - -# Slide 3 - ---- - -# Slide 4 -``` - -💡 Tip: Use `weight` to specify the order that files should be considered. - diff --git a/content/hugo-hl-example/_index.md b/content/hugo-hl-example/_index.md deleted file mode 100644 index 279254c..0000000 --- a/content/hugo-hl-example/_index.md +++ /dev/null @@ -1,113 +0,0 @@ -+++ -title = "Hugo highlighting example" -outputs = ["Reveal"] - -[reveal_hugo] -theme = "simple" -+++ - -## Hugo Highlighter Presentation - -This is an example of a presentation using Hugo's compile-time syntax highlighter. - ---- - -Reveal.js uses Javascript for syntax highlighting (via Highlight.js). This might slow the presentation down if many slides contain code. - ---- - -Hugo has a built-in [compile-time highlighter](https://gohugo.io/content-management/syntax-highlighting/), and it's lightning fast too! - ---- - -You can enable it using the `highlight` shortcode. - -{{< highlight go >}} -{{}} - -package main - -import "fmt" - -func main() { - fmt.Println("Hello world!") -} - -{{}} -{{< /highlight >}} - ---- - -Several options are supported, check [Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/). - -{{< highlight go "style=github,linenos=inline,hl_lines=8" >}} -{{}} - -package main - -import "fmt" - -func main() { - fmt.Println("Hello world!") -} - -{{}} -{{< / highlight >}} - ---- - -You can also use Hugo's highlighter in markdown code fences, -by putting this in `config.toml`: - -{{< highlight toml "style=github" >}} - -# use Hugo's hl in markdown (with or without a language tag) -[markup.highlight] -codeFences = true -style = "github" - -{{< /highlight >}} - -(This can only be enabled globally for all presentations.) - ---- - -- Highlight.js is automatically disabled in code blocks highlighted by Hugo. -- The two highlighters can be even mixed. - -{{< highlight go >}} -package main - -import "fmt" - -func main() { - fmt.Println("Hello world!") -} -{{< / highlight >}} - -```go -package main - -import "fmt" - -func main() { - fmt.Println("Hello world!") -} -``` - ---- - -If you don't need highlight.js at all, you can prevent it from loading. - -{{< highlight toml "style=github" >}} - -# This works both in config.toml and a presentation's front -# matter. Default plugins include highlight.js, so disable them -# and load those that we want manually. - -[params.reveal_hugo] -load_default_plugins = false -plugins = [ - "reveal-js/plugin/zoom-js/zoom.js", - "reveal-js/plugin/notes/notes.js", -] diff --git a/content/plugin-example/_index.md b/content/plugin-example/_index.md deleted file mode 100644 index 507eb5a..0000000 --- a/content/plugin-example/_index.md +++ /dev/null @@ -1,83 +0,0 @@ -+++ -title = "plugin-example" -description = "Shows how a Reveal.js plugin can be added and used" -outputs = ["Reveal"] -[reveal_hugo] -theme = "night" -margin = 0.2 -plugins = ["plugin/gallery/gallery.plugin.js"] -+++ - -# plugin-example - ---- - -This presentation demonstrates how a Reveal.js plugin can be added. - ---- - -The plugin is called [revealjs-simple-gallery](https://github.com/marcins/revealjs-simple-gallery). - ---- - -It can make any slide an image gallery. Here are a few examples. - ---- - - - ---- - - - ---- - - - ---- - -See the [revealjs-simple-gallery GitHub repo](https://github.com/marcins/revealjs-simple-gallery) to learn about more customization options. - ---- - -These were the steps to use this plugin for this reveal-hugo presentation. - ---- - -### 1 - -Copy the plugin CSS and JavaScript into the static directory - ---- - -### 2 - -Add the JavaScript file path to the `plugins` field in the front matter - ---- - -### 3 - -Create a `head.html` partial inside of `layouts/partials/plugin-example/reveal-hugo` - ---- - -### 4 - -In `head.html`, add a stylesheet link tag that loads the plugin CSS - ---- - -## THE END \ No newline at end of file diff --git a/content/plugin-example/sample1.jpg b/content/plugin-example/sample1.jpg deleted file mode 100644 index 497d5d1..0000000 Binary files a/content/plugin-example/sample1.jpg and /dev/null differ diff --git a/content/plugin-example/sample2.jpg b/content/plugin-example/sample2.jpg deleted file mode 100644 index a62dbdf..0000000 Binary files a/content/plugin-example/sample2.jpg and /dev/null differ diff --git a/content/plugin-example/sample3.jpg b/content/plugin-example/sample3.jpg deleted file mode 100644 index dad2884..0000000 Binary files a/content/plugin-example/sample3.jpg and /dev/null differ diff --git a/content/section-example/_index.md b/content/section-example/_index.md deleted file mode 100644 index 5d42bc3..0000000 --- a/content/section-example/_index.md +++ /dev/null @@ -1,19 +0,0 @@ -+++ -title = "Section presentation example" -outputs = ["Reveal"] -[reveal_hugo] -theme = "night" -margin = 0.2 -+++ - -# Section Presentation - -This is an example of a section presentation. - ---- - -Section presentations are completely separate from the root presentation and each other. - ---- - -Additional content files can be placed in the section and will be added to the presentation in the order of their weight. \ No newline at end of file diff --git a/content/section-example/presentation.md b/content/section-example/presentation.md deleted file mode 100644 index 0309317..0000000 --- a/content/section-example/presentation.md +++ /dev/null @@ -1,8 +0,0 @@ -+++ -weight = 10 -+++ - -# Including... - -Content from files like this one. - diff --git a/content/template-example/_index.md b/content/template-example/_index.md deleted file mode 100644 index 5b1ec68..0000000 --- a/content/template-example/_index.md +++ /dev/null @@ -1,45 +0,0 @@ -+++ -title = "Template presentation" -outputs = ["Reveal"] -[reveal_hugo] -theme = "night" -margin = 0.2 -[reveal_hugo.templates.blue] -background = "#0011DD" -transition = "zoom" -+++ - -## Template Example - ---- - -This presentation shows how to take advantage of reveal-hugo's slide template feature. - ---- - -Slide templates let you specify groups of slide attributes in one place and reuse them throughout the presentation. - ---- - -{{< slide template="blue" >}} - -Here's an example of using a template called `blue`, defined in the front matter of this presentation's `_index.md` file. - ---- - -The template can contain any valid slide customization params: - -```toml -[reveal_hugo.templates.blue] -background = "#0011DD" -transition = "zoom" -``` - ---- - -Then add it to any slide using the slide shortcode: - -``` -{{}} -``` - diff --git a/content/template-example/continued.md b/content/template-example/continued.md deleted file mode 100644 index 85ac367..0000000 --- a/content/template-example/continued.md +++ /dev/null @@ -1,16 +0,0 @@ -+++ -+++ - -{{< slide template="grey" >}} - -Templates can be specified in `config.toml` as well, for reusability across multiple presentations. - -``` -[params.reveal_hugo.templates.grey] -background = "#424242" -transition = "convex" -``` - ---- - -## THE END \ No newline at end of file diff --git a/public/index.html b/public/index.html index eab9c19..58bc049 100644 --- a/public/index.html +++ b/public/index.html @@ -1,16 +1,16 @@ - + -reveal-hugo - +fablab Coh@bit + - +