Browse files

Add instructions for CSS syntax highlighting to example

  • Loading branch information...
1 parent 66e3438 commit 176c796759efd30ef361bff318d576d028a4e46f @stuartsierra stuartsierra committed Mar 9, 2012
Showing with 51 additions and 10 deletions.
  1. +38 −6 example.html
  2. +13 −4 example.org
View
44 example.html
@@ -7,7 +7,7 @@
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="title" content="Example Presentation"/>
<meta name="generator" content="Org-mode"/>
-<meta name="generated" content="2012-02-24 10:58:39 EST"/>
+<meta name="generated" content="2012-03-09 18:48:13 EST"/>
<meta name="author" content="Stuart Sierra"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
@@ -51,6 +51,7 @@ <h1 class="title">Example Presentation</h1>
<li><a href="#sec-2">2 Source Code</a>
<ul>
<li><a href="#sec-2-1">2.1 Syntax Highlighting</a></li>
+<li><a href="#sec-2-2">2.2 Syntax Highlighting with CSS Classes</a></li>
</ul>
</li>
<li><a href="#sec-3">3 Images</a>
@@ -219,17 +220,48 @@ <h3 id="sec-2-1"><span class="section-number-3">2.1</span> Syntax Highlighting &
<ul>
-<li>Org-Mode HTML export uses htmlize.el
+<li>Org-Mode HTML export uses <a href="http://www.emacswiki.org/emacs/Htmlize">htmlize.el</a>
</li>
<li>Code in exported HTML will match your current Emacs theme
<ul>
-<li>Choose a theme that looks good on slides!
+<li>Choose a theme that looks good on a projector!
</li>
-<li>Tip: launch Emacs with <code>-q</code> to skip your custom settings
+</ul>
+
+</li>
+</ul>
+
+
+</div>
+
+</div>
+
+<div id="outline-container-2-2" class="outline-3">
+<h3 id="sec-2-2"><span class="section-number-3">2.2</span> Syntax Highlighting with CSS Classes &nbsp;&nbsp;&nbsp;<span class="tag"><span class="slide">slide</span></span></h3>
+<div class="outline-text-3" id="text-2-2">
+
+
+<ul>
+<li>Set the Emacs variable:
+<ul>
+<li><code>org-export-htmlize-output-type</code>
+</li>
+<li>to the symbol <code>css</code>
</li>
</ul>
</li>
+<li>Htmlize.el will add SPAN tags with CSS classes
+<ul>
+<li>Named for each font face, e.g. <code>org-comment</code>
+</li>
+</ul>
+
+</li>
+<li>Examine HTML output to see class names
+</li>
+<li>Add CSS styles to set colors
+</li>
</ul>
@@ -251,7 +283,7 @@ <h2 id="sec-3"><span class="section-number-2">3</span> Images &nbsp;&nbsp;&nbsp;
</ul>
</li>
-<li>See also these Emacs variables
+<li>See also these Emacs variables:
<ul>
<li><code>org-export-html-inline-images</code>
</li>
@@ -395,7 +427,7 @@ <h3 id="sec-5-2"><span class="section-number-3">5.2</span> The End &nbsp;&nbsp;&
</div>
<div id="postamble">
-<p class="date">Date: 2012-02-24 10:58:39 EST</p>
+<p class="date">Date: 2012-03-09 18:48:13 EST</p>
<p class="author">Author: Stuart Sierra</p>
<p class="creator">Org version 7.8.02 with Emacs version 23</p>
<a href="http://validator.w3.org/check?uri=referer">Validate XHTML 1.0</a>
View
17 example.org
@@ -54,16 +54,25 @@ Use =begin_src/end_src= blocks to include source code.
** Syntax Highlighting :slide:
-- Org-Mode HTML export uses htmlize.el
+- Org-Mode HTML export uses [[http://www.emacswiki.org/emacs/Htmlize][htmlize.el]]
- Code in exported HTML will match your current Emacs theme
- - Choose a theme that looks good on slides!
- - Tip: launch Emacs with =-q= to skip your custom settings
+ - Choose a theme that looks good on a projector!
+
+** Syntax Highlighting with CSS Classes :slide:
+
+- Set the Emacs variable:
+ - =org-export-htmlize-output-type=
+ - to the symbol =css=
+- Htmlize.el will add SPAN tags with CSS classes
+ - Named for each font face, e.g. =org-comment=
+- Examine HTML output to see class names
+- Add CSS styles to set colors
* Images :slide:
- Slides can contain images
- Any file type a browser can display
-- See also these Emacs variables
+- See also these Emacs variables:
- =org-export-html-inline-images=
- =org-export-html-inline-image-extensions=
- Controls which file types get exported

0 comments on commit 176c796

Please sign in to comment.