-
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? |
Beta Was this translation helpful? Give feedback.
Replies: 7 comments 22 replies
-
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 To set up one of these styles simply copy the CSS file into |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Oh, I cannot find the . |
Beta Was this translation helpful? Give feedback.
-
I have also noticed that in the updated version of the template there is the following file called Maybe there is a similar file on the old template as well. |
Beta Was this translation helpful? Give feedback.
-
After some extra investigation, I figured out that the file responsible for the update of the code is the assets The js function responsible for that is the |
Beta Was this translation helpful? Give feedback.
-
Note that the only place where |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
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 thecodeblock
has the desiredcss
. I guess there is part of this code that blocks thatCSS
.The js function responsible for that is the
highlightElement: function(element, async, callback)
which after commenting it out, my codeblock works smoothly with thesubmline
style. Not sure quite what the implications are if I fully comment on this function in this .js
though :)!