I am trying to create some fenced in code blocks on my gh-pages blog, but I am encountering some issues.
This is within my _config.yml
#Stuff I have added
highlight: rouge
markdown: kramdown
kramdown:
input: GFM
highlighter: rouge
Now I am attempting to run this code as follows,
~~~
Is this really how code should be represented?
Answer = NO!!!
~~~
but this is
Please help, I just want the nice fenced code structurem Thanks!
Try creating fenced code blocks with triple backticks ``` instead of triple-tilde ~~~
```
Is this really how code should be represented in GFM?
Answer = YEP!!!
```
It is not showing a fenced block for the source code because there is no source code.
If you don't specify anything then it will use:
<div class="highlighter-rouge"><pre class="highlight"><code>
Is this really how code should be represented?
Answer = NO!!!
</code></pre>
</div>
You always have the option to customize the output using the generated classes like highlighter-rouge.
On the other hand, if you specify a language:
~~~ html
<html>
<body>
<p>Is this really how code should be represented?</p>
<div>Answer = NO!!!</div>
</body>
</html>
~~~
then it will generated more spific styling:
<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt"><html></span>
<span class="nt"><body></span>
<span class="nt"><p></span>Is this really how code should be represented?<span class="nt"></p></span>
<span class="nt"><div></span>Answer = NO!!!<span class="nt"></div></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre>
</div>
If you still aren't able to see any default syntax highlighting, then the css containing those classes is missing, typipcally Jekyll comes with _syntax-highlighting.scss where it already contains them, but you can use the color scheme you want, for example the default theme uses this one: https://github.com/jekyll/minima/blob/master/_sass/minima/_syntax-highlighting.scss
Or you can install whatever Rouge theme you want: https://github.com/jneen/rouge/tree/master/lib/rouge/themes
$ rougify foo.rb
$ rougify style monokai.sublime > syntax.css
Related
So I am building my first data blog with RStudio and Blogdown and I am seriously stuck on something small but infuriating.
https://data-issues.netlify.app/
Above is the site I am building. I made a logo for it but I would like to make this centered. How would I do so in my markdown (.md) file.
Code here:
---
# Homepage
type: widget_page
# Homepage is headless, other widget pages are not.
headless: true
weight: 1
design:
columns: "1"
---
{{< figure src=/datavision.png theme="light" class="center">}}
EDIT: added this too to no avail
<p align="center">
</p>
I am using .md files, so where exactly would I define the shortcode for p if not here?
As #YihuiXie said in the comment section below, you don't really need to use a shortcode for raw HTML, there are multiple solutions that you can use.
Edit your config to use raw HTML in Markdown
In your config.toml enter:
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
If you have in your project config.yaml use this:
markup:
goldmark:
renderer:
unsafe: true
This enables raw html support in markdown files, in this way you don't need to use shortcodes.
https://gohugo.io/news/0.60.0-relnotes/
Raw HTML using Shortcodes
Depending how your project is structured, there should be some kind of layouts folder. I have a project made with Hugo and I have a something like this ../layouts/shortcodes/rawhtml.html with this code:
{{.Inner}}
For example in your code you're already using a Hugo’s Built-in shortcode. After you create the file, you just need to insert your shortcode in this way in your Markdown:
{{< rawhtml >}}
<img src=/datavision.png class="center">
{{< /rawhtml >}}
The custom CSS code should be defined in ../static/css/, in your config.toml, simply check if there is a variable to set your custom CSS code, for example:
# Custom CSS
customCSS = ["/css/custom.css"]
I used this configuration because the theme required it, but it can be different in your project so keep this in mind. If you don't want to use another file to save your CSS code, you can simply insert it into your shortcode like I did with the HTML, for example:
{{< rawhtml >}}
<style>
.center{
/* your code here */
}
</style>
{{< /rawhtml >}}
Use HTML for content pages instead of Markdown
With Hugo, you could also use a HTML instead of a md file in your project. It simply follows the same syntax, but you have to use HTML instead of the Markdown syntax, for example:
---
title: "Contact me"
---
<p>
Some text here
</p>
In this case you don't need the shortcode from the moment you're already using a HTML.
I want to fully disable indented code blocks for Kramdown as used in Jekyll. I am used to using the backtick method. And my primary reason for disabling indented code blocks is that I use a fair bit of html in a typical post.md, I have provided an example of that below:
<div class="notice--danger" markdown="1">
<details>
<summary>
<svg class="icon"><use xlink:href="#icon-youtube-square"></use></svg>
</summary>
<div markdown="1">
<figure>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID?playsinline=1" frameborder="0"></iframe>
</figure>
</div>
</details>
</div>
The issue is that with indented code blocks enabled, this gets caught up as a code block. There is an existing workaround, which is to just not indent any of the above code, in which case this will render as expected. But I want to format the code properly for a number of reasons (best practice, and mainly, so I can collapse the code in an editor like atom, vim, etc.)
Is there a way to do this. I found two other posts, saying there might be a way to cut out the indentated code blocks feature of kramdown and side load it into my Jekyll. But those posts just state that it may be possible.
I would like to do this if possible. Also, here is the kramdown specific parts from my config.yml:
markdown : kramdown
kramdown:
toc_levels : 1..3
input : GFM
hard_wrap : false
auto_ids : true
entity_output : as_char
smart_quotes : lsquo,rsquo,ldquo,rdquo
enable_coderay : false
Thank you.
You can disable kramdown parsing with a markdown tag attribute.
<div markdown="0">
<p>No kramdown parsing here</p>
</div>
Must read : https://kramdown.gettalong.org/syntax.html#html-blocks
From Kramdown's author:
Indented code blocks are part of the Markdown syntax, so the kramdown
and GFM parsers are using them. If you don't want them, the easiest
way would be to create a custom parser based on the kramdown (or GFM)
parser and remove the indented code block parsing routine. Have a look
at
https://github.com/gettalong/kramdown/blob/master/lib/kramdown/parser/markdown.rb
to see how to create such a custom parser.
Source: Ability to disable indented code blocks
Just started jekyll, and I want to display a link to one of my posts on the index.html page. I looked through the documentation and the following code appears to be what I'm suppose to do.
The following is in index.html
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
but it simply displays
.....
[Hello World]({% post_url 2015-01-19-soccer %})
.......
what am I doing wrong?
Since you used a mix of Markdown and HTML, which is causing the markdown processor to ignore anything in between the HTML blocks.
Markdown is also sometimes not processed when you have HTML right above the Markdown. (This is the case for you, since your example shows you have closed off the <p> tags)
There are a few ways around this.
Make sure there is a newline in between any HTML and Markdown, this will not show up as a <br> or a <p> in the final output, but rather ensures that the processor will convert the Markdown correctly.
So you should have something like this:
<p>......</p>
[Hello World]({% post_url 2015-01-19-soccer %})
<p>........ </p>
Notice the extra line there between the first <p></p> and the Markdown.
Use only HTML (this is as answered by user #topleft)
Use only Markdown, since <p> tags are supported.
Try the markdown=1 HTML attribute.
Markdown processors like Kramdown allow you to add an explicit tag to tell the processor to go through HTML blocks and process any Markdown there. I'm assuming you're using the default (which I believe is Redcarpet) and couldn't find the links on whether this is supported. But you can try this:
<div id="someDiv" markdown=1>
[This is a Markdown link that will be parsed](http://www.example.com)
</div>
You are using markdown language here, it won't work in html. You need to use that instead :
Hello World
site.baseurl default is empty
you can change it in _config.yml to suit your needs
for instance :
baseurl: "me/blog"
I have a Jekyll site that uses kramdown for markdown. In _config.yml I have the following setting that ensures that only <h2> and <h3> elements show up in the automatically generated table of contents:
kramdown:
toc_levels: "2,3"
This works fine, but on some pages I would like to include <h4> elements in the TOC as well, while retaining the existing <h2> and <h3> configuration on other pages. Is this possible?
On any page I can access the _config.yml definitions like this:
{{ site.kramdown.toc_levels }}
Is there a way to set the value of the toc_levels on a page?
I looked through the codes. It appears page-level settings are not possible for Kramdown at this moment. You are left with {:.no_toc} option to suppress unexpected tags.
I'm trying to make a website with Jekyll, but everytime I use #something to get a first level heading tag of <h1>something</h1>, instead I get <h1 id=something>something</h1>
What am I doing wrong?
A better bet would be to put the option into your _config.yml file, then you don't need to include it in every markdown file.
For kramdown you'd need to include:
kramdown:
auto_ids: false
Source: http://jekyllrb.com/docs/configuration/
well, let me give myself some sort of answer.
apparently if I add this to my markdown file:
{::options auto_ids="false" /}
then auto id generation turns off. I'm using Kramdown as a parser.