feat: added support for custom CSS, side menu plugin and a few more config options
- added support to add one or multiple CSS files as theme overrides - added side menu plugin to control themes, transitions, switch to print view and so on - added config options to set transition and navigation modes
This commit is contained in:
parent
a213f9cff5
commit
bb66990c98
GPG key ID:
C1DB5D2E8DB512F9
7 changed files with 111 additions and 25 deletions
|
|
@ -28,30 +28,82 @@
|
|||
<script src="/reveal/js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
Reveal.initialize({
|
||||
controls: true,
|
||||
progress: true,
|
||||
history: true,
|
||||
center: true,
|
||||
slideNumber: true,
|
||||
hash: true,
|
||||
transition: '{{ .Reveal.Transition }}', // none/fade/slide/convex/concave/zoom
|
||||
navigationMode: '{{ .Reveal.NavigationMode }}',
|
||||
markdown: {
|
||||
smartypants: true,
|
||||
smartLists: true
|
||||
},
|
||||
pdfSeparateFragments: false,
|
||||
menu: {
|
||||
numbers: true,
|
||||
useTextContentForMissingTitles: true,
|
||||
custom: [
|
||||
{
|
||||
title: 'Print',
|
||||
icon: '<i class="fas fa-print"></i>',
|
||||
content: '<a href="/?print-pdf">Go to print view<a/>'
|
||||
}
|
||||
],
|
||||
themes: [
|
||||
{name: 'Beige', theme: '/reveal/css/theme/beige.css'},
|
||||
{name: 'Black', theme: '/reveal/css/theme/black.css'},
|
||||
{name: 'Blood', theme: '/reveal/css/theme/blood.css'},
|
||||
{name: 'League', theme: '/reveal/css/theme/league.css'},
|
||||
{name: 'Moon', theme: '/reveal/css/theme/moon.css'},
|
||||
{name: 'Night', theme: '/reveal/css/theme/night.css'},
|
||||
{name: 'Serif', theme: '/reveal/css/theme/serif.css'},
|
||||
{name: 'Simple', theme: '/reveal/css/theme/simple.css'},
|
||||
{name: 'Sky', theme: '/reveal/css/theme/sky.css'},
|
||||
{name: 'Solarized', theme: '/reveal/css/theme/solarized.css'},
|
||||
{name: 'White', theme: '/reveal/css/theme/white.css'}
|
||||
],
|
||||
transitions: true,
|
||||
},
|
||||
// Optional libraries used to extend on reveal.js
|
||||
dependencies: [
|
||||
{
|
||||
src: '/reveal/plugin/markdown/marked.js', condition: function () {
|
||||
return !!document.querySelector('[data-markdown]');
|
||||
}
|
||||
},
|
||||
{
|
||||
src: '/reveal/plugin/markdown/markdown.js', condition: function () {
|
||||
return !!document.querySelector('[data-markdown]');
|
||||
}
|
||||
},
|
||||
{
|
||||
src: '/reveal/plugin/highlight/highlight.js', async: true, callback: function () {
|
||||
hljs.initHighlightingOnLoad();
|
||||
}
|
||||
},
|
||||
{src: '/reveal/plugin/notes/notes.js'},
|
||||
{src: '/reveal/plugin/menu/menu.js'}
|
||||
]
|
||||
});
|
||||
|
||||
Reveal.initialize({
|
||||
controls: true,
|
||||
progress: true,
|
||||
history: true,
|
||||
center: true,
|
||||
slideNumber: true,
|
||||
hash: true,
|
||||
transition: 'slide', // none/fade/slide/convex/concave/zoom
|
||||
markdown:{
|
||||
smartypants: true,
|
||||
smartLists: true,
|
||||
},
|
||||
|
||||
// Optional libraries used to extend on reveal.js
|
||||
dependencies: [
|
||||
{ src: '/reveal/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: '/reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
|
||||
{ src: '/reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
|
||||
{ src: '/reveal/plugin/notes/notes.js' }
|
||||
]
|
||||
});
|
||||
|
||||
{{ if (len .Reveal.StyleSheets) gt 0 }}
|
||||
{{ range $idx, $style := .Reveal.StyleSheets }}
|
||||
var additionalStyleSheet = document.createElement('link');
|
||||
additionalStyleSheet.rel = 'stylesheet';
|
||||
additionalStyleSheet.type = 'text/css';
|
||||
additionalStyleSheet.href = '/local/{{- $style }}';
|
||||
document.getElementsByTagName('head')[0].appendChild(additionalStyleSheet);
|
||||
{{ end}}
|
||||
{{ end }}
|
||||
|
||||
var link = document.createElement('link');
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = window.location.search.match(/print-pdf/gi) ? '/reveal/css/print/pdf.css' : '/reveal/css/print/paper.css';
|
||||
document.getElementsByTagName('head')[0].appendChild(link);
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,3 +2,5 @@
|
|||
|
||||
mkdir -p ./assets/reveal
|
||||
curl -sL "https://github.com/hakimel/reveal.js/archive/${1:-3.8.0}.tar.gz" | tar -xvz --strip-components=1 -C ./assets/reveal --wildcards *.js --wildcards *.css --exclude test --exclude gruntfile.js
|
||||
mkdir -p ./assets/reveal/plugin/
|
||||
git clone https://github.com/denehyg/reveal.js-menu.git ./assets/reveal/plugin/menu
|
||||
7
examples/custom.css
Normal file
7
examples/custom.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.reveal h1 {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
p {
|
||||
color: green;
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
theme: night
|
||||
code-theme: monokai
|
||||
horizontal-separator: ===
|
||||
vertical-separator: ---
|
||||
vertical-separator: ---
|
||||
stylesheets:
|
||||
- examples/custom.css
|
||||
|
|
@ -46,4 +46,15 @@ Content 3.2
|
|||
|
||||
## External 4.2
|
||||
|
||||
<a href="https://www.google.com">Google</a>
|
||||
<a href="https://www.google.com">Google</a>
|
||||
|
||||
===
|
||||
|
||||
## Code
|
||||
|
||||
```csharp
|
||||
var i = 10;
|
||||
for (var j = 0; j < i; j++) {
|
||||
Console.WriteLine($"{j}");
|
||||
}
|
||||
```
|
||||
|
|
@ -34,6 +34,8 @@ var (
|
|||
cfgFile string
|
||||
theme string
|
||||
codeTheme string
|
||||
transition string
|
||||
navigationMode string
|
||||
horizontalSeparator string
|
||||
verticalSeparator string
|
||||
rootCmd = &cobra.Command{
|
||||
|
|
@ -61,6 +63,8 @@ func init() {
|
|||
|
||||
rootCmd.PersistentFlags().StringVar(&theme, "theme", defaultTheme, "reveal.js theme to use")
|
||||
rootCmd.PersistentFlags().StringVar(&codeTheme, "code-theme", "monokai", "name of the code theme to use for highlighting")
|
||||
rootCmd.PersistentFlags().StringVar(&transition, "transition", "none", "transition effect to use")
|
||||
rootCmd.PersistentFlags().StringVar(&navigationMode, "navigationMode", "default", "determine the navigation mode to use ['default', 'linear', 'grid']")
|
||||
rootCmd.PersistentFlags().StringVar(&horizontalSeparator, "horizontal-separator", "===", "horizontal separator in slides")
|
||||
rootCmd.PersistentFlags().StringVar(&verticalSeparator, "vertical-separator", "---", "vertical separator in slides")
|
||||
rootCmd.PersistentFlags().StringVar(&cfgFile, "config", "", "config file (default is $HOME/.go-reveal-slides.yaml)")
|
||||
|
|
|
|||
|
|
@ -14,18 +14,26 @@
|
|||
|
||||
package config
|
||||
|
||||
import "github.com/spf13/viper"
|
||||
import (
|
||||
"github.com/spf13/viper"
|
||||
)
|
||||
|
||||
type RevealParams struct {
|
||||
Theme string
|
||||
CodeTheme string
|
||||
Transition string
|
||||
NavigationMode string
|
||||
HorizontalSeparator string
|
||||
VerticalSeparator string
|
||||
StyleSheets []string
|
||||
}
|
||||
|
||||
func (params *RevealParams) Load() {
|
||||
params.Theme = viper.GetString("theme")
|
||||
params.CodeTheme = viper.GetString("code-theme")
|
||||
params.Transition = viper.GetString("transition")
|
||||
params.NavigationMode = viper.GetString("navigationMode")
|
||||
params.HorizontalSeparator = viper.GetString("horizontal-separator")
|
||||
params.VerticalSeparator = viper.GetString("vertical-separator")
|
||||
params.StyleSheets = viper.GetStringSlice("stylesheets")
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue