I'm trying to create a Jekyll project on Github, styled with Material Design Components. MDC states that Elements are not natively styled, which means that most (if not all) elements will need to be styled with classes. What this means now is that
<div class="mdc-typography">
<div class="mdc-layout-grid max-width">
<div class="mdc-layout-grid__inner">
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
```js
// some js
```
</div>
</div>
</div>
</div>
doesn't actually render the code as expected. Rather it renders as plain text. I guess I'm a little new to this. But what is the proper way to nest fenced code blocks within div tags with classes?
The rule for markdown is that it must be indented at least 4 spaces. I am aware of this.
If you are writing this on your jekyll project use
{% highlight javascript %}
{% endhighlight %}
Jekyll Docs
Here is another stack question similar to yours: link
Alternatively, you can style it like it's code.
Related
The problem
My post containing some code blocks renders them like "box in a box".
This is the post: https://telatin.github.io/N50-with-conda/ and here what I see from Firefox: http://prntscr.com/oujb6u
The code
This is the source code: https://raw.githubusercontent.com/telatin/telatin.github.io/master/_posts/2019-08-19-N50-with-conda.md
I'm new in using Jekyll, and I tried both triple backticks (as I usually do in GitHub, and the four-spaces at the begin of the line (current implementation). Both renders the same.
Question
I don't understand if the problem is in the code I write or in the template I'm using. What should I do to have a nicer output (single framed)?
If you inspect the generated HTML, you'll see that there are nested blocks with the same class .highlight:
<div class="highlighter-rouge">
<div class="highlight">
<pre class="highlight">
<code>CHECK=$(n50 contigs.fasta)</code>
</pre>
</div>
</div>
What you can do is alter your CSS to be more specific:
i.e. instead of .highlight, use div.highlight for base code-block styles and use
div.highlight > pre.highlight to style the pre block elements if required.
What I am trying to do:
I am attempting to create a web page with Angular2 which shows HTML on the screen in much the same way many websites do such as stackoverflow, css-tricks, and and w3schools (to name a few). I would like to be able to copy the code and paste it somewhere else after its shown on screen.
What I know:
I have come to realize that it will probably be necessary to convert all of my opening tags ( i.e., < ) to < and to convert all of my closing tags ( i.e., > ) to >, however I am still not sure what the best way to interpolate some variables into the template.
For example, I have this in my template file:
<div>{{myTitle}}</div>
<div><p>{{mySubTitle}}</p></div>
<div>
<ul>
<li>{{item1}}</li>
<li>{{item2}}</li>
<li>{{item3}}</li>
</ul>
</div>
What I want to see (and be able to copy) in the browser:
<div>This is my title</div>
<div><p>This is my subtitle</p></div>
<div>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Durian</li>
</ul>
</div>
Stack overflow makes this really easy and nice to accomplish by letting you highlight the code you want to display on screen and clicking the {} button in the editor. However, when I try using the <pre> and <code> tags in my Angular2 app, I do not get the same result, I cannot see the actual HTML elements like <div> and <li>.
Instead what I see is:
{{myTitle}}
{{mySubTitle}}
{{item1}}
{{item2}}
{{item3}}
I have used handlebarsjs in the past and am familiar with that library but I was under the impression that using Angular2 would eliminate the need for handlebarsjs. Does anyone know how to accomplish what I am trying to do in Angular2 without handlebarsjs?
For < and > you'll probably need to use < and >.
For the braces in template expressions you may want to use ngNonBindable directive.
<div ngNonBindable> {{myTitle}} </div>
Use <pre> or <code> for HTML to become rendered verbatim.
<pre ngNonBindable>
<div>{{'{{'}}myTitle{{'}}'}}</div>
<div><p>{{'{{'}}mySubTitle{{'{{'}}</p></div>
<div>
<ul>
<li>{{'{{'}}item1{{'{{'}}</li>
<li>{{'{{'}}item2{{'{{'}}</li>
<li>{{'{{'}}item3{{'{{'}}</li>
</ul>
</div>
</pre>
You need to escape { and } (for example like shown above)
I want to introduce hash links to the headings of a page into the menu of a web page. The web page is generated with Jekyll and it's default layout looks as follows:
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div id="BigFatContainer">
{{ content }}
{% include footer.html %}
</div>
</body>
</html>
It is in the header that the menu for navigating to the different pages is located. I've been able to add a table of contents to the {{ content }} with the help of the following Kramdown command:
* Point at which the TOC is attached
{:toc}
One could use some ugly JavaScript hack to move this table of contents from the {{ content }} and into header.html but that'd be a bad solution. It's not possible to place the {:toc} macro inside header.html since that's not parsed by Kramdown, and even if you make sure that it's parsed by Kramdown using for example this plugin it outputs the TOC of header.md instead of the TOC for the content.
#miroslav-nedyalkov was on the right track here. Following his suggestion of looking at the Bootstrap documentation, I found that it uses a Ruby Gem - jekyll-toc that allows you to place a TOC anywhere in a layout file. You enable it in the front matter. I'm now successfully using:
<nav aria-label="Table of Contents">
{{ content | toc_only }}
</nav>
<section itemprop="articleBody">
{{ content }}
</section>
I would suggest you to use the approach Bootstrap website (scroll down and observe the right navigation area) is using - make your TOC as part of the content area, but style it to be placed on the side like main navigation. The main reason I'm suggesting you this approach is that you may (and most probably will) have more than one page. In this case you will need to display different page navigation for every page and display some navigation between the pages.
For more information you may refer to this article - http://idratherbewriting.com/2015/01/20/implementing-scrollspy-with-jekyll-to-auto-build-a-table-of-contents/
Why moving the toc block ?
This is correct to say that this toc is part of the page content. Semantically speaking.
You problem here is not at the document structure level but at the presentational one.
In this case the use of CSS is recommended to solve your problem.
So I was wondering if anyone knows of a package/plugin for sublime or a service that lists class attributes within an HTML snippet.
For example I like to markup then work on the css. I keep finding myself splitting sublime into two halves and just manually scrolling through the HTML on the left and rewriting the the actual class name styles on the right.
Basically I have:
<section class="home-testimonials">
<h2 class="home-title">
<span>Testimonials</span>
</h2>
<div class="testimonial-wrapper">
<!-- Other divs with classes -->
</div>
</section>
And I want a list like this:
.home-testimonials
.home-title
.testimonial-wrapper
If it denotes hierarchy position even better. Thanks in advance!
I'm not sure about Sublime, but with regular JS you can select all elements with document.getElementsByTagName('*'), and then extract classes for each element with element.className.
I've seen some posts saying you can only pass literal strings to Jekyll's front matter include statement like so:
{% include mypage.ext %}
However, I have the following HTML layout for pretty much every page:
<section id="feature">
<div class="container_12">
<div class="grid_12 alpha omega">
{% include myfile.ext %}
</div>
</div>
</section>
<section id="main">
<div class="container_12">
<div class="grid_12 alpha omega">
{{ content }}
</div>
</div>
</section>
This would be painful to have to include in every single page in order to achieve the layout I'm looking for. The included file would be relevant to the current page, so I was hoping someone knew of some kind of way to do this. Of course it'd be something along the lines of:
{% include {{page.file}} %}
I've seen some other posts saying this just can't happen though.
So, I just want to be able to dynamically load includes in Jekyll.
Edit: https://github.com/mojombo/jekyll/issues/176
This will be perhaps possible when that issue will be fixed with the pull request #1495 which propose exactly what you are looking for : {% include {{page.file}} %}
This is currently intentionally not possible, as the maintainers of Jekyll don't want the project to get too dynamic. You can read this comment & thread for a bit of background. The suggestion that qrush (the maintainer) gives is to use rails or sinatra. Probably not the answer you're looking for, but that's the current status.
If you want to use a plugin, there's one that will let you do this here