actions/mdBook
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
8947fa348a
mdBook/tests/book/format/theme/syntax-highlighting.html
steveklabnik d319d8f642 Introduce smoke test 
This checks that we render the example book correctly. In order to do
that, we put a known-good copy of the book under tests/book, and then in
tests/smoke.rs, we generate a copy of it, and then diff the two
directories.

This means that PRs that change the generated output will need to update
this fixture, but it also means we get to see an easy way of what they
actually update.

Part of #11
2017-04-14 15:26:57 -04:00

158 lines
8.4 KiB
HTML
Raw Blame History

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Syntax highlighting - mdBook Documentation</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="description" content="Create book from markdown files. Like Gitbook but implemented in Rust">
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="../../">
<link rel="stylesheet" href="book.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.png">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="highlight.css">
<link rel="stylesheet" href="tomorrow-night.css">
<!-- MathJax -->
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<!-- Fetch JQuery from CDN but have a local fallback -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='jquery.js'%3E%3C/script%3E"));
}
</script>
</head>
<body class="light">
<!-- Set the theme before any content is loaded, prevents flash -->
<script type="text/javascript">
var theme = localStorage.getItem('theme');
if (theme == null) { theme = 'light'; }
$('body').removeClass().addClass(theme);
</script>
<!-- Hide / unhide sidebar before it is displayed -->
<script type="text/javascript">
var sidebar = localStorage.getItem('sidebar');
if (sidebar === "hidden") { $("html").addClass("sidebar-hidden") }
else if (sidebar === "visible") { $("html").addClass("sidebar-visible") }
</script>
<div id="sidebar" class="sidebar">
<ul class="chapter"><li class="affix"><a href="misc/introduction.html">Introduction</a></li><li><a href="README.html"><strong>1.</strong> mdBook</a></li><li><a href="cli/cli-tool.html"><strong>2.</strong> Command Line Tool</a></li><li><ul class="section"><li><a href="cli/init.html"><strong>2.1.</strong> init</a></li><li><a href="cli/build.html"><strong>2.2.</strong> build</a></li><li><a href="cli/watch.html"><strong>2.3.</strong> watch</a></li><li><a href="cli/serve.html"><strong>2.4.</strong> serve</a></li><li><a href="cli/test.html"><strong>2.5.</strong> test</a></li></ul></li><li><a href="format/format.html"><strong>3.</strong> Format</a></li><li><ul class="section"><li><a href="format/summary.html"><strong>3.1.</strong> SUMMARY.md</a></li><li><a href="format/config.html"><strong>3.2.</strong> Configuration</a></li><li><a href="format/theme/theme.html"><strong>3.3.</strong> Theme</a></li><li><ul class="section"><li><a href="format/theme/index-hbs.html"><strong>3.3.1.</strong> index.hbs</a></li><li><a href="format/theme/syntax-highlighting.html" class="active"><strong>3.3.2.</strong> Syntax highlighting</a></li></ul></li><li><a href="format/mathjax.html"><strong>3.4.</strong> MathJax Support</a></li><li><a href="format/rust.html"><strong>3.5.</strong> Rust code specific features</a></li></ul></li><li><a href="lib/lib.html"><strong>4.</strong> Rust Library</a></li><li class="spacer"></li><li class="affix"><a href="misc/contributors.html">Contributors</a></li></ul>
</div>
<div id="page-wrapper" class="page-wrapper">
<div class="page">
<div id="menu-bar" class="menu-bar">
<div class="left-buttons">
<i id="sidebar-toggle" class="fa fa-bars"></i>
<i id="theme-toggle" class="fa fa-paint-brush"></i>
</div>
<h1 class="menu-title">mdBook Documentation</h1>
<div class="right-buttons">
<i id="print-button" class="fa fa-print" title="Print this book"></i>
</div>
</div>
<div id="content" class="content">
<a class="header" href="format/theme\syntax-highlighting.html#syntax-highlighting" id="syntax-highlighting"><h1>Syntax Highlighting</h1></a>
<p>For syntax highlighting I use <a href="https://highlightjs.org">Highlight.js</a> with a custom theme.</p>
<p>Automatic language detection has been turned off, so you will probably want to
specify the programming language you use like this</p>
<pre><code class="language-markdown">```rust
fn main() {
// Some code
}
```</code></pre>
<a class="header" href="format/theme\syntax-highlighting.html#custom-theme" id="custom-theme"><h2>Custom theme</h2></a>
<p>Like the rest of the theme, the files used for syntax highlighting can be overridden with your own.</p>
<ul>
<li><strong><em>highlight.js</em></strong> normally you shouldn't have to overwrite this file, unless you want to use a more recent version.</li>
<li><strong><em>highlight.css</em></strong> theme used by highlight.js for syntax highlighting.</li>
</ul>
<p>If you want to use another theme for <code>highlight.js</code> download it from their website, or make it yourself,
rename it to <code>highlight.css</code> and put it in <code>src/theme</code> (or the equivalent if you changed your source folder)</p>
<p>Now your theme will be used instead of the default theme.</p>
<a class="header" href="format/theme\syntax-highlighting.html#hiding-code-lines" id="hiding-code-lines"><h2>Hiding code lines</h2></a>
<p>There is a feature in mdBook that let's you hide code lines by prepending them with a <code>#</code>.</p>
<pre><code class="language-bash"># fn main() {
let x = 5;
let y = 6;
println!(&quot;{}&quot;, x + y);
# }
</code></pre>
<p>Will render as</p>
<pre><pre class="playpen"><code class="language-rust"># fn main() {
let x = 5;
let y = 7;
println!(&quot;{}&quot;, x + y);
# }
</code></pre></pre>
<p><strong>At the moment, this only works for code examples that are annotated with <code>rust</code>. Because it would collide with semantics of some programming languages. In the future, we want to make this configurable through the <code>book.toml</code> so that everyone can benefit from it.</strong></p>
<a class="header" href="format/theme\syntax-highlighting.html#improve-default-theme" id="improve-default-theme"><h2>Improve default theme</h2></a>
<p>If you think the default theme doesn't look quite right for a specific language, or could be improved.
Feel free to <a href="https://github.com/azerupi/mdBook/issues">submit a new issue</a> explaining what you have in mind and I will take a look at it.</p>
<p>You could also create a pull-request with the proposed improvements.</p>
<p>Overall the theme should be light and sober, without to many flashy colors.</p>
</div>
<!-- Mobile navigation buttons -->
<a href="format/theme/index-hbs.html" class="mobile-nav-chapters previous">
<i class="fa fa-angle-left"></i>
</a>
<a href="format/mathjax.html" class="mobile-nav-chapters next">
<i class="fa fa-angle-right"></i>
</a>
</div>
<a href="format/theme/index-hbs.html" class="nav-chapters previous" title="You can navigate through the chapters using the arrow keys">
<i class="fa fa-angle-left"></i>
</a>
<a href="format/mathjax.html" class="nav-chapters next" title="You can navigate through the chapters using the arrow keys">
<i class="fa fa-angle-right"></i>
</a>
</div>
<!-- Local fallback for Font Awesome -->
<script>
if ($(".fa").css("font-family") !== "FontAwesome") {
$('<link rel="stylesheet" type="text/css" href="_FontAwesome/css/font-awesome.css">').prependTo('head');
}
</script>
<!-- Livereload script (if served using the cli tool) -->
<script src="highlight.js"></script>
<script src="book.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink