How to highlight code in my blog with VS Code theme? - css

I am trying to change the colour scheme of code highlighting in my Jekyll blog to the scheme in VS Code "light+" theme. I've tried searching the source code of VS Code and the themes in the Marketplace to find the corresponding .css file but ended up with failure.
I noticed that the same colour scheme (in "Light+") can also apply to my markdown preview, so I assume there's a convenient way. What should I do?
English is not my native language, and please excuse typing errors.

Related

Will "Hello Elementor" automatically convert SCSS to CSS

I've just started using the WordPress page builder "Elementor" and have decided to move from "Genesis" to their own theme called "Hello Elementor". However, their theme uses SCSS and GruntJS.
On their documentation, they've included a custom.scss for all the custom styling. But when you add anything to this via WordPress, nothing happens. I know I could download the theme and use Visual Studio Code to make changes and use a sass compiler to automatically compile this for me, but it would require me to constantly upload files via FTP. Ideally, I would like to stay away from this.
Is there something I am missing? Or something I could do for WordPress to automatically compile this for me?
Edit:
If anyone has any recommendations of other themes to use with Elementor, I would really appreciate it.
They removed this option in Hello Elementor. You can no longer integrate custom scss. And I don't know since which version it's not present anymore, considering that I've tried the latest two ones and none of them seemed to accept the scss custom file.
However, you can check the answer they gave me a few days ago on the Hello Elementor GitHub page, if you want.
https://github.com/elementor/hello-theme/issues/85

serve_site changes CSS to its default values in blogdown

I'm creating a blogdown website using agency theme and everything works fine.
I changed some stuff in the CSS, located in public/css/agency.css and I can see all changes. However, when I restarted RStudio all changes I've made switch to their default values (colors and stuff). And the same happens if I run blogdown::serve_site()
I can't see what's going wrong with my approach and any help would be appreciated.
Do not touch the public directory. It is automatically generated from your website source files (see Section 1.2 of the blogdown book for some basics). If you want to change anything on your website, always change the source. In your case, you can either change the CSS file in the theme (personally I don't recommend this way), or provide your own static/css/agency.css to override your theme's CSS. For more about the overriding mechanism, see Section 2.7.

Theme development in Liferay

I'm trying to make a theme for Liferay 6.2 and I have some misunderstandings.
I create new project, choose theme, then click next and choose velocity and _styled responsively. But I want to get a standart theme which I can deploy and nothing change in comparison with default theme. I thought I got the point and after that I should copy overriden .css files in _diffs folder. But I don't achieve that. I attached screenshot with my result and I can't understand why I don't have default theme instead. Also I understand that it may be very dumb question but I hope someone would explain it briefly to me. Thanks in advance.
You should use the classic theme as base.
Something like:
property name="theme.parent" value="classic"
in your build.xml will build your project with the theme that comes with LR by default (the classic one).
Victor already gave the correct answer. If you're interested in the background: _styled is a theme that basically provides the basics for your own theme but doesn't make any assumption on its appearance. If you really want to build your own theme, this is the preferred one to start from. If you only want to tweak a few things from the classic theme, start with classic (as Victor says).
Note that classic is not meant to be extended (though it works) - contrary to the documentation, the css/custom.css file in classic theme is not empty for this reason. This means that you'll need to adopt the instructions for creating a theme and start with classic's own custom.css file.

How to DRYly render code snippets within a style guide

I'm building a simple, static style guide. It includes only static front-end assets – CSS, JS, fonts, and images which will be included in client apps via bower. My development stack, however, is a bit more sophisticated. I'm using gulp to wire up jade, sass, coffeescript etc. Everything is working great.
In the guide, I would like to have a preview of the source code so that you can conveniently copy the markup for a widget and paste it directly into your project. You can see this, for example, in the docs for Foundation. I would like to do something similar in my styleguide.
Now my question...
Of course, I could just duplicate the markup (once to render the content and a second time in pre tags to render the code snippet). But that's obviously bad because then I run the risk of failing to keep them in sync, thus defeating the entire purpose of displaying a code snippet.
Ideally, I want to type the markup once and have it render both the content and the code snippet. In a previous project, I was able to achieve this by writing a custom HAML filter. How can I do this with Jade?
Here are a couple solutions:
render-code - for file based code snippets in the same repository
jekyll-github-sample - for code snippets from any GitHub repo

Do I have to use Compass to modify CSS with Django-Grappelli?

I recently setup django-grappelli on my first django app. While I like the way it looks I want to customize the colors, and other CSS.
From my research, it looks like I will have to use Compass but I've never used Compass before and want to double check that this is the best method before I embark on that path!
Is Django-grapelli even the right choice for some one that wants to customize the color theme?
Things I tried
Modify the CSS in the Grappelli stylesheets but they are formatted in a way that makes it tedious.
Extend the style sheet but I am not sure where to do this for the admin.
Create a custom.css but could not figure out where to put the path
Thanks for your advice!
It seems to me like Compass is just a tool to write CSS. I've never used it, but at the moment I don't see how it could make modding the admin interface any easier than doing it manually!
Whenever I make changes to the admin (I've made changes to Grappelli, like you're trying to do), I always use what you've listed as number 2. I've never had any troubles! I can try to help you out, if you'd like to try again.
What I do first is go to my Python install directory and copy the Grappelli source from Lib/site-packages. I put this code in my project directory as a project-level app. So, if you're using Django 1.4, you'll have a folder that has your project folder as well as manage.py in it. Put the code there.
Then, using your favorite web developer tools (I prefer Chrome's), figure out which stylesheet you need to modify and which css file it's in. I do this by right-clicking the element and selecting Inspect Element. This brings up the dev tools, and at the right it tells you the css file its referenced from as well as which line its on. If you open up that css file in your favorite text editor and make changes to it, it should work!
Let me know if you're having any trouble with this. I can try to help you out further.
(and, P.S., I wasn't trying to be pedantic with a basic overview of the use of Chrome's developer tools. I was just trying to be helpful by not assuming anything. I hope you don't take it as an insult.)

Resources