Update the CSS template for changing the code-block layout

[kristosh]

I am trying to modify the CSS of the template for changing the code-block layout. I would like to use something similar to sublime CSS just for the code-blocks in the al-folio template. However, I am not really sure how to modify just the specific part of the template.

Could you please indicate what I need to change in order to update the template in the desired way?

[george-gca]

As you can see in our _config.yml we use Rouge for syntax highlighting.

I believe the easiest way (if you are going to do a lot of modifications) is for you to get a readily implemented css class for this, test it, and then add your modifications on top of it. Note that Rouge HTML output is compatible with stylesheets designed for Pygments.

To set up one of these styles simply copy the CSS file into _sass/ and import the syntax highlighter styles into _sass/_main.scss, as stated in jekyll docs.

[george-gca]

Your file clearly has some hidden chars that are causing the error, as seen in the error message:

1 │ ��.highlight table td { padding: 5px; }
  │ ^
  ╵

Delete these characters and try again. You can check for hidden chars with sites like this one.

[kristosh]

Hey thanks for the recommendation. Firstly, is the dot before the highlight a legit syntax? Is there also a way to remove all the hidden chars somehow without writing the code again?

[george-gca]

Yes, it is part of the CSS syntax. Probably these chars are only at the beginning of the file, so just deleting them in a normal text editor should be fine. While doing that you'll notice that you will press the delete but nothing will happen, but it is because the chars are invisible for your editor. If there are a lot of hidden chars, there are some sites like the one I posted here or programs that might help you, but I have no idea which ones.

[kristosh]

Oh that work indeed. Now I can see that the compilation works without a problem. I am facing a slight problem that not all the color frmo sublime-monokai template is employed. My codeblock background is black (as intended) and most of the code text in white. However, all the text that it supposed to be in color (comments, import etc) is black. When I am refreshing the site I can see the color text for a while but then again it turns and renders black.

Instead of:

Is that due to the css of the al-folio template that does not allow the color to portrayed?

[george-gca]

This is a little bit trickier to debug. Somewhere in the code the css classes are being overwritten. The easier way to find this is by using chrome dev tools or firefox dev tools. In there you can click in the element and find all the attributes that are set for that element and where are they. If the color setting is with a strike through, this means that somewhere above that value is overwritten. You'll need to find where and maybe force it not to be. I would try first to import your css file as the last import possible in the template, since precedence matters.

[kristosh]

Hey I have tried to import my file as last in order or first in order. Both did not help. Then, after some inspection I have noticed that indeed there is a couple of strike through variables. However, these are not in the codeblock.csss file that it should have been the case, right? There is also some scss file imported by bootstrap that makes the read a bit more complicate for me.

By the way, I was just looking for .highlight variables. I am guessing that the codeblock make use of them explicitly for the styling.

[kristosh]

What is weird is that when I refresh the page I can see properly the colors but after a while the disappear. So it is loaded properly at first and then they are overwritten somehow!

[george-gca]

Yes, that is what happens. Now it is the tricky part, find out where this happens. But you should not make your script the first one imported, since it will have the least priority.

[kristosh]

After some debugging I have noticed the following that during the inspection in Firefox, I can only one two lines of code from my codeblock SCSS file. The rest of the code is not activated somehow. I am trying to look what could block that, but I cannot find anything related to .highlight in the rest of the code!

Secondly, what it means when during the refresh you can see the colors in the text but then they disappear? Is that because the overwriting taking place?

[george-gca]

There is the include of the css files of jekyll pygments that happens on _includes/head.liquid. About the disappearing, the css values are being overwritten somewhere, but it could even be your css classes overriding the default values for the classes. Usually when something takes a while to be overriden means that they are being loaded post page loading, so they are being deferred.

[kristosh]

Oh, I cannot find the .liquid files. In the _includes folder there are only html files with similar names. Does that make sense? I guess I do have an older version of the template.

[kristosh]

Is there a chance that the conflict is in file that I cannot control, like a boostrap file? I have tried to disable the code from all things above my highlight code from the codeblock.css file. There are some files that imported online I guess from bootstrap.

[george-gca]

Yes and no. It might be some external library that is overriding your variables, but even on that case you can force yours to be the last override, either by putting it to be imported last, or by using something like !important. The best way to check what is overriding your values is checking the values on chrome/firefox dev tools. They show the values that were set, and the values that were supposed to be set but overriden with a strike through.

[kristosh]

What worries me is that during the inspection with the dev tools, I can see only 4 lines out of the total 120 lines of the imported file to be there (codeblock.scss). There rest lines are not there and are not activated somehow, even when I set in all the commands the !important feature. I cannot see any strike through lines from my codeblock.css file.

Moreover, the command highlight that relates with my external scss file cannot be found in another file. This issue is really annoying :)

[kristosh]

There are also some files like boostrap.css rfs.scss reboot.css that I cannot locate locally in my repository.

[george-gca]

The dev tools only displays the css classes that affect the current selected element, that is why you are seeing only a part of the files.

I don't know exactly the internal works of this, but your scss files are processed and converted into regular css files by jekyll. If you import your file inside assets/css/main.scss, it will appear as part of assets/css/main.css?hash in the dev tools.

As for boostrap.css and some others, these are included in _includes/head.liquid and loaded via some CDN. Some of them are only loaded if set in the page (for example, bootstrap table, which has a condition {% if page.pretty_table %} in this file), others are loaded for every page (like bootstrap).

[kristosh]

I have also noticed that in the updated version of the template there is the following file called https://github.com/alshedivat/al-folio/blob/master/assets/css/jekyll-pygments-themes-github.css that contains some code related to codeblocks. I was trying to locate whether in the old template there is something similar that causes the overwriting. Are you maybe familiar with these files?

Maybe there is a similar file on the old template as well.

[george-gca]

This file was previously included in _includes/head.liquid (probably head.html in your case) and loaded via CDN. This changed in #1562.

[kristosh]

Is there maybe an alternative way to give importance to these commands? Adding the file as a last import in main.css and adding everywhere the important! line did not work.

[kristosh]

Btw, I have tried the same steps in the updated version of al-folio. I have tried to import the .css from the main.scss file and also add an include in the head.liquid. I got exactly the same problem.

[kristosh]

After some extra investigation, I figured out that the file responsible for the update of the code is the assets\js\distillpub\template.v2.js which is a rather big document. I have just commented out completely. The site looks weird but the codeblock has the desired css. I guess there is part of this code that blocks that CSS.

The js function responsible for that is the highlightElement: function(element, async, callback) which after commenting it out, my codeblock works smoothly with the submline style. Not sure quite what the implications are if I fully comment on this function in this .js though :)!

[george-gca]

Note that the only place where assets/js/distillpub/template.v2.js is used is in _layouts/distill.liquid, which in turn is only used if you set layout: distill in the page front matter. I had no idea that was your case.

[kristosh]

No worries George, thanks for the help! I did not know that this layout will be that crucial. Anyway, I learned a lot investigating this issue. You were constantly helping me finding the issue. I learned how to use the inspections tools from Chrome/Firefox, though I think it would have been impossible to locate the issue from the inspection alone.