I have followed the simple instructions in part A) of this answer.
The code can be seen in the browser, but it's not formatted as it's supposed to be.
When I view source, I can see that css classes are being generated, but it doesn't seem to change the appearance.
This is the html generated (I added the div's)
<div class="highlight">
<span class="k">def</span> <span class="nf">rouge_me</span>
<span class="nb">puts</span> <span class="s1">'hey!'</span>
<span class="k">end</span><br><br>
</div>
What I've tried
This suggested wrapping everything in <div class="highlight"> ... </div> but that didn't change anything.
Common sense says if there's css classes being referenced in the html, but those css classes aren't defined anywhere, then they won't be applied. When I check my css, there are no classes defined (it's an extremely basic app with no styling). How can the app 'know' about the classes rouge provided? Does rouge provide these somehow?
The instructions that you reference here are not general instructions for formatting code with Rouge but rather an answer specific for the original question.
Specifically, you missed one sentence given there: ”The only thing you need besides the code above is the CSS rules, which you have already correctly included in the web page.“
Indeed, what you need is to include some CSS styles that will colour your formatted Rouge output. This can be done by rendering a chosen Rouge theme into your template / layout (into a <style> tag) or into an app/assets/stylesheets/rouge.css.erb file, e.g.
<%= Rouge::Themes::Base16.mode(:light).render(scope: '.highlight') %>
See the README for more examples and the list of themes.
Related
So the title is the question.. I have a fragment like
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" th:fragment="header">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">My Shop</a>
So when i open this file in a browser, the static content (e.g. My Shop) will be displayed.
On the main html file where i import this part, i just want to use a simple th:replace tag like this:
<div th:replace="fragments :: header"></div>
So, at runtime, everything works fine. But when i want to use this file also for prototyping, opening the file directly in a browser, the contents of the file (static text like "My Shop") will not be displayed, since this file does not know anything about the fragment. Is there any way of achieving this, without rewriting all the contents also in the main html?
I can imagine sth like this:
<div th:replace="fragments :: header" th:fragment-file="fragment.html"></div>
According to Thymeleaf doc (http://www.thymeleaf.org/doc/layouts.html)
When a Thymeleaf template is used as a static prototype, we cannot see
the fragments we are including using the th:include/th:replace host
tags. We can only see the fragments aside, opening their own template
documents.
However, there is a way to see the real fragments included into our
pages while prototyping. This can be done using Thymol
(http://www.thymoljs.org/), an unofficial JavaScript library that is
an implementation of Thymeleaf’s standard fragment inclusion
functionality, providing static support for some Thymeleaf attributes
like th:include or th:replace, conditional display with
th:if/th:unless, etc.
You could also use a template alias (using resolver.addTemplateAlias("template", "folder/template"))
Now that applyAuthorStyles is deprecated the font-awesome icons no longer show up. This question how to incorporate font awesome in a dart component? has some useful information but I'm unable to get the untested suggestions to work.
Here is a template from a very simple mortgage calculator component project:
<polymer-element name="plus-payment-schedule">
<template>
<style>
</style>
<fieldset>
<legend>Payment Schedule</legend>
<label><span class="fa fa-calendar fa-fw" style="width:1.5em"></span> Start Date</label>
<plus-date-input id="date"></plus-date-input>
<div class="payment-schedule">
<table id="schedule_table">
</table>
</div>
</fieldset>
</template>
<script type="application/dart" src="payment_schedule.dart"></script>
</polymer-element>
Prior to polymer 0.10.0, using the suggested applyAuthorStyles patch this code worked. Meaning, by applying those font-awesome classes (class="fa fa-calendar fa-fw") the font-awesome icons showed up. I've removed applyAuthorStyles and made other polymer init changes required for the update. The component works fine except the font-awesome icons no longer show up.
When I run this mortgage calculator app and look in the inspector, I see that those classes are applied to the span. So I guess the issue is the definition of the classes (fa fa-calendar fa-fw) is not available?
Any information on how to make this specific scenario work?
The component is hosted here
applyAuthorStyles is deprecated. Thus you have to include stylesheets within <template>.
The problem is that #font-face does not work inside polymer elements at the moment. The solution is to include #font-face in the regular document and to add the classes to your polymer or include font-awesome.css in both places.
This should solve it.
See also:
- https://code.google.com/p/dart/issues/detail?id=18581
- https://github.com/Polymer/docs/issues/434
Regards, Robert
Consider using the Font-Awesome Polymer Iconset or generate your own subset using this generator
You'll be able to use FA in core-icons and other icon based elements, like this:
<core-icon icon="fa:calendar"></core-icon>
There is an element for that.
Use this: https://www.npmjs.com/package/fontawesome-iconset:
get the icons you need from fa-icons.html
put it in a new iron-iconset-svg
import iron-iconset-svg and iron-icon
use it like other iron-icon
You can view how to use here: https://elements.polymer-project.org/elements/iron-icon
I quite like that WMD is behaving nicely with my app. However, I have one problem.
Basically I edit content and store it as markdown in my database. Then I use Kramdown to get the HTML for the views. However Kramdown gets me the HTML tags which are not read by my browser. I use Chrome.
Sanitizing it will give a plain text even when the user has entered e.g. bold, italic, code etc.
So the basic idea is to get the generated HTML read as HTML and as 'rich-text'.
Inspecting the output source, I find that if I use Kramdown::Document.new(text).to_html there are some " " quotes introduce like this: "<p> ...<em>..</em>.. </p>"
These quotes hide the really HTML code after the quotes...(I assume)
and with sanitize the quotes are gone: <p> ...<em>..</em>.. </p> but I end up with plain text.
What am I missing here? Can I make my browser see that I have bold, or i have italic, a paragraph, an image etc...
Must I use kramdown or similar markdown to HMTL converters?
Thanks a lot!
UPDATE
I use compass for my stylesheets. When compass is uninstalled WMD editor works fine and correctly. For some reasons, it seems, compass hides any styles including 'test text' in my application.html.erb file but those created with its .scss partials files! I mean for example the following code when written in my application.html.erb file does not display as bold. <strong> test bold </strong>
Any ideas why this happens?
I have figured out the solution.
The problem was that the generated compass styles includes the following code segment:
body.bp {
#include blueprint-typography(true);
#include blueprint-utilities;
#include blueprint-debug;
#include blueprint-interaction;
// Remove the scaffolding when you're ready to start doing visual design.
// Or leave it in if you're happy with how blueprint looks out-of-the-box
}
In my stylesheets I had ignored to include the .bp class. All is good now...
I have a rails application, and I include the reset.css file in the application.html.erb
the reset.css file comes from http://meyerweb.com/eric/tools/css/reset/ I just copy all code.
And I have specified the font property in my application.css file.
When render out the page, seems the font didn't inherit the property from application.css, but still from reset.css
Why could this happen? I've checked the page info, reset.css was loaded before application.css
It's hard to say without seeing the actual CSS - selectors aren't necessarily applied via "last one in". Install Firebug and inspect the elements that don't appear how you think they should. Firebug will show you exactly how the selectors were applied.
Daniel,
I had the same symptom where my custom.css was in the document source AFTER my reset.css. When I looked closely, I discovered that I had a "block" div in both. Renaming my custom css block to "custom_block" solved the problem.
Also be careful that you don't use any keywords as div names. When in doubt, rename the div to something unique and see if that helps.
I've had similar mystery from form elements that have names which are also HTML form elements. Look for those, too, they can make a browser act strangely. i.e., radio buttons with name="radio"
what is the best/most efficient way of creating dynamic CSS with Rails. I am developing an admin area on a site, where I would like a user to be able to customize the style of their profiles(Colour mostly), which will also be saved.
Would you just embed ruby script in the css file?
Would you need to change the file extension from css?
Thanks.
In Rails 3.1, you can have your stylesheets pre-processed by erb.
Now let's say you have some dynamic styling called dynamic.css.scss.erb (the .erb at the end is important!) in app/assets/stylesheets. It will be processed by erb (and then by Sass), and as such can contain stuff like
.some_container {
<% favorite_tags do |tag, color| %>
.tag.<%= tag %=> {
background-color: #<%= color %>;
}
<% end %>
}
You can include it like any stylesheet.
How dynamic should it be?
Note that it will be only processed once, though, so if the values changes, the stylesheet won't.
I don't think there is a super efficient way to do have it completely dynamic yet, but it is still possible to generate the CSS for all requests. With this caveat in mind, here's a helper for that in Rails 3.1:
def style_tag(stylesheet)
asset = YourApplication::Application.assets[stylesheet]
clone = asset.class.new(asset.environment, asset.logical_path, asset.pathname, {})
content_tag("STYLE", clone.body.html_safe, type:"text/css")
end
Here's how to use it:
First, copy the above helper in app/helpers/application_helper.rb.
You can then include it in your page as follows:
<% content_for :head do %>
<%= style_tag "dynamic.css" %>
<% end %>
The rest of your page.
Make sure that your layout uses the content :head. For example, your layout/application.html.erb could look like:
...
<HEAD>
....
<%= yield :head %>
</HEAD>
...
I found this out thanks to this post.
You can use ERB with CSS, you just need to render css in the controller. However, for such a heavily requested resource, I do not recommend generating this every time. I would store the users stylesheet in memcached or redis, and recall from it when the page loads, rather than rerendering the file each time. When they update their style, you can expire the cache, just make sure it gets rebuilt when the page renders.
There has been a lot of development over the years, and I recently figured out how to do what this question is asking. And since it has been about 9-10 years since someone has answered this, I thought that I would put in my 2 cents.
As others have said, it is not good practice, and thus can not be done, to put ruby code directly into the CSS file as the CSS is precompiled and is not able to be dynamically changed within the file.... BUT, it can be dynamically changed outside the file!
I will need to give a quick synopsis of CSS variables in case future readers do not know how to use them.
CSS has the use of variables within its coding language to make it easier to change a lot of elements at one time. You put these variables at the top of the CSS file in a root section. Like this:
:root {
--primary: #0061f2;
--secondary: #6900c7;
}
Now, anytime you want to style an element one of those colors, you can simply put var(--variableName) like this:
.btn{
color: var(--secondary);
background-color: var(--primary);
}
.h1 {
color: var(--primary);
}
You can see how it would then be much easier to change the variable in the root section and thus change all other instances within the CSS.
Now for the dynamic Ruby part.
In the <head> section of your application file (or in the case of this question the file that holds the template for the admin's dashboard), you will need to redeclare the CSS variables with your dynamic variables and mark them as important. For example, let's say that you allow your user to choose primary and secondary colors for their dashboard and they are stored in the user's profile called like: user.primary_color and user.secondary_color. You will need to add this to your <head> section:
<style>
:root{
--primary: <%= user.primary_color %> !important;
--secondary: <%= user.secondary_color %> !important;
}
</style>
This !important tag will override the variables found in the CSS file thus dynamically allowing the user to change the CSS and view of their dashboard and have it remain persistent (as the values are saved in their profile).
I hope that this helps future developers.
Happy Coding!
Currently there is a lot of options to generate dynamic css in rails.
You can use less css - is an extension to CSS with extra features.
Gem Less css for rails provides integration for Rails projects using the Less stylesheet language in the asset pipeline.
If you are using twitter bootstrap you may check this out less rails bootstrap.
Also you can use one more CSS extension language Sass for generating CSS. Here is a Saas rails gem.
Check out Dynamic CSS in Rails and Render Rails assets to string blog posts and article about Asset Pipeline
Related SO questions:
Best way to handle dynamic css in a rails app
Dynamic CSS in Rails asset pipeline, compile on fly
Rails: change CSS property dynamically?
I just built this for another site. I have a controller action and a view that pulls color values out of the database, then renders a customized CSS based on the current user's account. To optimize, I am using the built in Rails page caching, which stores a copy on disk and serves it as a static asset. Nice and fast.
Here's an example from the ERB code
#header { background: <%= #colors["Header Stripe Background"] %>; border: 1px solid <%= #colors["Header Stripe Border"] %>; }
#header h1 {color: <%= #colors["Headline Color"] %>; }
#header p a { background: <%= #colors["Control Link Background"] %>; color: <%= #colors["Control Links"] %>;}
#header p a:hover {background: <%= #colors["Control Link Hover"] %>; text-decoration:underline;}
This solution defines some constants in config/site_settings.rb, which can then be used throughout the Rails application, as well as for automatically generating the CSS files whenever the Rails app starts and the CSS input files have been modified..
http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html