Skip to content

Commit e3dfbf6

Browse files
alshedivatalshedivat
committed
Add math support through kramdown and katex. Light style improvements.
1 parent 1e8dff5 commit e3dfbf6

10 files changed

+95
-31
lines changed

‎_config.yml

+11-2
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,21 @@ twitter_username: twitter_username
1010
github_username: github_username
1111

1212
# Build settings
13-
markdown: redcarpet
13+
markdown: kramdown
1414
highlighter: pygments
1515

16-
include: ['_pages']
16+
# Math support
17+
kramdown:
18+
math_engine: mathjax
1719

1820
# Pagination
1921
paginate: 15
2022
permalink: /blog/:year/:title/
2123
paginate_path: /blog/page:num/
2224

25+
# Includes
26+
include: ['_pages']
27+
2328
# Collections
2429
collections:
2530
projects:
@@ -50,3 +55,7 @@ scholar:
5055
details_link: Details
5156

5257
query: "@*"
58+
59+
# Advanced (don't if you are not sure what it is)
60+
jquery_version: "1.11.1"
61+
katex_version: "0.1.1"

‎_includes/footer.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<footer class="site-footer">
22

33
<div class="wrapper">
4-
<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>
4+
<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>
55
</div>
66

77
</footer>

‎_includes/head.html

+14-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
<head>
2-
<meta charset="utf-8">
3-
<meta name="viewport" content="width=device-width initial-scale=1" />
4-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2+
<meta charset="utf-8">
3+
<meta name="viewport" content="width=device-width initial-scale=1" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
55

6-
<title>{{ site.name }}{% if page.title and page.url != "/" %} | {{ page.title }}{% endif %}</title>
7-
<meta name="description" content="{{ site.description }}">
6+
<title>{{ site.name }}{% if page.title and page.url != "/" %} | {{ page.title }}{% endif %}</title>
7+
<meta name="description" content="{{ site.description }}">
88

9-
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
10-
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
9+
<link rel="stylesheet" href="{{ site.baseurl }}/css/main.css">
10+
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
1111

12-
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
12+
<!-- Load jQuery -->
13+
<script src="//code.jquery.com/jquery-{{ site.jquery_version }}.min.js"></script>
14+
<!-- Load KaTeX -->
15+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.css">
16+
<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/{{ site.katex_version }}/katex.min.js"></script>
17+
18+
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
1319
</head>

‎_includes/header.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<nav class="site-nav">
66

77
<div class="trigger">
8-
<a class="page-link" href="{{ site.baseurl }}/">home</a>
8+
<a class="page-link" href="{{ site.baseurl }}/">about</a>
99

1010
<!-- {{ site.title }} instead of blog -->
1111
<a class="page-link" href="{{ "/blog/" | prepend: site.baseurl }}">blog</a>

‎_layouts/default.html

+2
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616

1717
{% include footer.html %}
1818

19+
<script src="{{ site.baseurl }}/js/katex.js"></script>
20+
1921
</body>
2022

2123
</html>

‎_posts/2015-10-20-comments.markdown

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
layout: post
3+
title: a post with comments
4+
date: 2015-10-20 11:59:00-0400
5+
description: an example of a blog post with comments
6+
comments: true
7+
---
8+
This post shows how to add DISQUS comments.

‎_posts/2015-10-20-math.markdown

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
layout: post
3+
title: a post with math
4+
date: 2015-10-20 11:12:00-0400
5+
description: an example of a blog post with some math
6+
---
7+
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 $$.
8+
9+
To use display mode, again surround your expression with `$$` and place it as a separate paragraph. Here is an example:
10+
11+
$$
12+
\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)
13+
$$
14+
15+
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).

‎_sass/_base.scss

+18-12
Original file line numberDiff line numberDiff line change
@@ -24,20 +24,21 @@ $caption_font_size: 12px;
2424
$caption_color: #aaa;
2525

2626
/* COLORS */
27-
$red: #FF3636;
28-
$orange: #F29105;
29-
$blue: #2698BA;
30-
$green: #11D68B;
31-
$lime_green: #B7D12A;
32-
$purple: #B509AC;
27+
$red: #FF3636;
28+
$orange: #F29105;
29+
$blue: #2698BA;
30+
$green: #11D68B;
31+
$lime_green: #B7D12A;
32+
$purple: #B509AC;
3333

3434

35-
$grey-color-dark: #333; /* footer */
36-
$grey-color-light: #ddd; /* navigation bar border */
37-
$text-color: #666;
35+
$grey-color-dark: #333; /* footer */
36+
$grey-color-light: #ddd; /* navigation bar border */
37+
$text-color: #666;
3838

3939
/* Set theme color *************************/
40-
$theme-color: darken($red, 30%);
40+
// $theme-color: $red;
41+
$theme-color: darken($red, 20%);
4142

4243

4344
/************************************************************/
@@ -140,7 +141,7 @@ article a {
140141
font-weight: 100;
141142

142143
&:hover {
143-
text-decoration: none;
144+
text-decoration: underline;
144145
}
145146
}
146147

@@ -188,7 +189,12 @@ pre {
188189
}
189190
}
190191

191-
192+
/**
193+
* Equations
194+
*/
195+
div.equation {
196+
margin: 20px 0;
197+
}
192198

193199
/**
194200
* Wrapper

‎_sass/_layout.scss

+10-7
Original file line numberDiff line numberDiff line change
@@ -75,15 +75,18 @@ display: line;
7575
*/
7676
.site-footer {
7777
border-top: 1px solid $grey-color-dark;
78-
font-size: 10px;
7978
background-color: $grey-color-dark;
80-
padding: 2px;
8179
color: #aaa;
82-
position:fixed;
83-
left:0px;
84-
bottom:0px;
85-
height:25px;
86-
width:100%;
80+
font-size: 72%;
81+
padding: 2px;
82+
position: fixed;
83+
left: 0px;
84+
bottom: 0px;
85+
width: 100%;
86+
87+
p { margin-bottom: 0; }
88+
a { color: #fff; }
89+
a:hover { color: $theme-color; }
8790
}
8891
/**
8992
* Pagination **********************************************************

‎js/katex.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
$("script[type='math/tex']").replaceWith(
2+
function(){
3+
var tex = $(this).text();
4+
return "<span class=\"inline-equation\">" +
5+
katex.renderToString(tex) +
6+
"</span>";
7+
});
8+
9+
$("script[type='math/tex; mode=display']").replaceWith(
10+
function(){
11+
var tex = $(this).text();
12+
return "<div class=\"equation\">" +
13+
katex.renderToString("\\displaystyle "+tex) +
14+
"</div>";
15+
});

0 commit comments

Comments
 (0)