Note: This is a very strange and unique use case so I apologise in advance if it seems a bit ass-backwards.
I have a haml file content.haml and a coffeescript file main.coffee.
I wish to somehow get the html resulting from rendering content.haml into a variable in the coffeescript/resulting javascript.
The end result should be a javascript file rendered to the browser.
let's say they look like this:
# content.haml
.container
.some_content
blah blah blah
-
# main.coffee
html_content = ???
do_something_with_html_content(html_content)
I know, this sounds ridiculous, 'use templates', 'fetch the HTML via ajax' etc. In this instance however, it's not possible, everything needs to be served via one JS file and I cannot fetch other resources from the server. Weird, I know.
Short of manually reconstructing the haml in the coffeescript file by joining an array of strings like this:
html_content = [
'<div class"container">',
'<div class"some_content">',
'blah blah blah',
'</div>',
'</div>',
]
I'm not sure the best way of doing this.
Another way I though of was to put something like this in the coffee file:
html_content = '###CONTENT###'
Then render the haml to html in ruby, render the coffeescript to js and then replace ###CONTENT### with the rendered html before serving to the client. However the html is a multi-line string so it completely destroys the javascript.
I'm convinced there must be some other nice way of rendering the haml into html in a variable such that it forms valid javascript, but my brain has gone blank.
Perhaps you can try something like this in one of your views:
:javascript
html_content = <%= escape_javascript(render partial: "content")%>
## your own logic follows here....
Wouldn't it be better to use a custom html data attribute and then fetch the content of it in js?
<div data-mycontent="YOUR CONTENT GOES HERE"></div>
And then in coffee, use the dataset attribute / data via jquery, if it is available.
If you set a var via writing the file directly it will render your js file uncacheable, among other drawbacks.
You can do that by using the sprockets gem, like Rails does. You just need to rename your CoffeeScript file to main.coffee.erb and use it as you would e.g. a haml template. Pass in your rendered html with an instance variable:
html_content = '<%= #html_content %>'
Edit: Added missing quotes.
Related
On the main page of every repository in GitHub or BitBucket it shows the Readme.md in a very pretty format.
Is there a way to make the same thing with ruby? I have already found some gems like Redcarpet, but it never looks pretty. I've followed this instructions for Redcarpet.
Edit:
After I tried Github's markup ruby gem, the same thing is happening.
What is shown is this:
And what I want is this:
And I'm sure it's not only css missing, because after 3 backquotes (```) I write the syntax like json or bash and in the first image it is written.
Edit2:
This code here:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
'<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>'+html
Generated this:
Github provides its own ruby gem to do so: https://github.com/github/markup.
You just need to install the right dependencies and you're good to go.
You need to enable a few nonstandard features.
Fenced code blocks
Fenced code blocks are nonstandard and are not enabled by default on most Markdown parsers (some older ones don't support them at all). According to Redcarpet's docs, you want to enable the fenced_code_blocks extension:
:fenced_code_blocks: parse fenced code blocks, PHP-Markdown style. Blocks delimited with 3 or more ~ or backticks will be considered as code, without the need to be indented. An optional language name may be added at the end of the opening fence for the code block.
Syntax Highlighting
Most Markdown parsers to not do syntax highlighting of code blocks. And those that do always do it as an option. Even then, you will still need to provide your own CSS styles to have the code blocks styled properly. As it turns out, Redcarpet does include support for a prettify option to the HTML renderer:
:prettify: add prettyprint classes to <code> tags for google-code-prettify.
You will need to get the Javascript and CSS from the google-code-prettify project to include in your pages.
Solution
In the end you'll need something like this:
renderer = Redcarpet::Render::HTML.new(prettify: true)
markdown = Redcarpet::Markdown.new(renderer, fenced_code_blocks: true)
html = markdown.render(source_text)
As #yoones said Github shares their way to do it but to be more precise they use the gem "commonmarker" for markdown. Though as far as I can tell this thing does not give the full formatted HTML file but only a piece that you insert into <body>. So you can do it like I did:
require "commonmarker"
puts <<~HEREDOC
<!DOCTYPE html>
<html>
<head>
<style>#{File.read "markdown.css"}</style>
</head>
<body class="markdown-body Box-body">
#{CommonMarker.render_html ARGF.read, %i{ DEFAULT UNSAFE }, %i{ table }}
</body>
</html>
HEREDOC
Where did I get the markdown.css? I just stole the CSS files from an arbitrary Github page with README rendered and applied UNCSS to it -- resulted in a 26kb file, you can find it in the same repo I just linked.
Why the table and UNSAFE? I need this to render an index.html for Github Pages because their markdown renderer can't newlines within table cells, etc. so instead of asking it to render my README.md I make the index.html myself.
I have a document which contains some metadata in the form of small markdown snippets.
Inside of a layout, I want to grab them, render them from markdown to HTML, and then print out the results. (I’m using DocPad’s default template engine, “Eco”.)
Is this possible?
The following assumes you are using marked as your Markdown engine. If you are using RoboSkirt or something else, you can do something similar, just adapt to use their module instead.
First, make sure you have the marked node module in your top level project:
npm install --save marked
Then add a helper function to your docpad.coffee that makes the marked function available in templates:
docpadConfig = {
templateData:
# Specify some site properties
marked: require('marked')
}
Now you can use this in your .eco files:
<div>
<%- #marked(#document.someMetaProperty) %>
</div>
Another way to Erv's answer is to use the Docpad Api which let's you pass the text through its render workflow (this way you can use other installed template engines too)
var renderOpts = {
text: 'here is some **markdown**',
filename:'markdown',
renderSingleExtensions:true
};
docpadInstance.action('render', renderOpts, function(err,result){
console.log(result);
});
source for above snippet: http://docpad.org/docs/api#rendering-individual-files
I want to transform an XML document to HTML using XSL, tinker with it a little, then render it out. This is essentially what I'm doing:
source = Nokogiri::XML(File.read 'source.xml')
xsl = Nokogiri::XSLT(File.read 'transform.xsl')
transformed = xsl.transform(source)
html = Nokogiri::HTML(transformed.to_html)
html.title = 'Something computed'
Stylesheet::transform always returns XML::Document, but I need a HTML::Document instance to use methods like title=.
The code above works, but exporting and re-parsing as HTML is just awful. Since the target is a subclass of the source, there must be a more effective way to perform the conversion.
How can I clean up this mess?
As a side question, Nokogiri has generally underwhelmed me with its handling of doctypes, unawareness of <meta charset= etc... does anyone know of a less auto-magic library with similar capabilities?
Many thanks ;)
HTML::Document extends XML::Document, but the individual nodes in a HTML document are just plain XML::Nodes, i.e. there aren’t any HTML::Nodes. This suggests a way of converting an XML document to HTML by creating a new empty HTML::Document and setting its root to that of the XML document:
html = Nokogiri::HTML::Document.new
html.root= transformed.root
The new document has the HTML methods like title= and meta_encoding= available, and when serializing it creates a HTML document rather than HTML: adds a HTML doctype, correctly uses empty tags like <br>, displays minimized attributes where appropriate (e.g. <input type="checkbox" selected>) and doesn’t escape things like > in <script> blocks.
Would there be bad consequences from transporting JSON in HTML like this:
<div id="json" style="display: none;">{"foo": "bar"}</div>
assuming HTML chars such as < are escaped as < in the element text?
The JSON could be strictly parsed:
var blah = $.parseJSON($('#json').html())
in a try/catch statement, for example. The rationale is to enable passing of JSON in Ajax'd HTML responses, when script tags are being stripped an not executed. An example would be Ajax requests made using the jQuery .load() special selector syntax:
$('#here').load('some.html #fragment')
...which ditches all script tags and thus prevents the use of:
<script>var blah = {"foo":"bar"}</script>
I've seen JSON being passed around in HTML attributes, and I'd guess this is equivalent - w.r.t. weirdness, security, etc - but is far less readable due to all the additional quote-escaping.
The natural way of passing JS data in HTML is through JavaScript code (if is a part of actual JavaScript code, like in the case of initial values/configuration) or by data- HTML5 attributes (whenever JS code is not necessary; always when data needs to be somehow attached to DOM elements).
In your example this would be probably the best:
<div id="json" style="display: none;"
data-something="{"foo":"bar"}">
</div>
but reorganize your data to actually follow HTML structure:
<div class="profile-container"
data-profile="{"name":"John Doe","id":123}">
... profile 123 ...
</div>
<div class="profile-container"
data-profile="{"name":"Jane Doe","id":321}">
... profile 321 ...
</div>
(quoting should be done server-side, eg. using PHP's htmlspecialchars(...), or Python's cgi.escape(..., True)).
And then you can obtain the data in one of multiple ways, eg. using jQuery's .data() method.
EDIT:
Yes, your approach with embedding JSON as content of HTML tags and hiding it using CSS styles has gotchas. As I said, if you want to pass data in HTML, the only "best practice" way is to attach it to one of HTML elements (you are kind-of doing it anyway, but you use CSS to hide it, while you can use existing solutions for passing JSON/data without affecting clients that could override your styles). The proof for one of disadvantages is here: http://jsfiddle.net/NY7Bs/ (data is passed both ways, but one simple external style overrides your inline styles and shows the content - not mentioning the influence on semantics of your document).
Why not simply use the .ajax() function then, you would get only the string with the json. Then you could parse it as you suggested.
I'm using HAML to generate templates for a Backbone.js app. I need to be able to insert <%= blah %> as an html attribute a la:
%a{:href => "myresources/<% id %>"} My Resource
and have it output
<a href='myresources/<%= id %>' >My Resource</a>
in the html template. Unfortunately, HAML escapes the html parameters leaving me with
<a href='#myresources/<%= id %>'>My Resource</a>
According to the HAML Reference the '!' operator can be used for unescaping strings, but not within the HTML attributes.
Also, I'd use plaintext to render the anchor tag, but since the anchor tag is the root for this particular view, I lose all of the benefits of using HAML.
Any help?
Update
I didn't mention, but I'm using LiveReload to actually watch my file system and run the haml compiler, and there was a setting in LiveReload to disable HTML escapes in tag attributes. < head slap > If anyone else runs into this issue outside of LiveReload, you can also set the :escape_attrs option to false when configuring your HAML setup.
You can configure HAML to not escape tag attributes using the escape_attrs option in your HAML configuration. See HAML Options.
You can try using html_safe which is a method on String objects. This will escape the html characters in the variable statement (< for example) and will leave the intact for underscore to evaluate at runtime:
%a{:href => "myresources/<% id %>".html_safe} My Resource
Found on answer to Interpolate inside html attributes with Underscore.js