I am trying to make syntax highlighting on my jekyll site work with the syntax for syntax highlighting that is also supported by github. Currently, I use this syntax to highlight my code:
{% highlight css %}
/* code */
{% endhighlight %}
Which does work fine on my site, but is not working on github. Instead, I need it to work with this supported syntax:
´´´ css
/* code */
´´´
It is a requirement that the syntax is also being highlighted on github. So I found this blogpost and followed it along. But it is not working. I don't get any errors, this part is just not interpreted by kramdown and is instead just turned into a <p>.
I tried installing an older version of jekyll 3.0 which also did not make any difference. I googled the problem and found many people having the same issues, but they got turned down rather fiercely by the people on github which is the reason why I am asking the question here instead of opening an issue on github. They say that this is a known bug resolved in 3.1, but I have 3.1.2 and it is not resolved for me.
I have also installed the rouge and kramdown gems (1.10.1 and 1.10). I believe, that jekyll just straight up ignores these settings in my _config.yml:
markdown: kramdown
kramdown:
input: GFM
syntax_highlighter: rouge
If anyone could maybe help on this, that would be great.
You're using ACUTE ACCENT ´ instead of GRAVE ACCENT `
Replace
´´´ css
/* code */
´´´
by
``` css
/* code */
```
Related
I'm using Jekyll with the minima theme.
In a recent post I made, someone pointed out to me that I can use nasm specific formatting with ~~~nasm - it's good to know that nasm is a supported language!
However, the syntax highlighting is pretty ugly, look at the red glow around the square brackets:
It it incorrectly indicating a syntax error, due to this bug.
Is it possible to override the style for those brackets and other aspects of the code samples?
Save https://raw.githubusercontent.com/jekyll/minima/master/_sass/minima.scss to _sass/minima.scss
Save https://raw.githubusercontent.com/jekyll/minima/master/_sass/minima/_syntax-highlighting.scss as _sass/minima/_syntax-highlighting.scss
You can now modify your syntax highlighting in _sass/minima/_syntax-highlighting.scss.
Recently I got the chance to learn Jekyll, and found how amazing and powerful Jekyll is. Liquid tag is easy and convenience to use with so far one restriction. Anyway, I use Visual Studio Code and it complains about using the liquid tag inside inline css, so I start to think either this is not the right practice to use liquid tag? Where should we not use liquid tag and why?
I did searching and came to conclusion that this is a common practice to use liquid tag inside inline css;
Jekyll liquid variables as inline CSS values
Note
By the way, the code compiles and runs but visual studio code complains about the liquid tag {{ }} inside the style attribute style="".
Add images
I am using jekyll to generate my site and markdown files for creating posts.
I wrote markdown code to generate http://techtaste.in/blog/markdown/markdown-quick-reference.html. And I have used same content in https://github.com/Raghavendrak555/chari.github.io/blob/master/testMarkdown.md. These two pages render differently. Former one does not has syntax highlighted and latter one has.
What I can do to get the same sort of display for a markdown file in my site, same as it display in the github site.
Do I have to link any specific CSS file to achieve this or any config settings are needed in _config.yml.
Thanks in advance.
Do I have to link any specific CSS file to achieve this
Yes, exactly.
First you need to specify the markdown renderer and its syntax highligher. I use this:
markdown: kramdown
kramdown:
syntax_highlighter: rouge
(I'm not sure if this is strictly necessary, but it's what I do and it works for me.)
The syntax highlighter wraps your code in a bunch of span elements with particular classes depending on what color it should be. (On GitHub, inspect the highlighted code to see what I'm talking about.) Then you need to include CSS files that specify colors for each of those classes.
To find these CSS files, do a google search for "rogue syntax highlighting css files" or "pygments css" (rogue and pygments use the same class names). Here is a good list, but according to this you might have to change one class name.
See also: Add syntax highlighting to gh-pages
I've just started using HAML in Sublime with Emmet installed. My only gripe is to autocomplete my tags I would have to do something like this for it to convert: p|haml when alternatively I could type %p, thus defeating the purpose of speed. While some may not see this as an issue I'd much rather follow the same convention of Emmet's standard html functionality where all I'd have to do is type the letter of the HTML tag and hit tab vs. shift + % + tag. Codepen accomplishes this exactly where all I have to do is enable HAML and it takes care of the rest. Is there an existing method or snippet that I can use that mirrors this functionality?
At CodePen we didn't custom code anything to make it work, we use CodeMirror and Emmet for CodeMirror
https://github.com/emmetio/codemirror
Maybe you can dig through there and find what makes it work =)
Found out that in order to use the snippet mentioned in my question that you must explicitly be in a .haml file.
Emmet applies haml filter for HAML syntax, but it may fail to do so in some editors. For example, when you forget to set current document syntax to HAML or (according to your sublimetext tag) you’re using some custom HALM syntax that Emmet can’t recognize.
I've inherited some rather large static HTML files that need to be fixed up to work in webkit-based browsers, Safari in particular. One of the common bugs I've found that cause rendering differences is missing </div> tags. (Both IE7+ and FF3+ seem to ignore these, or make good guesses as to where to close the DIVs, and render as expected.) I'm used to using vim with HTML syntax highlighting for editing, but end up writing awk scripts to match starting and ending tags.
What is your favorite tool or technique for matching start and end tags in a large HTML file?
UPDATE: I'm currently in a shop that targets HTML 4.01 Strict, not XHTML.
The W3C HTML Validator works fairly well, or if you want something a little simpler then the Tidy FireFox plugin also works.
The w3c Validator can be (extremely) verbose, but it does check for missing closing tags.
HTML Tidy is a great command line tool. I often use it with WGet
Most IDE's usually let you know via highlighting, fuzzy-underline or a warning.
Div Checker is a great tool that focuses on div tags specifically.
While other tools were only able to tell me that "some tag was missing somewhere".
Div-Checker removes other tags, code, and most comments, to create a clean visual structure of just the divs themselves.
From this div map, it's fairly easy to see if nested divs are correctly paired !
I was able to locate a missing div left out by a wordpress theme developer, with the help of this tool.
Here is the Posted Answer from #noah-whitmore that enlightened me to this awesome tool.
There are a couple other useful tools mentioned in that thread as well, such as unclosed-tag-finder (visually not so easy to read, but helpful if your missing tag is not a div).
vim/gvim & NetBeans both do a great job of tag matching
What is your favorite tool or technique for matching start and end tags in a large HTML file?
A text editor with a built-in XML well-formedness checker, combined with using XHTML for everything.
Sublime Text with the Tag plugin has a Tag Lint feature which which aims to check correctness of opened and closed tags.