I have switched from github pages to hosting my own site. As a result of this migration I got the syntax highlighting blocs to be nested.
<div class="highlighter-rouge">
<div class="highlight">
<pre class="highlight">
<code>
... ... ...
</code>
</pre>
</div>
</div>
When rendered it looks like:
The style related settings in _config.yml are:
kramdown:
syntax_highlighter: rouge
sass:
style: :expanded
Setting syntax_highlighter: none removes the highlighting related classes (this is just to give more info, the code is just verbatim then, not highlighted in a block):
<pre>
<code>
... ... ...
</code>
</pre>
Looking for ideas on how to diagnose this further?
There seems to have been a related discussion about this previously happening here.
The solution is to modify a css entry in _sass/_highlights.scss so that .highlight is replaced with pre.highlight
Related
I'm learning Jekyll, and I have this basic file, which is prefaced by YAML frontmatter:
---
layout: 'post'
---
> Test Quote
I've successfully managed to link my CSS stylesheet to the top wrapper page.html file. But there's a problem in that when Jekyll turns this Markdown into HTML, it turns this quote into:
<blockquote>
<p>Test Quote</p>
</blockquote>
Yet I need it to generate into:
<blockquote>
<div class="quote-line-container">
<div class="quote-line"></div>
<div class="quote-mark">“</div>
<div class="quote-line"></div>
</div>
<div class="quote-container">
<p class="quote">Test Quote</p>
</div>
</blockquote>
I've tried searching every variation of the words "Jekyll change Markdown HTML output" I can and no relevant results appear for my case.
How could I do this, and change the Jekyll output? Or is there a better way to generate something like this, using CSS or something?
This is not possible to do. Jekyll uses Kramdown as its Markdown engine and the customization of the process is pretty limited (as one would expect). You can see all the options here.
For this reason, your alternatives are:
Making your own Markdown engine for Jekyll (which is clearly overkill).
Making some preprocessing script to call before Jekyll only to perform that substitution. If you have a lot to translate, it is your best alternative.
Writing your blockquotes directly as you want them generated. Jekyll will leave your HTML code intact during the Markdown translation, so the result will be the one you want.
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.
Prettier does a very nice job on HTML generally, but indents pre>code blocks.
I always want pre>code blocks unindented.
Seems like I should be able to configure this in .prettierignore, but can’t find a way that works.
blocks like:
<pre class="line-numbers"><code class="language-json">"operations": [
"video-cloud/video/all",
"video-cloud/playlist/all",
"video-cloud/sharing-relationships/all",
"video-cloud/notifications/all"
]</code></pre>
Get indented like this:
<pre class="line-numbers"><code class="language-json">"operations": [
"video-cloud/video/all",
"video-cloud/playlist/all",
"video-cloud/sharing-relationships/all",
"video-cloud/notifications/all"
]</code></pre>
I want the block left untouched.
Quoting from a deleted answer:
I personally don't use the extension but it seems like prettier has build in configuration for it: https://prettier.io/docs/en/ignore.html
IIUIC, the solution is
<!-- prettier-ignore-start -->
block to keep
<!-- prettier-ignore-end -->
Voting to undelete the answer by "cas v.l." as it led me to the solution in seconds.
You can ignore certain files, but you can't ignore parts of the code.
For future reference. In my case, I'm working on a react project. Adding "{` ..your code.. `}" after pre tag, prettier ignores the block. For example:
<pre>
{`
<div className="row">
<div className="col">
...
</div>
</div>
`}
</pre>
If we have this block:
```java
System.out.println("foo");
```
how can replicate the above with <pre> tags?
<pre lang="java">
System.out.println("foo");
</pre>
is there a class or attribute we can add to the pre tag to tell github markdown to know which language is in there?
Try with this
<pre>
<code class="language-java">
System.out.println("foo");
</code>
</pre>
Found it on GitHub Flavored Markdown
It looks like Jekyll plugins provide a way to alter the transformation from Markdown to HTML, but I'm not sure where to get started.
Say I wanted to apply a CSS class to all of the paragraphs in a post. How do I do that? E.g. I've got a post:
---
title: "my cool post"
...
---
Hey I want this paragraph wrapped in a class called my-custom-class
And the HTML outputs:
...
<p class="my-custom-class">Hey I want this paragraph wrapped in a class called my-custom-class</p>
...
If I'm mistaken about plugins, I'm cool with another solution (other than manually adding the class to each paragraph in the Markdown).
Using Kramdown IALs
To apply styles to just one paragraph you can use kramdown's IAL, after writing the paragraph apply the class you want with {: class="my-custom-class"}
---
title: "my cool post"
...
---
Hey I want this paragraph wrapped in a class called my-custom-class
{: class="my-custom-class"}
Using SCSS
If you want to apply the custom style to all your posts paragraphs,
wrap your posts content with a specific class like <div class="post">...</div>
edit your SASS with a custom style that affects only to .post p like:
.post {
p {
#my-custom-style properties..
}
}
As a side note, remember also that you can always add plain html in markdown like:
<div class="my-custom-style">
Some cool paragraph
</div>
Apparently you need to use
{::options parse_block_html="true" /}
<div class="my_class">
...
</div>
{::options parse_block_html="false" /}
to parse the markdown between the html.
How to add class to group of markdown code including header and code and text
Like below:
# header
some text
paragraph with
```Matlab
clc;
clear all;
t=1:10;
a=sin(t);
plot(a)
```
___bold and italic text___
` some other code`
I want to all container class to all the above starting form header
`{: class="container"}`
works only for the last line of code
and if I group it in any html container like div or p or span them markdown don't work even if I add markdown=1
Like this:
<div markdown="1">
# header
some text
paragraph with
```Matlab
clc;
clear all;
t=1:10;
a=sin(t);
plot(a)
___bold and italic text___
`some other code`
<div>
then markdown doesn't work.