Skip to content

Configuration

Jump to bottom Edit New page
fredster33 edited this page Nov 24, 2021 · 51 revisions

The following configuration options are currently available:

General

var slideshow = remark.create({
  // Set the slideshow display ratio
  // Default: '4:3'
  // Alternatives: '16:9', ...
  ratio: '4:3',

  // Navigation options
  navigation: {
    // Enable or disable navigating using scroll
    // Default: true
    // Alternatives: false
    scroll: true,

    // Enable or disable navigation using touch
    // Default: true
    // Alternatives: false
    touch: true,

    // Enable or disable navigation using click
    // Default: false
    // Alternatives: true
    click: false,
  },

  // Timer options
  timer: {
    // Start timer when first change occurs
    // Default: true
    // Alternatives: false
    startOnChange: true,

    // Is it possible to reset the timer
    // Default: true
    // Alternatives: false
    resetable: true,

    // Is the timer enabled
    // Default: true
    // Alternatives: false
    enabled: true,

    // A formatter for the elapsed time in milliseconds, defaults to H:mm:ss
    formatter: function (elapsedTime) {
      var left = elapsedTime;
      var millis = left % 1000; left = Math.floor(left / 1000);
      var seconds = left % 60; left = Math.floor(left / 60);
      var minutes = left % 60; left = Math.floor(left / 60);
      var hours = left;

      return '' + hours + ':' + ([minutes, seconds]
        .map(function (d) { return '' + d; })
        .map(function (s) { return s.length < 2 ? '0' + s : s; })
        .join(':'));
    }
  },

  // Customize slide number label, either using a format string..
  slideNumberFormat: 'Slide %current% of %total%',
  // .. or by using a format function
  slideNumberFormat: function (current, total) {
    return 'Slide ' + current + ' of ' + total;
  },

  // Enable or disable counting of incremental slides in the slide counting
  countIncrementalSlides: true,

  // Provide a source markdown for slides explicitly as an option 
  // instead of the textarea with id="source"
  // Default: undefined
  // Alternatives: 'Slide 1\n---\nSlide 2', ...
  source: undefined,

  // Read source markdown for slides from URL (local or external) instead 
  // of the textarea with id="source"
  // Default: undefined
  // Alternatives: 'some_file.md', 'https://example.host.com/file.md', ...
  sourceUrl: undefined,
  
  // Value indicates if presenter notes should be visible or not.
  // Default: true
  // Alternatives: false
  includePresenterNotes: true,
});

Highlighting

Highlighting is done using Highlight.js. Check out the demo/test page for the available styles and languages.

  • highlightLanguage
    • Set default language for syntax highlighting
    • Default: - (no highlighting)
    • Alternatives: javascript, ruby, python, ... (see available language definitions for Highlight.js)
    • To disable automatic highlighting, use no-highlight

  • highlightStyle
    • Set highlight style for syntax highlighting
    • Default: default
    • Alternatives: arta, ascetic, dark, default, far, github, googlecode, idea, ir-black, magula, monokai, rainbow, solarized-dark, solarized-light, sunburst, tomorrow, tomorrow-night-blue, tomorrow-night-bright, tomorrow-night, tomorrow-night-eighties, vs, zenburn.

  • highlightLines
    • Highlight background of code lines prefixed with *
    • Default: false
    • Alternatives: true, false

  • highlightSpans
    • Inside code blocks, highlight (the background of) content between special delimiters.
    • Default: false (off)
      • true: use `backticks` as delimiters.

API

Slideshow

Creation

To create a slideshow, you use the remark.create function as follows:

var slideshow = remark.create();

Optionally, you can pass in a number of configuration options:

var slideshow = remark.create({
  highlightLanguage: 'javascript',
  highlightStyle: 'monokai',
  ...
});

This should all go in a <script> block in the end of your <body> tag.

Check out the list of configuration options at the top of this page.

Navigation

After creating your slideshow, a number of functions are available for navigating:

// Navigate to the beginning and end of the slideshow
slideshow.gotoFirstSlide();
slideshow.gotoLastSlide();

// Navigate a single slide forward and backward
slideshow.gotoNextSlide();
slideshow.gotoPreviousSlide();

// Navigate to a specific slide, either by slide number or name
slideshow.gotoSlide(5);
slideshow.gotoSlide('agenda');

// Suspend/resume remarks process of keyboard and touch events for custom builds, etc...
slideshow.pause();
slideshow.resume();

Read more about naming slides.

Using JavaScript to Create a Continuously Looping Slideshow

After creating your slideshow, a helper function like the one below can be used to automatically navigate through the slides:

var slideshow = remark.create();

// every 8 seconds (change to your desired interval), fire the helper function
setInterval(function () {carousel(slideshow)}, 8000);

	function carousel(varObject) {
		var slideCount = varObject.getSlideCount()-1;
		var currentSlide = varObject.getCurrentSlideIndex();
		// if the slideshow is on the last slide, go back to the first slide; if not, call gotoNextSlide();
		if (currentSlide == slideCount) {
			varObject.gotoFirstSlide();
		}
		else { varObject.gotoNextSlide(); }
	}

Events

Upon navigation (and later, other stuff as well), events are emitted from the slideshow:

slideshow.on('showSlide', function (slide) {
  // Slide is the slide being navigated to
});

slideshow.on('hideSlide', function (slide) {
  // Slide is the slide being navigated away from
});

Alternatives include beforeShowSlide, afterShowSlide, beforeHideSlide, and afterHideSlide which trigger before or after changes are actually made to the DOM. Please see below for more information on the slide parameter.

Slide

A slide has the following format:

{
  // Function returning the slides number (0..N-1, where N is the number of slides)
  getSlideIndex: function (),

  // The notes for the slide
  notes: <string>,

  // The slide properties extracted from the Markdown
  properties: {
    class: "center, middle",
    name: "agenda",
    ...
  },
  
  // The Markdown representing the slide
  content: <string>
}
<title>Title</title> <style> @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); 
  body { font-family: 'Droid Serif'; }
  h1, h2, h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: normal;
  }
  .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
<textarea id="source">

Code:

def add(a,b)
  a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
  var slideshow = remark.create();
</script>
Clone this wiki locally