clayh53 / tufte-jekyll Goto Github PK

Hi, this jekyll theme looks amazing when I run it locally, however on github pages a blog with this theme won't compile for me due to recurrent issues with sidenotes and newthought tags in liquid in sample posts but also in the index file.

see #23

I'll do this in a separate PR from #26

Hi Clay, this theme is great. Thanks for putting it together. I would love to see the couple of mobile-browser issues addressed but don't have the skills to do it myself. One other suggestion is to have a full-width text option, perhaps as default for pages. If there is already an easy way to set this, I am all ears. Thanks again.

Howdy.

When feed.xml is created the content is provided by

   <description>{{ post.content | xml_escape }}</description>

However, the side margin information is included in the post.content which - for footnotes and references - can make the text rather unreadable. Is it possible to only get the content corresponding to the main column (i.e,. the content you can see for the smallest screen)?

Currently using {% m %}mathjax expression{% em %} and {% math %}mathjax expression{% endmath %} is way too painful...

As one user pointed out Jekyll's default Markdown renderer has built in mathjax support: http://kramdown.gettalong.org/math_engine/mathjax.html

I have noticed that when I open a print preview for a page or post the side and margin notes do not show up at all. I've been racking my brains to figure out why this might be and I'm wondering if it is a browser-based problem (I mostly use Chrome) or if it is something else.

Has anyone else had this issue? Is there something that can be done with the print CSS to force them to show up? I'll try out what I know and then make a pull request if I find something that works, but I wanted to check in and see if anyone else had a similar experience.

I've run into a problem with using sidenotes (and marginnotes) within the excerpted part of posts and I'd like to confirm that I'm not doing something completely stupid.

The notes are rendered on the default index and break the layout because index is full-width while posts are not. I have added the following scss as a quick fix, but it seems unlikely to me that I'm the first to run into this problem so I am wondering if I missed a more canonical way to deal with this problem.

.full-width {
  .sidenote, .sidenote-number, .marginnote  {
    display: none;
  }
}

I decided to use this pretty theme for my website. After some tinkering, it does what I want it to in my Firefox. On my phone, I get this:

My suggestions:

• The header should extend more gracefully, moving the line beneath the last navigation link.
  (The problem is probably that nav.group has a fixed height?)
• The line distance between the social icons is too large.

Mathjax can be slow. Might be nice to offer Katex as an alternative. Toggling between mathjax and katex can be done via config.

https://xuc.me/blog/KaTeX-and-Jekyll/
https://github.com/Khan/KaTeX

Hi,
thank you so much for this terrific port of Tufte's CSS to Jekyll!

Is it possible to use liquid in sidenotes? I would like to use Jekyll Scholar for references in the sidenotes but couldn't figure out how. I have tried several things but nothing worked so far. The only way of combining sidenotes with Jekyll Scholar I know of would be to use raw HTML. Is there a better solution?

Thanks for your help!

A style property of style="display: none !important;" is attached to some of the icons (for some reason this doesn't happen in Firefox)

Hi,
first of all, thanks for your theme. It's beautiful. I am a long standing fan of Tufte as you must be!
I am not a Ruby programmer and am stuck getting the theme to build, not locally which works fine but when I push the changes to GitHub. Then I get an email back saying:

The page build failed with the following error:

The tag `math` on line 26 in `_posts/2015-10-03-Edge-Cases.md` is not a recognized Liquid tag. For more information, see https://help.github.com/articles/page-build-failed-unknown-tag-error.

If I remove that file, the custom liquid tags (that you have detailed in your readme) will cause the build to fail one after the other. As mentioned, my local build based on jekyll 3.1.3 and kramdown 1.13.1 works just fine.
This is similar to another issue raised here where the problem was with the local build rather than the remote GitHub pages build. Mine is the opposite.
any tips would be appreciated!
thanks

Thank you Clayh53 for making tufte-jekyll. I like your demo a lot, and I am trying to get it to work on my end. I am new to Jekyll and github. Please be patient with me. Your kindness is appreciated.

I get the following error when trying to build the site on my github joemouk.github.io:

The page build failed with the following error:

The tag math on line 26 in _posts/2015-10-03-Edge-Cases.md is not a recognized Liquid tag. For more information, see https://help.github.com/articles/page-build-failed-unknown-tag-error.

I get the same error for sidenotes. I have not been able to load the page. I have tried to run it locally on my mac, but still have issues - it seems I can't download kramdown with El Capitan.
Please let me know if you have any idea how I can get your well-designed tufte-jekyll to work for my blog.
Thank you very much.

In the spirit of semantic HTML, content put in the margin should be wrapped in <aside> tags.

(That can also be useful when filtering excerpts: simply hide all aside nodes.)

The way the plugins currently work, though, they create span-level nodes. <aside> is a block tag and illegal to use in the same way, i.e. within <p> tags. Kramdown will actually escape the tag.

So a larger redesign is necessary; I don't have a proposal right now.

Could this tufte-jekyll theme be build automatically by travis?

I am using Windows for daily work. It is a painful task to start the Ubuntu virtual machine to build the site and upload. Although the rakefile is well written to build and upload the site to gh-pages branch automatically, the building is still required. If it can be configured in a Travis config file, this task can be simplified into git push the source files only. Moreover, this simple task can be done platform independently. Even can be done by modifying the file using Github online edit-and-commit function, which can be done on a smartphone when out of office.

There is a problem that I am not familiar with the plugins and dependencies this theme required. Could you please make this task possible?

There is a project in GitHub about how to config Travis for Rake and Jekyll: https://github.com/mfenner/jekyll-travis. Hope it will help.

The latest config of mathjax does not render <, >, & well. The < and > can be replaced by \lt and \gt respectively. However, there is no alternative solution for &.

The code:

{% math %}
D = \left(\begin{matrix}
1 & -1 & &      &   & \\
  &    & \cdots &   & \\
  &    &        & 1 & -1
\end{matrix}
\right)
{% endmath %}

line 35-41 of this markdown

will be rendered as this:

(This may be due to the mathjax env is set to centered ???)

In Chrome for Android at least, the sidenotes never appear.

Fig captions appear to be centered oddly. If there is not enough text to wrap, they are aligning right. It seems to be something to do with a weird margin box. Example:

It looks like use of figcaption was removed from Tuftecss in this commit:
edwardtufte/tufte-css@7032695

There was also discussion about its use here:
edwardtufte/tufte-css#44

The problem seems to be mitigated by using a longer caption that forces wrapping.

Hi, I was testing the underline option for the links, and using it make links in the header and post tittles on the front page to be also underlined. I don't know if this is intentional but I think it should only change the links in the text body if possible.
Thanks.

The case of titles is not being respected in posts:

---
layout: post
title: "One Day in Montréal"
date: 2014-06-12 17:58:10 +1200

---

With very little adaptation from the demo, here is the view on the "Blog" page showing excerpts.

But in the actual post the case of the title is no longer respected:

This is not a bug but more like a feature/enhancement request. I'm still trying to tweak my pages and have run into this minor issue:

I'd like to have a collapsible navbar.

Currently the navigation bar is created from the site.pages and while the tex size scales with device/media size it is not uncommon to get something that is wider that a single line if there are more than a few pages in the menu.

If the text width becomes too large then I'd like either all the menu items (besides the site name) to collapse or just the ones that there aren't room for.

For starters I moved the navigation part to a separate file _includes/nav.html (shown below)

<header>
<nav id="menu">
<ul>
<li><a href="{{site.baseurl}}/">sitename</a></li>
{% for node in site.pages %}{% unless node.nav_exclude %}{% if page.url == node.url %}
<li><a class="active" href="{{node.url | prepend: site.baseurl}}">{{node.title}}</a> </li>
{% else %}
<li><a href="{{node.url | prepend: site.baseurl}}">{{node.title}}</a></li>
{% endif %}{% endunless %}{% endfor %}
</ul>
</nav>
</header>

where the menu items are items in an unordered list. Now I found some previous code to work as a collapsible navbar. Here's the part of the script that does all the computation with the width of the menu bar entries and moves them back and forth between being hidden (included as part of the footer).

/*--------------------------------------------------
Hidden Nav
--------------------------------------------------*/
hiddenNavBar = {
    $menu: $('#menu'),
    init: function () {
        this.resize();
        $('<div id="on-hidden-menu"><div class="toggle"><span></span></div><ul></ul></div>').hide().insertAfter(this.$menu);
        // toggle
        $('#on-hidden-menu .toggle').click(function () {
                                                  $('#on-hidden-menu').toggleClass('open');
                                              });

        // win load & resize
        $(window).on('load resize', function () {
                         hiddenNavBar.resize();
                     });
    },
    resize: function () {
        setTimeout(function () {
                          var menuWidth = $('ul', this.$menu).width() + 60;
                          var winW = $(window).width();

                          console.log(menuWidth, winW);

                          if (menuWidth > winW) {
                              console.log('init');

                              $('#on-hidden-menu').show();
/*                            $clone = $('li:not(".on-hidden"):last', this.$menu).addClass('on-hidden').clone(); */
                              $clone = $('#menu li:not(".on-hidden"):last', this.$menu).addClass('on-hidden').clone();
                              if ($clone.parent().size() == 0) {
                                  $clone.prependTo($('#on-hidden-menu ul'));
                              }

                              hiddenNavBar.resize();
                              /** this.menu */
                          } else if (menuWidth + $('li.on-hidden:first').width() < winW) {
                              $('li.on-hidden:first').removeClass('on-hidden');
                              $('#on-hidden-menu ul li:first').remove();
                          }

                          if ($('.on-hidden').size() == 0) {
                              $('#on-hidden-menu').removeClass('open').hide();
                          }
                      }, 10);
    }
};


/*--------------------------------------------------
DOC READY
--------------------------------------------------*/
$(function () {
         hiddenNavBar.init();
     })

and then there's the corresponding css file information (included in the header).

/*--------------------------------------------------
Nav
--------------------------------------------------*/

header {
padding: 15px 5px;
position: relative;
z-index: 1;
}

body.full-width > header {
}

#menu {
white-space:nowrap;
position: relative;
z-index: 1;
width: auto;
}

#menu ul {
list-style: none;
list-style-type: none;
margin: 0;
padding: 0;
white-space: nowrap;
display: inline-block;
}

#menu ul li {
display: inline-block;
position: relative;
}

#menu ul li a {
text-decoration: none;
padding: 0.7em;
}

/*--------------------------------------------------
On Hidden Menu
--------------------------------------------------*/


#menu ul li.on-hidden { display: none; }

#on-hidden-menu {
display: block;
position: absolute;
z-index: 10;
right: 0;
margin-top: 15px;
min-width: 280px;
}

#on-hidden-menu ul {
margin: 0;
padding: 0;
list-style: none;
position: relative;
overflow: hidden;
height: 0;
}

#on-hidden-menu li {
background: #30424d;
border-bottom: 1px solid #273640;
opacity: 0;
-moz-transition: all .4s ease-in-out .2s;
-o-transition: all .4s ease-in-out .2s;
-webkit-transition: all .4s ease-in-out .2s;
transition: all .4s ease-in-out .2s;
position: relative;
}

#on-hidden-menu li a {
color: rgba(255,255,255,.9);
text-decoration: none;
padding: 10px 15px;
display: block;
}

#on-hidden-menu li a:hover { background: #354C5A; }

/* on hidden menu open */


#on-hidden-menu.open ul {
display: block;
height: 100%;
}

#on-hidden-menu.open ul li {
    opacity: 1;
}


#on-hidden-menu.open ul li:last-child {
    border-bottom-left-radius: 5px;
}

/* toggle */

#on-hidden-menu .toggle {
width: 32px;
position: absolute;
top: -42px;
right: 10px;
height: 32px;
background-color: #f73a14;
z-index: 1;
cursor: pointer;
border-radius: 2px;
}

#on-hidden-menu .toggle:before, #on-hidden-menu .toggle:after,
#on-hidden-menu .toggle span:before {
content: '';
width: 4px;
height: 4px;
background: #fff;
border-radius: 5px;
position: absolute;
top: 17px;
left: 5px;
-moz-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

#on-hidden-menu .toggle:after {
left: 13px;
-moz-transition-delay: .1s;
-o-transition-delay: .1s;
-webkit-transition-delay: .1s;
transition-delay: .1s;
}

#on-hidden-menu .toggle span:before {
left: 21px;
-moz-transition-delay: .2s;
-o-transition-delay: .2s;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}

/* close */


#on-hidden-menu.open .toggle:before, #on-hidden-menu.open .toggle:after {
width: 20px;
-moz-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-o-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
top: 14px;
height: 3px;
}

#on-hidden-menu.open .toggle:after {
-moz-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
-o-transform: rotate(-225deg);
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
left: 5px;
-moz-transition-delay: .0s;
-o-transition-delay: .0s;
-webkit-transition-delay: .0s;
transition-delay: .0s;
}

#on-hidden-menu.open .toggle span:before {
top: 14px;
left: 13px;
width: 2px;
height: 2px;
-moz-transition-delay: .0s;
-o-transition-delay: .0s;
-webkit-transition-delay: .0s;
transition-delay: .0s;
}

Okay. So far so good. Then I want to fix the nav.html so it matches the collapsible code (forget about the aesthetics here for now - it's not a beauty but that could be fixed). I add the ID's to nav.html

<header>
<nav id="menu">
<ul id="menu">
<li><a href="{{site.baseurl}}/">sandsynlig<b>vis</b>.dk</a></li>
{% for node in site.pages %}{% unless node.nav_exclude %}{% if page.url == node.url %}
<li><a class="active"  id="menu" href="{{node.url | prepend: site.baseurl}}">{{node.title}}</a> </li>
{% else %}
<li><a id="menu" href="{{node.url | prepend: site.baseurl}}">{{node.title}}</a></li>
{% endif %}{% endunless %}{% endfor %}
</ul>
</nav>
</header>

which makes the collapsible navbar function. Sort or anyway. The width calculation is not working perfectly and the menu item pops in and out of existence until there's two items in the hidden part of the menu. Can anyone help with this and/or would help make it blend in with the rest of the Tufte-CSS format?

I can set up a (version) of the page so you can see what is wrong, but I haven't pushed it to the official server since it isn't working.

Hi,
thank you so much for this terrific port of Tufte's CSS to Jekyll!

Is it possible to use liquid in sidenotes? I would like to use Jekyll Scholar for references in the sidenotes but couldn't figure out how. I have tried several things but nothing worked so far. The only way of combining sidenotes with Jekyll Scholar I know of would be to use raw HTML. Is there a better solution?

Thanks for your help!

The tufte-jekyll theme is not working well when there are both list and mathjax equations in the same post.

Here is an example.

http://www.quxiaofeng.me/optimization/2015/07/17/augmented-lagrangian-method/

And the source:

https://raw.githubusercontent.com/quxiaofeng/optimization/master/_posts/2015-07-17-augmented-lagrangian-method.md

The major problem is that the width of mathjax div is 100% of the page.

And the sitenote in the last paragraph is out of the page below the footer.

Could you please help me check this?

Unlike margin_figure.rb, main_column_img.rb doesn't render Markdown in the figure caption.

Cf. From Edward Tufte, *Visual Display of Quantitative Information*, page 92 in the demo post.

I've tried to setup my MathJax so that it renders displaymath correctly if I use $$ instead of { math } but with little success.

If I follow the "instructions" and user {% math %} then everything is rendered correctly (in displaymath mode)

{% math %}y_i = b_1 + b_2 x_i + e_i,{% endmath %}

However, if I use LaTeX-like tag then I get the math rendered but the size doesn't not scale to displaymath (and there seems to be a problem with the main column/margin placement too):

$$y_i = b_1 + b_2 x_i + e_i,$$

The HTML-output is also slightly different.

<div class="mathblock"><script type="math/tex; mode=display">y_i = b_1 + b_2 x_i + e_i,</script></div>
<script type="math/tex; mode=display">y_i = b_1 + b_2 x_i + e_i,</script>

So somehow the $$-tags do not add the mathblock div. Is it possible to tweak that easily somehow?

I'm trying to get some of the htmlwidgets graphs to render in tufte-jekyll. I've looked at Brendan Rocks' wonderful instructions and packages like leaflet and dygraphs render nicely. However, I'm having some problems with the highcharter package.

Here's my code:

---
title: "Test"
layout: post
author: Me
published: true
comments: true
tags:
- reproducerbar forskning
---

```{r echo=FALSE}
knitr::opts_chunk$set(screenshot.force = FALSE)
```

```{r echo=FALSE, message=FALSE}
library(highcharter)
hchart(LakeHuron)
```

Has anyone managed to get the highcharter package to work with Tufte-Jekyll

Is something further needed to make the narrow-viewport feature appear? Your Github-hosted presentation is collapsing on a narrow screen (browser and phone) exactly as documented. But neither my local 'bundle exec jekyll serve' nor webhosted nginx presentation is: at all widths my presentations are substituting checkboxes for superscripts, showing the circled-plus expander for sidenotes and margin figures, and never popping into fullscreen width and hiding margin notes as screen narrows.

Thanks for any ideas. I really like this theme!

Hi,
I've just tried to build your theme under Ubuntu Xenial, using Jekyll 3.2.3 but this was the terminal output:

stormy@Stormbringer:~/GitHub/test$ jekyll build
WARN: Unresolved specs during Gem::Specification.reset:
      jekyll-watch (~> 1.1)
      rouge (~> 1.7)
WARN: Clearing out unresolved specs.
Please report a bug if this causes problems.
/usr/lib/ruby/vendor_ruby/bundler/runtime.rb:34:in `block in setup': You have already activated colorator 1.1.0, but your Gemfile requires colorator 0.1. Prepending `bundle exec` to your command may solve this. (Gem::LoadError)
	from /usr/lib/ruby/vendor_ruby/bundler/runtime.rb:19:in `setup'
	from /usr/lib/ruby/vendor_ruby/bundler.rb:92:in `setup'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/lib/jekyll/plugin_manager.rb:36:in `require_from_bundler'
	from /var/lib/gems/2.3.0/gems/jekyll-3.4.3/exe/jekyll:9:in `<top (required)>'
	from /usr/local/bin/jekyll:23:in `load'
	from /usr/local/bin/jekyll:23:in `<main>'

In tufte.css line 209 - 211, when the screen exceeds 800 px, the width of the body is set to 95%.

@media screen and (min-width: 800px) {
  body {
    width: 95%; } }

However, in line 198 - 207, especially the line 204, the padding-left is set to 8.4%. It is OK that normally the body width is 87.5% and the whole width is only 87.5% + 8.4% = 95.9%. But when the screen width is larger than 800 px, the width of the rendered page is 95% + 8.4% = 103.4% and there will be a navigation bar appearing at the bottom of the browser.

Maybe the maximum width of the body should be 100% - 8.4% = 91.6%. Or the padding-left should be reduced.

For example,

{% math %}{\bf \lambda}^{(t+1)} \leftarrow {\bf \lambda}^{(t)} + \rho({\bf D\beta}^{(t)} - {\bf \gamma}^{(t)}){% endmath %}

Same algorithm applies to a general regularization matrix {%m%}{\bf D}{%em%} (generalized lasso)

## Remarks on ADMM

Related algorithms

+ Split Bregman iteration {% sidenote 1 'Goldstein, T. and Osher, S. (2009). The split Bregman method for l1-regularized problems. SIAM J. Img. Sci., 2:323-343.' %}

+ Dykstra's alternating projection algorithm {% sidenote 2 'Dykstra, R. L. (1983). An algorithm for restricted least squares regression. J. Amer. Statist. Assoc., 78(384):837-842.' %}

+ Proximal point algorithm applied to the dual

+ Numerous applications in statistics and machine learning: lasso, gen. lasso, graphical lasso, (overlapping) group lasso, ...

+ Embraces distributed computing for big data {% sidenote 3 'Boyd, S., Parikh, N., Chu, E., Peleato, B., and Eckstein, J. (2011). Distributed optimization and statistical learning via the alternating direction method of multipliers. Found. Trends Mach. learn., 3(1):1-122.' %}

is rendered as follows:

The sidenote is rendered in the env of <ul><li><p></p></li></ul>. The width is computed within the <p> env, which is only the main column.

The markdown code can be found in:
https://github.com/quxiaofeng/optimization/edit/master/_posts/2015-07-18-alternating-direction-method-multipliers.md

The rendered result can be found in:
http://www.optimizations.ml/2015/07/18/alternating-direction-method-multipliers/

Hi,

Ordered lists seem to fill the full width of the page while unordered are rendered within the main column. Is there a way to make that consistent?

For example:

Check this out
* This is nice
* and looks fine

but

Check this out
1. This is not quite as nice
2. so what could be done?

I know of Tufte's aversion to lists but they are nice to explain, for example, steps in an algorithm.

margin-top is set in tufte.scss, but later, .listing .listing h3 overrides it with a generic margin: 0;

Subheadings on posts have no top margin separating them from headings or previous paragraphs.

Myself, I like that I can set the sidenotes labels myself, e.g. to use letters (and numbers for footnotes or citing).

However, in case you want them to be numbered but did not know how (I had to dig a while, for another plugin), this is how you can do it.

We use the context parameter that is passed to a tag's render method. It is cleared after every build, but not during a single page is built.

page = context.registers[:page]

if !page.has_key?("sidenote-number") # something unique
  page["sidenote-number"] = 0 
end
page["sidenote-number"] += 1

In the default setup tufte-jekyll is configured to put newlines where the original markdown had a single line word wrap. This forces users to use long lines (very inconvenient for versioning) and comes as a bit of a surprise as this is not the standard for most markdown interpreters.

The solution is to manually disable the hard_wrap option of kramdown in _config.yml like so:

    markdown: Kramdown
    kramdown:
        ...
        input: GFM
        hard_wrap: false  <-- here
        ...

Would you mind bringing that option into _config.yml either as a default or commented out (as it is likely a breaking change for existing blogs)? Anything that helps the next person figuring this out faster would be greatly appreciated. Thanks!

So, e.g. {% fullwidth 'blah/img/blah' 'Hi there this is a source' %} will just be printed as plain text.

On the Minima theme, I make my text go from right-to-left by using HTML:

<div dir="rtl"> </div>

With this theme, however, the RTL text is placed at the far end of the "notes marginal" instead of right side of the usual text area.

Any way to circumvent / fix this?

Hello :)
Is there any option to work directly with an .Rmd file?

Thanks,

Is your baseurl issue related to this? jekyll/jekyll#332 (comment) Are you sure it's your code that is causing the problem?

EDIT: I realize now that Jekyll variables are not available inside a Markdown post document, so site.baseurl needs to be added automatically within @clayh53's custom plugins.

The CSS specifies different font sizes for different window sizes, all the way up to 17px. I understand the idea behind that in principle.

However, it doesn't stop there. In full screen on my 22'' monitor, I get 23.8pt. That's way too large.

Where does this come from? Where in the CSS can I prevent that from happening?

Possibly related issue: jumping floating image.

Make the window a tiny bit broader:

When I start with a narrow window and increase width all the way up to screen width, the image jumps around multiple times.

Hi.

This may just be a liquid problem (or rather a user problem of not understanding the liquid tags) but I'd like to add a wee bit of inline math to a margin note with the following code

{% marginnote 'ID9' 'Yada yada yada. A {% m %} X^2 {% em %} test for this table yada yada yada' %}

However, that results in an error

Liquid Exception: Unmatched double quote:

and I'm guessing that I cannot nest liquid tags inside one another.

One option is to change the math start and end tags to $ (for inline) and $$ (for block) as is possible with other configurations of MathJax. Would doing that break a lot of things (and if no: can anyone point me in the right direction for this)?

The linkedin-icon appears to be missing from the icomoon font libraries.

Gemfile.lock prevents an easy build. Just running jekyll build will throw a large number of errors but works perfectly fine when Gemfile.lock is deleted.

jekyll serve or jekyll build is giving me the following errors:

/var/lib/gems/1.9.1/gems/bundler-1.10.6/lib/bundler/spec_set.rb:92:in `block in materialize': Could not find celluloid-0.16.1 in any of the sources (Bundler::GemNotFound)
    from /var/lib/gems/1.9.1/gems/bundler-1.10.6/lib/bundler/spec_set.rb:85:in `map!'
    from /var/lib/gems/1.9.1/gems/bundler-1.10.6/lib/bundler/spec_set.rb:85:in `materialize'
    from /var/lib/gems/1.9.1/gems/bundler-1.10.6/lib/bundler/definition.rb:140:in `specs'
    from /var/lib/gems/1.9.1/gems/bundler-1.10.6/lib/bundler/definition.rb:185:in `specs_for'
    from /var/lib/gems/1.9.1/gems/bundler-1.10.6/lib/bundler/definition.rb:174:in `requested_specs'
    from /var/lib/gems/1.9.1/gems/bundler-1.10.6/lib/bundler/environment.rb:18:in `requested_specs'
    from /var/lib/gems/1.9.1/gems/bundler-1.10.6/lib/bundler/runtime.rb:13:in `setup'
    from /var/lib/gems/1.9.1/gems/bundler-1.10.6/lib/bundler.rb:127:in `setup'
    from /var/lib/gems/1.9.1/gems/jekyll-2.5.3/lib/jekyll/plugin_manager.rb:37:in `require_from_bundler'
    from /var/lib/gems/1.9.1/gems/jekyll-2.5.3/bin/jekyll:16:in `<top (required)>'
    from /usr/local/bin/jekyll:23:in `load'
    from /usr/local/bin/jekyll:23:in `<main>'

I've noticed a minor glitch that I cannot seem to track down. You can actually see it in the Jekyll-Tufte documentation here. If you look at the bottom towards the highlighted code (search for "module Jekyll") you can see that the indentation on the first line does not match the coding style. There are an additional 2 spaces (roughly) on the first line - and this indentation occurs on the first line of all code blocks.

The raw code looks ilke this:

``` ruby
module Jekyll
  class RenderFullWidthTag < Liquid::Tag
  require "shellwords"

    def initialize(tag_name, text, tokens)
      super
      @text = text.shellsplit
    end

    def render(context)
      "<div><img class='fullwidth' src='#{@text[0]}'/></div> " +
      "<p><span class='marginnote'>#{@text[1]}</span></p>"
    end
  end
end

Liquid::Template.register_tag('fullwidth', Jekyll::RenderFullWidthTag)

As you can see the first line, `module Jekyll` is perfectly left-aligned, but it isn't in the output. Does anyone have a clue as to where in the css files those two extra spaces have been inserted? 

Hi,

Do you think it's possible to push the tufte epigraph css behavior ( https://edwardtufte.github.io/tufte-css/) into tufte jekyll ?

Thanks
SR

One option is to change the math start and end tags to $ (for inline) and $$ (for block) as is possible with other configurations of MathJax. Would doing that break a lot of things (and if no: can anyone point me in the right direction for this)?
#36 (comment)

Doing this requires adding this to the page:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>

This should be a configurable option as Mathjax has good reasons for not defaulting to using $ for inline equations as they describe here: http://docs.mathjax.org/en/latest/start.html#tex-and-latex-input

ping @ekstroem

There's a new Tufte-CSS Jekyll theme:

https://github.com/siawyoung/immaculate

Perhaps tufte-jekyll and immaculate might borrow and/or converge at some point to improve the Jekyll/Tufte experience for everyone.

Hi!

I'm trying to use the theme (great theme by the way!) to build my blog. Locally, everything is good. But when I pushed things to Github, it complained bout newthought Liquid tag:

The tag newthought on line 3 in _posts/2016-03-29-floating-point-numbers.markdown/#excerpt is not a recognized Liquid tag.

I couldn't find any reference to what might be the cause of this, I also don't know how to get any extra info from github build failure.

Reference to the repository with the site