Repository: trikita/slide-html
Branch: master
Commit: 9fd245355097
Files: 8
Total size: 17.5 KB
Directory structure:
gitextract_w2no93u0/
├── .gitignore
├── README.md
├── build.js
├── package.json
├── slide.html
└── src/
├── slide.css
├── slide.html
└── slide.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
node_modules/
================================================
FILE: README.md
================================================
# Slide
The most simple plain text presentation maker.
This version is a standalone HTML page of 4K in size that you can edit in place
and get a working presentation. No other tools needed except for a text editor.
No programming knowledge is required, too.
Android implementation can be found [here](https://github.com/trikita/slide).
## Tutorial
1. Download `slide.html`.
[Open this link](https://raw.githubusercontent.com/trikita/slide-html/master/slide.html)
and press <kbd>Ctrl+S</kbd>.
2. Open the downloaded `slide.html` with a text editor.
3. Find the line `<pre id="slide">` (should be somewhere around line 36).
4. Edit the text. This is the contents of your presentation.
5. After you save the file - open it in your browser and see the results. You
can edit, save and refresh the browser to see how your presentation looks
like.
## Demo
Either open `slide.html` in your browser or [view it online](http://htmlpreview.github.io/?https://github.com/trikita/slide-html/blob/master/slide.html).
## Syntax
Slides are separated with a blank line.
The font size of each slide is scaled automatically to fit the screen. This is
suitable for [Takahashi method](https://en.wikipedia.org/wiki/Takahashi_method).
Headlines use a larger font size and start with `#` sign.
Emphasized text is written as bold and must be surrounded with asterisks, `*like this*`.
To print an actual asterist just write it twice, `** like this`.
Code blocks are written with monospace font and must start with at least two spaces.
To disable the special meaning of newlines, spaces or `#` put a dot at the
beginning of the line.
## Styling
Above the slide contents there is a small style block. You can specify the
default font, foreground and background colors for your slides. You can also
customize header, monospace and emphasized font styles.
## Printing
You can print your presentation, in this case the slides will be printed as small thumbnails
so that you could make notes on paper or use it as a story plan for your speech.
## Development
We really want to keep it minimal, but if you want to customize it or offer a
pull request you can edit files inside the `src` folder. Then you may open
`src/slide.html` to view your changes, or run `npm run build` to generate the
standalone `slide.html` version.
## License
Code is distributed under MIT license, feel free to use it.
Made by [Trikita](http://trikita.co) - feel free to checkout our other works!
================================================
FILE: build.js
================================================
var fs = require('fs');
var uglify = require("uglify-js").minify;
var cssmin = require('cssmin');
var css = fs.readFileSync("src/slide.css", encoding='utf8');
var js = fs.readFileSync("src/slide.js", encoding='utf8');
var html = fs.readFileSync("src/slide.html", encoding='utf8');
var inline = html
.replace(/<script src="slide.js"><\/script>/, '<script>'+uglify(js, {fromString: true}).code+'</script>')
.replace(/<link .*href="slide.css">/, '<style>'+cssmin(css)+'</style>');
console.log(inline);
================================================
FILE: package.json
================================================
{
"name": "slide",
"version": "1.0.0",
"description": "Plain text presentation maker",
"scripts": {
"lint": "jshint src/slide.js",
"build": "node build.js > slide.html"
},
"repository": {
"type": "git",
"url": "git+https://github.com/trikita/slide-html.git"
},
"author": "Serge Zaitsev <zaitsev.serge@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/trikita/slide-html/issues"
},
"homepage": "https://github.com/trikita/slide-html#readme",
"devDependencies": {
"cssmin": "^0.4.3",
"jshint": "^2.9.2",
"uglify-js": "^2.6.2"
}
}
================================================
FILE: slide.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Slide</title>
<style>*{margin:0;padding:0;box-sizing:border-box}#slide{display:none}.slide{white-space:nowrap}.slide-content{align-self:center}@media screen{body{position:absolute;top:50%;left:50%}.slide-4x3{width:1024px;height:768px;margin:-384px 0 0 -512px}.slide-16x9{width:1024px;height:576px;margin:-288px 0 0 -512px}.slide-16x10{width:1024px;height:640px;margin:-320px 0 0 -512px}.slide{position:absolute;width:100%;height:100%;display:flex;justify-content:center;overflow:hidden}}@media print{body{transform:none!important}h1{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem;font-weight:300}.slide-root{width:100%;display:flex;flex-wrap:wrap;align-items:stretch}.slide-content{transform:none!important}.slide{display:flex;justify-content:center;flex:1;padding:.5rem;margin:.5rem .5rem 4rem .5rem;border:1px solid rgba(0,0,0,0.2);visibility:visible!important}}</style>
<script>function trimIndent(e){var t=(e.match(INDENT_RE)||[""])[0].length;if(t>0){var n=e.substring(0,t);return e.replace(new RegExp(n,"g"),"")}}function renderSlide(e,t,n){var i=t.split("\n"),r=-1,o=document.createElement("div"),d=document.createElement("div"),s="";o.className="slide slide-"+n,d.className="slide-content";for(var l=0;l<i.length;l++){var a=i[l];if(a.startsWith("#"))s=s+"<h1>"+a.substring(1)+"</h1>";else if(a.startsWith(" ")||a.startsWith(" "))s=s+"<pre>"+a.replace(/^( )|\t/,"")+"</pre>";else{a.startsWith(".")&&(a=a.substring(1));for(var c=0;c<a.length;c++){var h=a.charAt(c);"*"==h?-1==r?(s+="<strong>",r=s.length):(r!=s.length?s+="</strong>":s=s.substring(0,s.length-8)+"*",r=-1):s+=h}s+="<br/>"}}d.innerHTML=s,o.appendChild(d),e.appendChild(o),o.style.visibility="hidden"}function render(e){var t=document.createElement("div");t.className="slide-root",document.body.appendChild(t),e=trimIndent(e);for(var n=e.split(/[\s+]\n/gm),i=0;i<n.length;i++){var r=n[i].trim();renderSlide(t,r,i)}return t}function resize(){var e=window.innerWidth,t=window.innerHeight,n=document.body.offsetWidth,i=document.body.offsetHeight,r=n/i>e/t?e/n:t/i;document.body.style.transform="scale("+r+")"}function goTo(e){currentSlide=e,window.location.hash=e;for(var t=document.querySelectorAll(".slide"),n=0;n<t.length;n++){var i=t[n],r=i.children[0],o=.8*i.offsetWidth/r.offsetWidth,d=.8*i.offsetHeight/r.offsetHeight;r.style.transform="scale("+Math.min(o,d)+")",n==currentSlide?i.style.visibility="":i.style.visibility="hidden"}}function next(){goTo(Math.min(currentSlide+1,document.querySelectorAll(".slide").length-1))}function prev(){goTo(Math.max(currentSlide-1,0))}var INDENT_RE=/^(?:( )+|\t+)/,currentSlide=-1;window.onload=function(){resize(),render(document.getElementById("slide").innerHTML),goTo(window.location.hash.substring(1)||0),window.onclick=next,window.onresize=resize,window.onkeydown=function(e){39==e.keyCode?next():37==e.keyCode&&prev()}};</script>
<style media="screen">
@import url(https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
/* Customize theme: change body, h1, strong, pre or .slide class */
body {
font-family: 'Lato', sans-serif;
background-color: #edd400;
color: #453029;
line-height: 1.54;
}
.slide h1 {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 2.6rem;
}
.slide pre {
font-family: 'Inconsolata';
font-size: 0.6rem;
line-height: 1.1;
}
.slide-10 h1 { color: #fff; text-shadow: 1px 1px 3px #453029; }
.slide-11 {
background: url("http://trikita.co/slide/icon.png"), url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/asanoha-400px.png");
background-repeat: no-repeat, repeat;
background-size: 35%, auto;
background-position: bottom right;
}
.slide-13 .slide-content {
background-image: url("http://trikita.co/slide/write_framed.png"),
url("http://trikita.co/slide/styles.gif"),
url("http://trikita.co/slide/illustrate_framed.png");
background-repeat: no-repeat;
background-size: 40%, 40%, 40%;
background-position: bottom left, bottom center, bottom right;
}
</style>
</head>
<body class="slide-16x9">
<pre id="slide">
#SLIDE
Good speech deserves time it takes
Save time for speech
Leave presentation to *Slide*
#Focus on content
Learn 5 markup rules
to make content look great
# #1
Each paragraph is a slide
# #2
Headers start with #
# #3
Emphasize *words*
surrounding them with **asterisks**
# #4
Indent code with 2 spaces
/* Day of week: Sakamoto's algorithm */
int dow(int y, int m, int d)
{
static int t[] = {0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4};
y -= m < 3;
return (y + y/4 - y/100 + y/400 + t[m-1] + d) % 7;
}
# #5
Lines starting with a dot
disable markup such as
headlines, code or blank lines
↵ = new slide
.# = headline
** = emphasize
␣␣ = monospace
.. = escape
# Styling with CSS
# Selectors
..slide
..slide h1
..slide strong
..slide pre
.
..slide-N, where N is slide number
# Example
.
.slide-10 h1 {
color: #fff;
text-shadow: 1px 1px 3px #453029;
}
.
# CSS backgrounds
.slide-12 {
background: url("icon.png"),
url("bg.png");
background-repeat: no-repeat, repeat;
background-size: 40%, auto;
background-position: bottom right;
}
# Print mode
You can print slide thumbnails
to practice your speech
Slide for Android
.
.
.
# Links
http://trikita.co/slide
https://github.com/trikita/slide
https://github.com/trikita/slide-html
https://play.google.com/store/apps/details?id=trikita.slide
</pre>
</body>
</html>
================================================
FILE: src/slide.css
================================================
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#slide { display: none; }
.slide { white-space: nowrap; }
.slide-content { align-self: center; }
@media screen {
/* Aspect ratio classes for the body tag */
body { position: absolute; top: 50%; left: 50%; }
.slide-4x3 { width: 1024px; height: 768px; margin: -384px 0 0 -512px; }
.slide-16x9 { width: 1024px; height: 576px; margin: -288px 0 0 -512px; }
.slide-16x10 { width: 1024px; height: 640px; margin: -320px 0 0 -512px; }
.slide {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}
}
@media print {
body { transform: none !important; }
h1 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; font-weight: 300; }
.slide-root { width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; }
.slide-content { transform: none !important; }
.slide {
display: flex;
justify-content: center;
flex: 1;
padding: 0.5rem;
margin: 0.5rem 0.5rem 4rem 0.5rem;
border: 1px solid rgba(0, 0, 0, 0.2);
visibility: visible !important;
}
}
================================================
FILE: src/slide.html
================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Slide</title>
<link rel="stylesheet" href="slide.css">
<script src="slide.js"></script>
<style media="screen">
@import url(https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin,latin-ext);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(https://fonts.googleapis.com/css?family=Inconsolata);
/* Customize theme: change body, h1, strong, pre or .slide class */
body {
font-family: 'Lato', sans-serif;
background-color: #edd400;
color: #453029;
line-height: 1.54;
}
.slide h1 {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 2.6rem;
}
.slide pre {
font-family: 'Inconsolata';
font-size: 0.6rem;
line-height: 1.1;
}
.slide-10 h1 { color: #fff; text-shadow: 1px 1px 3px #453029; }
.slide-11 {
background: url("http://trikita.co/slide/icon.png"), url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/asanoha-400px.png");
background-repeat: no-repeat, repeat;
background-size: 35%, auto;
background-position: bottom right;
}
.slide-13 .slide-content {
background-image: url("http://trikita.co/slide/write_framed.png"),
url("http://trikita.co/slide/styles.gif"),
url("http://trikita.co/slide/illustrate_framed.png");
background-repeat: no-repeat;
background-size: 40%, 40%, 40%;
background-position: bottom left, bottom center, bottom right;
}
</style>
</head>
<body class="slide-16x9">
<pre id="slide">
#SLIDE
Good speech deserves time it takes
Save time for speech
Leave presentation to *Slide*
#Focus on content
Learn 5 markup rules
to make content look great
# #1
Each paragraph is a slide
# #2
Headers start with #
# #3
Emphasize *words*
surrounding them with **asterisks**
# #4
Indent code with 2 spaces
/* Day of week: Sakamoto's algorithm */
int dow(int y, int m, int d)
{
static int t[] = {0, 3, 2, 5, 0, 3, 5, 1, 4, 6, 2, 4};
y -= m < 3;
return (y + y/4 - y/100 + y/400 + t[m-1] + d) % 7;
}
# #5
Lines starting with a dot
disable markup such as
headlines, code or blank lines
↵ = new slide
.# = headline
** = emphasize
␣␣ = monospace
.. = escape
# Styling with CSS
# Selectors
..slide
..slide h1
..slide strong
..slide pre
.
..slide-N, where N is slide number
# Example
.
.slide-10 h1 {
color: #fff;
text-shadow: 1px 1px 3px #453029;
}
.
# CSS backgrounds
.slide-12 {
background: url("icon.png"),
url("bg.png");
background-repeat: no-repeat, repeat;
background-size: 40%, auto;
background-position: bottom right;
}
# Print mode
You can print slide thumbnails
to practice your speech
Slide for Android
.
.
.
# Links
http://trikita.co/slide
https://github.com/trikita/slide
https://github.com/trikita/slide-html
https://play.google.com/store/apps/details?id=trikita.slide
</pre>
</body>
</html>
================================================
FILE: src/slide.js
================================================
var INDENT_RE = /^(?:( )+|\t+)/;
function trimIndent(s) {
var indent = (s.match(INDENT_RE)||[''])[0].length;
if (indent > 0) {
var trim = s.substring(0, indent);
return s.replace(new RegExp(trim, 'g'), '');
}
}
function renderSlide(root, slide, index) {
var lines = slide.split('\n');
var emSpanStart = -1;
var slideWrapper = document.createElement('div');
var slideContent = document.createElement('div');
var html = '';
slideWrapper.className = 'slide slide-'+index;
slideContent.className = 'slide-content';
for (var i = 0 ; i < lines.length; i++) {
var line = lines[i];
if (line.startsWith('#')) {
// Add header
html = html + '<h1>' + line.substring(1) + '</h1>';
} else if (line.startsWith(' ') || line.startsWith('\t')) {
// Add code
html = html + '<pre>' + line.replace(/^( )|\t/,'') + '</pre>';
} else {
// Unquote dot-quoted lines
if (line.startsWith('.')) {
line = line.substring(1);
}
// Handle emphasis
for (var j = 0; j < line.length; j++) {
var c = line.charAt(j);
if (c == '*') {
if (emSpanStart == -1) {
html = html + '<strong>';
emSpanStart = html.length;
} else {
if (emSpanStart != html.length) {
html = html + '</strong>';
} else {
html = html.substring(0, html.length-8) + '*';
}
emSpanStart = -1;
}
} else {
html = html + c;
}
}
html = html + '<br/>';
}
}
slideContent.innerHTML = html;
slideWrapper.appendChild(slideContent);
root.appendChild(slideWrapper);
slideWrapper.style.visibility = "hidden";
}
function render(content) {
var root = document.createElement('div');
root.className = 'slide-root';
document.body.appendChild(root);
content = trimIndent(content);
var slides = content.split(/[\s+]\n/mg);
for (var i = 0; i < slides.length; i++) {
var slide = slides[i].trim();
renderSlide(root, slide, i);
}
return root;
}
function resize() {
var w = window.innerWidth;
var h = window.innerHeight;
var bw = document.body.offsetWidth;
var bh = document.body.offsetHeight;
var scale = ((w/h < bw/bh) ? w/bw : h/bh);
document.body.style.transform = 'scale(' + scale + ')';
}
var currentSlide = -1;
function goTo(slideIndex) {
currentSlide = slideIndex;
window.location.hash = slideIndex;
var slides = document.querySelectorAll('.slide');
for (var i = 0; i < slides.length; i++) {
var el = slides[i];
var slide = el.children[0];
var scaleWidth = (el.offsetWidth * 0.8 / slide.offsetWidth);
var scaleHeight = (el.offsetHeight * 0.8 / slide.offsetHeight);
slide.style.transform = 'scale(' + Math.min(scaleWidth, scaleHeight) + ')';
if (i == currentSlide) {
el.style.visibility = '';
} else {
el.style.visibility = 'hidden';
}
}
}
function next() {
goTo(Math.min(currentSlide + 1, document.querySelectorAll('.slide').length - 1));
}
function prev() {
goTo(Math.max(currentSlide - 1, 0));
}
window.onload = function() {
resize();
render(document.getElementById('slide').innerHTML);
goTo(window.location.hash.substring(1)||0);
window.onclick = next;
window.onresize = resize;
window.onkeydown = function(e) {
if (e.keyCode == 39) {
next();
} else if (e.keyCode == 37) {
prev();
}
};
};
gitextract_w2no93u0/
├── .gitignore
├── README.md
├── build.js
├── package.json
├── slide.html
└── src/
├── slide.css
├── slide.html
└── slide.js
SYMBOL INDEX (7 symbols across 1 files)
FILE: src/slide.js
function trimIndent (line 3) | function trimIndent(s) {
function renderSlide (line 11) | function renderSlide(root, slide, index) {
function render (line 60) | function render(content) {
function resize (line 73) | function resize() {
function goTo (line 84) | function goTo(slideIndex) {
function next (line 102) | function next() {
function prev (line 106) | function prev() {
Condensed preview — 8 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (19K chars).
[
{
"path": ".gitignore",
"chars": 14,
"preview": "node_modules/\n"
},
{
"path": "README.md",
"chars": 2476,
"preview": "# Slide\n\nThe most simple plain text presentation maker.\n\nThis version is a standalone HTML page of 4K in size that you c"
},
{
"path": "build.js",
"chars": 507,
"preview": "var fs = require('fs');\n\nvar uglify = require(\"uglify-js\").minify;\nvar cssmin = require('cssmin');\n\nvar css = fs.readFil"
},
{
"path": "package.json",
"chars": 606,
"preview": "{\n \"name\": \"slide\",\n \"version\": \"1.0.0\",\n \"description\": \"Plain text presentation maker\",\n \"scripts\": {\n \"lint\": "
},
{
"path": "slide.html",
"chars": 6364,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/slide.css",
"chars": 1096,
"preview": "* {\n\tmargin: 0;\n\tpadding: 0;\n\tbox-sizing: border-box;\n}\n#slide { display: none; }\n.slide { white-space: nowrap; }\n.slide"
},
{
"path": "src/slide.html",
"chars": 3596,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "src/slide.js",
"chars": 3232,
"preview": "var INDENT_RE = /^(?:( )+|\\t+)/;\n\nfunction trimIndent(s) {\n\tvar indent = (s.match(INDENT_RE)||[''])[0].length;\n\tif (inde"
}
]
About this extraction
This page contains the full source code of the trikita/slide-html GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 8 files (17.5 KB), approximately 5.3k tokens, and a symbol index with 7 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.