Why the "linenos" option fails to add the line number in Jekyll? - syntax-highlighting

I am using jekyll to generate my website. I want to add a line number column to my code block. I searched google, and everyone told me to add a "linenos" option to the hightlight tag, but i doesn't work in my case:
{% highlight ruby linenos %}
def foo():
puts 'foo'
end
{% endhighlight %}
The highlight is working well, but the line numbers....
Could you help me with this? If you want to see the source css/html files, hit here.
Thanks!
Further checking:
the html generated for this section is :
<div class="highlight"><pre><code class="ruby">
<span class="k">def</span> <span class="nf">foo</span><span class="p">():</span>
<span class="nb">puts</span>
<span class="s1">'foo'</span>
<span class="k">end</span>
</code></pre></div>

I cloned your repo, generated the site, and check it out in the browser. Everything looks fine. (I like your layout!) That indicates to me that there's something funky in your setup. Is the code highlighting working for you? If not, you may not have Pygments set up correctly.
To install:
sudo apt-get install python-setuptools
sudo easy_install Pygments
To generate the css:
pygmentize -S default -f html > default.css
Make sure you have pygments: true in your _config.yml.
Make sure to place this stylesheet appropriately and include it in your default.html.
I see that you already have this stylesheet included in your page and your _config.yml seems fine, but for anybody else needing this answer, there it is.
If you generate the site with jekyll --no-auto do you see any errors in the output?
Let me know, and I'll be glad to try and help further. :)
Update: This is the HTML that's generated for me for the highlight test blog post you have.
<div class="highlight"><pre><code class="c"><span class="lineno">1</span> <span class="cp">#include <stdio.h></span>
<span class="lineno">2</span>
<span class="lineno">3</span> <span class="kt">int</span> <span class="nf">main</span><span class="p">()</span>
<span class="lineno">4</span> <span class="p">{</span>
<span class="lineno">5</span> <span class="n">printf</span><span class="p">(</span><span class="s">"Hello World!</span><span class="se">\n</span><span class="s">"</span><span class="p">);</span>
<span class="lineno">6</span> <span class="k">return</span> <span class="mi">0</span><span class="p">;</span>
<span class="lineno">7</span> <span class="p">}</span>
</code></pre>
</div>

I was just experiencing the same issue with pygments and jekyll. My markdown looked as
{% highlight c# linenos %}
//my code
{% endhighlight %}
and the resulting generated HTML
<div class="highlight">
<pre>
<code class="c">
...
</code>
</pre>
</div>
The highlighting was somehow odd and no line numbers have been added. Ultimately the problem was that Pygments apparently didn't recognize "c#" as a valid language, but instead I had to add "csharp".
(just in case someone else has this issue when setting it up)

I did the same thing. Although line number were showing the css wasn't being beautiful. The main reason was that bootstrap was conflicting with my style.css. Adding the following to the style.css resolved it.
.highlight pre {
background-color: transparent;
border: transparent;
color: inherit;
}

Related

Bootstrap bootstrap.bundle.js does not work for Button Dropdown on Laravel Project

In a fresh Laravel project, I've included Bootstrap 5 'npm install bootstrap' and imported in /resrouces/sass/app.scss #import "~bootstrap/scss/bootstrap"; - great, it works.
Now I have a dropdown component that is not working, and I can't figure out why.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="user_select" data-bs-toggle="dropdown" aria-expanded="false">
Select...
</button>
<ul class="dropdown-menu" aria-labelledby="user_select">
<li><a class="dropdown-item" href="user/1">user 1</a></li>
<li><a class="dropdown-item" href="user/2">user 2</a></li>
</ul>
</div>
Very simple button...
When I click on the button, nothing happens. There's no console error or anything.
Bootstrap Official doc states Plugins can be included individually (using Bootstrap’s individual js/dist/*.js), or all at once using bootstrap.js or the minified bootstrap.min.js (don’t include both).
import Bootstrap from 'bootstrap/dist/js/bootstrap.bundle.js';
require('Bootstrap');
npm run dev >> ERROR in ./node_modules/Bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in '/Users/Developer/code/project/node_modules/Bootstrap/dist/js'
# ./node_modules/Bootstrap/dist/js/bootstrap.js 7:101-121
Tried adding Popper.
window.Popper = require('#popperjs/core/dist/umd/popper').default;
import Bootstrap from 'bootstrap/dist/js/bootstrap.bundle.js';
require('Bootstrap');
npm run dev >> ERROR in ./node_modules/Bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'popper.js' in '/Users/Developer/code/project/node_modules/Bootstrap/dist/js'
# ./node_modules/Bootstrap/dist/js/bootstrap.js 7:101-121
If I do it like this, it compiles successfully, but dropdowns do not work still. I've made sure to clear caches, and even tried it in incognito windows every time.
window.Popper = require('#popperjs/core/dist/umd/popper').default;
require('bootstrap/dist/js/bootstrap.bundle.js');
What am I missing?
I don't know if this is the ultimate solution, but this worked.
I ran npm install boostrap#next which points to version 5.0.0.0-beta2 and npm run dev and it worked.
Turns out that I don't need to specify window.Popper = require('#popperjs/core/dist/umd/popper').default; after all and just require('bootstrap/dist/js/bootstrap.bundle.js'); did the job.

Error "property value expected css" and "at-rule or selector expected css" editing Go template in VSCode

I'm using Go and package html/template. This is my code in mypage.tmpl:
<div class="col-sm-1">
<i class='fas fa-square companies-color' style="color: {{.Company.Color}}"></i>
</div>
But I get errors in VSCode:
property value expected css(css-property value expected)
and
at-rule or selector expected css(css-rule selector expected)
when I try {{ }} in style html.
I have found solution. Turn off html validate styles in setting's vscode
Hi I fixed this this by installing the Django extension in VsCode

Using SCSS/SASS in Shopify

Can't seem to get SCSS working in Shopify.
My CSS file name 'styles.scss.liquid':
$turquoise: #35d7db;
#toolbar {
width: 100%;
display: inline-block;
background-color: $turquoise;
}
And my HTML in Shopify:
{{ 'styles.scss' | asset_url | stylesheet_tag }}
<div id='toolbar'>
<p>Tools go here</p>
</div>
The color is not showing up, not at all sure what the problem is. Appreciate any advice.
Cheers, DB.
It should be {{ 'styles.scss.css' | asset_url | stylesheet_tag }} You need to add .css too.
Using Liquid in Sass files
When you compile Sass on Shopify servers,
you'll create a style.scss.liquid file. Shopify then compiles the
Liquid first, then the Sass, to create the final CSS file.
Source: A Beginner's Guide to Sass with Shopify — Part 3
Made this work using site.scss.liquid file in the /assets folder and adding it to the theme.liquid file between the head tags: {{ 'site.scss.css' | asset_url | stylesheet_tag }}
Documentation found in https://shopify.github.io/slate/docs/styles-with-liquid
For example, if you were to upload a styles.scss.liquid file, you
could include it in your theme with the following markup:
<link type="text/css" href="{{ 'styles.scss.css' | asset_url }}" rel="stylesheet">

Using Liquid tags in a Jekyll page not working

I am attempting to setup a small blog using Jekyll. My work so far is as follows.
Setup a Github pages repository
Cloned the repo locally
Installed Ruby vs 2 and the sdk (windows)
Installed jekyll
'serve' the local website.
Validated that I could view my website localhost:4000
Everything worked fine however the liquid syntax is not working as expected. All syntax is output as plane text. I am not sure how to continue. This error happens both locally as well as on my github hosted page.
Here is my index.html file
<!DOCTYPE html>
<html lang="en-us">
<head>
{% include meta %}{{ site.time | date_to_xmlschema }}
</head>
<body>
{% include header.html %}
{% include header.html %}
{% include header.html %}
{% foo %}
{{ foo }}
<section class="main-content">
{% include footer.html %}
</section>
{% include scripts.html %}
</body>
</html>
My _config.yml has foo defined. =(
If you want Jekyll to process your page, you must add a Front matter to your page (see dedicated page in Jekyll documentation).
The minimum front matter is an empty one. That means that your page will use default configuration for layout, etc ..
---
# this is an empty front matter
---
Your content here

jekyll: Invalid Date: '' is not a valid datetime

I am new to jekyll:
So far I had done what the tutorial has mentioned: This is what I have in _layout: post.html file:
---
layout: default
---
<div class="post">
<h1>{{ page.title }}</h1>
<span class="post-date">{{ page.date | date_to_string }}</span>
{{ content }}
</div>
<div class="related">
<h2>Related Posts</h2>
<ul class="related-posts">
{% for post in site.related_posts limit:3 %}
<li>
<h3>
<a href="{{ post.url }}">
{{ post.title }}
<small>{{ post.date | date_to_string }}</small>
</a>
</h3>
</li>
{% endfor %}
</ul>
</div>
and I use md file with a name 2014-01-01-myNewPost.md and I get the following error:
Generating... Invalid Date: '' is not a valid datetime.
Liquid Exception: exit in _layouts/post.html
I don't seem to see any issues but unable to really figure it out why its not working.
My problem was that for some reason I kept getting this error in the terminal when I ran "jekyll serve --incremental":
Liquid Exception: Invalid Date: 'nil' is not a valid datetime. in /_layouts/post.html
ERROR: YOUR SITE COULD NOT BE BUILT:
------------------------------------
Invalid Date: 'nil' is not a valid datetime.
and after much digging, it's because jekyll picks up posts of any kind in the root directory, even if they are in a whole different folder. I had my posts in "_posts" and my test posts in "old_posts".
Just having the "old_posts" directory at the root project level made this error occur. Make sure you don't have anything like that.
Most likely, you have moved the sample posts to another directory, e.g., examples. Jekyll finds the posts there and tries to process them, which leads to the encountered problem.
Add the examples folder to the exclude list in _config.yml, and Jekyll will start as expected.
Seems like you've a typo in the date variable in your post YAML matter. Check if your post date complies with this format YYYY-MM-DD HH:MM:SS
I've checked the post layout code posted above, its fine.
If nothing works, uninstall Jekyll and install the last stable release 1.2.1 by running these commands
~ $ gem uninstall jekyll
~ $ gem install jekyll --version(="1.2.1")
I had this happen and it turns out I had duplicated a file from my _posts directory by mistake with option-click and it was sitting in the root of my site. Would be nice if the processor would give a detailed description about the cause of the error in addition to the general error message.
Based on this GitHub issue it looks like Jekyll will complain if you label something as a post and then try to format the date if that thing doesn't have a date in the title or front matter. This doesn't happen if you reference {{ page.date }} without formatting it, so it must be some kind of nil error in the format function.
I just had this problem and I realized I'd labeled a bunch of static pages with layout: post in the front matter when the filename was example.md rather than 2016-01-01-example.md. I changed those files to layout: page and that solved the problem.
So at least on my site I have to make sure things without dates are pages and things with dates are posts. (I removed the date from my posts layout when I redesigned the site and just now got around to trying to put it back.)

Resources