Add math support through kramdown and katex. Light style improvements.

This commit is contained in:
Maruan Al-Shedivat 2015-10-20 12:05:37 -04:00
parent 1e8dff52bc
commit e3dfbf67c7
10 changed files with 95 additions and 31 deletions

View File

@ -10,16 +10,21 @@ twitter_username: twitter_username
github_username: github_username github_username: github_username
# Build settings # Build settings
markdown: redcarpet markdown: kramdown
highlighter: pygments highlighter: pygments
include: ['_pages'] # Math support
kramdown:
math_engine: mathjax
# Pagination # Pagination
paginate: 15 paginate: 15
permalink: /blog/:year/:title/ permalink: /blog/:year/:title/
paginate_path: /blog/page:num/ paginate_path: /blog/page:num/
# Includes
include: ['_pages']
# Collections # Collections
collections: collections:
projects: projects:
@ -50,3 +55,7 @@ scholar:
details_link: Details details_link: Details
query: "@*" query: "@*"
# Advanced (don't if you are not sure what it is)
jquery_version: "1.11.1"
katex_version: "0.1.1"

View File

@ -1,7 +1,7 @@
<footer class="site-footer"> <footer class="site-footer">
<div class="wrapper"> <div class="wrapper">
<p class="small">© Copyright {{ site.time | date: '%Y' }} {{ site.name }}. Powered by <a href="">Jekyll</a>. Theme <a href="">al-folio</a> by <a href="https://github.com/alshedivat">alshedivat</a>.</p> <p class="small">© Copyright {{ site.time | date: '%Y' }} {{ site.name }}. Powered by <a href="http://jekyllrb.com/">Jekyll</a> with <a href="https://github.com/alshedivat/al-folio">al-folio</a> theme. Hosted by <a href="https://pages.github.com/" target="_blank">GitHub Pages</a>.</p>
</div> </div>
</footer> </footer>

View File

@ -9,5 +9,11 @@
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css"> <link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}"> <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<!-- Load jQuery -->
<script src="//code.jquery.com/jquery-{{ site.jquery_version }}.min.js"></script>
<!-- Load KaTeX -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head> </head>

View File

@ -5,7 +5,7 @@
<nav class="site-nav"> <nav class="site-nav">
<div class="trigger"> <div class="trigger">
<a class="page-link" href="{{ site.baseurl }}/">home</a> <a class="page-link" href="{{ site.baseurl }}/">about</a>
<!-- {{ site.title }} instead of blog --> <!-- {{ site.title }} instead of blog -->
<a class="page-link" href="{{ "/blog/" | prepend: site.baseurl }}">blog</a> <a class="page-link" href="{{ "/blog/" | prepend: site.baseurl }}">blog</a>

View File

@ -16,6 +16,8 @@
{% include footer.html %} {% include footer.html %}
<script src="{{ site.baseurl }}/js/katex.js"></script>
</body> </body>
</html> </html>

View File

@ -0,0 +1,8 @@
---
layout: post
title: a post with comments
date: 2015-10-20 11:59:00-0400
description: an example of a blog post with comments
comments: true
---
This post shows how to add DISQUS comments.

View File

@ -0,0 +1,15 @@
---
layout: post
title: a post with math
date: 2015-10-20 11:12:00-0400
description: an example of a blog post with some math
---
This theme supports rendering beautiful math in inline and display modes using [KaTeX](https://khan.github.io/KaTeX/) engine. You just need to surround your math expression with `$$`, like `$$ E = mc^2 $$`. If you leave it inside a paragraph, it will produce an inline expression, just like $$ E = mc^2 $$.
To use display mode, again surround your expression with `$$` and place it as a separate paragraph. Here is an example:
$$
\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
$$
Note that [KaTeX](https://khan.github.io/KaTeX/) is work in progress, so it does not support the full range of math expressions as, say, [MathJax](https://www.mathjax.org/). Yet, it is [blazing fast](http://www.intmath.com/cg5/katex-mathjax-comparison.php).

View File

@ -37,7 +37,8 @@ $grey-color-light: #ddd; /* navigation bar border */
$text-color: #666; $text-color: #666;
/* Set theme color *************************/ /* Set theme color *************************/
$theme-color: darken($red, 30%); // $theme-color: $red;
$theme-color: darken($red, 20%);
/************************************************************/ /************************************************************/
@ -140,7 +141,7 @@ article a {
font-weight: 100; font-weight: 100;
&:hover { &:hover {
text-decoration: none; text-decoration: underline;
} }
} }
@ -188,7 +189,12 @@ pre {
} }
} }
/**
* Equations
*/
div.equation {
margin: 20px 0;
}
/** /**
* Wrapper * Wrapper

View File

@ -75,15 +75,18 @@ display: line;
*/ */
.site-footer { .site-footer {
border-top: 1px solid $grey-color-dark; border-top: 1px solid $grey-color-dark;
font-size: 10px;
background-color: $grey-color-dark; background-color: $grey-color-dark;
padding: 2px;
color: #aaa; color: #aaa;
font-size: 72%;
padding: 2px;
position: fixed; position: fixed;
left: 0px; left: 0px;
bottom: 0px; bottom: 0px;
height:25px;
width: 100%; width: 100%;
p { margin-bottom: 0; }
a { color: #fff; }
a:hover { color: $theme-color; }
} }
/** /**
* Pagination ********************************************************** * Pagination **********************************************************

15
js/katex.js Normal file
View File

@ -0,0 +1,15 @@
$("script[type='math/tex']").replaceWith(
function(){
var tex = $(this).text();
return "<span class=\"inline-equation\">" +
katex.renderToString(tex) +
"</span>";
});
$("script[type='math/tex; mode=display']").replaceWith(
function(){
var tex = $(this).text();
return "<div class=\"equation\">" +
katex.renderToString("\\displaystyle "+tex) +
"</div>";
});