I'm starting using Middleman for static web pages & blogging purposes. I'm using it with a ZURB Fondation based template, Middleman-Foundation. It employs Haml, and I'm indeed inclined to use Haml, with Markdown files occasionally.
I'm using redcarpet for markdown, to also make use of Github-style fenced code blocks for source highlighting. But I could not figure out how to setup it for Markdown in Haml.
I've checked middleman-syntax which works for .html.md but not for .html.haml. I've tried to figure it out from Glorify but failed. I've checked this and this too.
What are the basics steps to achieve working fenced code blocks in Haml Markdown to produce highlighted source code.
It would be awesome to have a set of steps from start for this, from gem install middleman and cloning/employing Middleman-Foundation, but any short, actual answer is welcome.
EDIT
I was able to achieve pygmentized code blocks in Haml with the following (sad that it seems not possible to use markdown with fenced code blocks for this...):
%li#simple3Tab This is simple tab 3's content. It's, you know...okay.
%li#simple4Tab
-code("ruby") do
:plain
def my_cool_method(message)
puts message
end
%h3 Buttons
But there's a lasting problem, this is what I'm getting:
As can be seen the first line is not correctly being indented, this is happening because the previous code snippet is not producing a heading linebreak:
<li id='simple3Tab'>This is simple tab 3's content. It's, you know...okay.</li>
<li id='simple4Tab'>
<div class="highlight"><pre><span class="k">def</span> <span class="nf">my_cool_method</span><span class="p">(</span><span class="n">message</span><span class="p">)</span>
<span class="nb">puts</span> <span class="n">message</span>
<span class="k">end</span>
</pre></div>
</li>
</ul>
<h3>Buttons</h3>
I cannot figure out how to break the line before the first <span>, following the opening <pre>, so that the code gets correctly indented like the other lines.
Desired:
<li id='simple3Tab'>This is simple tab 3's content. It's, you know...okay.</li>
<li id='simple4Tab'>
<div class="highlight"><pre>
<span class="k">def</span> <span class="nf">my_cool_method</span><span class="p">(</span><span class="n">message</span><span class="p">)</span>
<span class="nb">puts</span> <span class="n">message</span>
<span class="k">end</span>
</pre></div>
</li>
</ul>
<h3>Buttons</h3>
I was able to figure it out through trial & error using the bits of information provided by #bhollis, Haml reference, and this SO question pointed by the Glorify author.
This is the magical combination:
%li#simple3Tab This is simple tab 3's content. It's, you know...okay.
%li#simple4Tab
=preserve do
-code("ruby") do
:plain
def my_cool_method(message)
puts "Hello" + message
end
%h3 Buttons
The result (for this one I've enabled an emacs stylesheet):
This not only solved the question about the "missing" heading newline, but also removed the extra indentation that the referred SO question talks about.
I'm still open for shorter and better approaches. Three lines of preamble to input code is a bit inconvenient.
Check out the docs for middleman-syntax: https://github.com/middleman/middleman-syntax
Code highlighting is automatically included in Markdown code blocks (via Redcarpet), but in Haml, it's better to use the "code" helper:
- code("ruby") do
My ruby code here
Related
I'm searching (for severals hours now) how to add an image to a page on my Jekyll website hosted by Github page.
I already read lots of post where solutions are given but none of them seems to work. However the Markdown syntax image is pretty clear...I don't see where I'm wrong ?
THE PROBLEM : My website only displays the line of code, but not the image ! As if Jekyll compilator considered this code like a normal text.
The syntax which is generally given is :  (see more Here)
According to the forums which I have visited, the reccurent problem turns around the path to the image. Asbolute or not ? with a missed slash : "/" or with a bad use of liquid syntax {{site.url}} .
I've read all these posts, tested their solution and tried multiples combination with out any result!
Here is the basic markdown page I wrote:
---
layout: default
title: Catégories
menu: main
weight: 10
permalink: /categories/
---
<div>
<ul>
<li>
</li>
<li>
</li>
<li>
![Logo Jekyll]({{"/assets/images/categories/jekyll-logo.png"| absolute_url}})
</li>
<li>
</li>
<li>
<img src="{{site.url}}/assets/images/categories/jekyll-logo.png" />
</li>
</ul>
</div>
and you can see on my website that the images are not displaying with the markdown syntax, but there is no problem with the classic html method (which leads me to think that it's not for me a url problem...). I also put my image at differents places on my repo to find a solution that's why the url is changing.
Is there anyone who had the same problem and solved it? The solution is probably so easy but I'm a newbie in Jekyll and I really don't see where is my mistake.
Thank you very much for your help !
The markdown syntax to add an image on jekyll website is not working because it is inside HTML tags, so when mixing HTML code with kramdown syntax and you want this kramdown code to be processed you need to specify it explicitely.
One way to do it isto add the markdown="1" attribute to the HTML tag, for example:
<ul>
<li markdown="1">
</li>
</ul>
Look that there are no spaces before the kramdown code, or it will be interpreted as a block code.
For this particular case you can just use kramdown lists:
- 
- 
- ![Logo Jekyll]({{"/assets/images/categories/jekyll-logo.png"| absolute_url}})
- 
Using Spring / Thymeleaf i18n, I'd like to create a HTML paragraph message like "Click here", in which there is a link only for the word "here". What is the best way to do this?
The way I tried doesn't look nice and also results in a like break:
In messages.properties file:
error.generic.click=Click
error.generic.here=here
And in the HTML file:
<p th:text="#{error.generic.click}"></p><p><a th:text="#{error.generic.here}" th:href="#{/contact}"></a></p>
Answer
Your way seems okay to me. If you just want to fix the newline issue go ahead with the following one:
<p>
<span th:text="#{error.generic.click}"></span>
<a th:text="#{error.generic.here}" th:href="#{/contact}"></a>
</p>
The span will make "Click" stay on the same line as "here". However i'd just go for a link that say "Click here" instead of just "here".
For example in german you could say "Hier klicken". "Hier" would mean "here" and "klicken" would mean "click". The Problem is that the meaning for the words changed but the position didn't. You would end up with a link saying "klicken" instead of "Hier".
Not recommented
There is another approach, but it has some drawbacks. You could use:
<p th:utext="#{error.generic}"></p>
with the following messages.properties:
error.generic=Click here
The drawback on this one is that you can't use th:href anymore. I would not recomment this way. However this can be helpfull when using no th:* and just plain html tags. So i wanted to mention it.
I'm trying to allow custom "template code" within the source code editor. My code snippets would always look like {* anything here *}. It mostly works, but if used inside an HTML tag things gets scrambled.
I'm already using allowedContent: true, when starting CKEDITOR.
Example:
<p style="{* some "short code" of mine... *}">Text</p>
turns into
<p style="{* some " short="" code"="" of="" mine...="" *}"="">Text</p>
And
<p {* tet_pos_is_inside *}>Fuss</p>
into
<p {*="" tet_pos_is_inside="" *}="">Fuss</p>
Any advise ?
Thanks,
Sebastian
My advise would be to never use them inside tags, it sounds like a nightmare to configure. What is the requirement you are trying to fill with those?
You could go around this issue with pre- and post processing using classes, data attributes and/or custom attributes. For example you could use something like his:
<p class="tet_pos_is_inside_val-12345 foo-val-12345">I love horses</p>
<p data-tet_pos_is_inside="12345" data-foo="">I love bunnies</p>
<p tet_pos_is_inside="12345" foo="">I love cats</p>
Well,
apparently there was a simple solution to solve my current problem:
<p style="{* some 'short code' of mine... *}">Text</p>
works ! Note the use of singe-quotes inside the double quotes.
IOW, as long as there is a <tag attr="val"> then val can be anything except containing more double quotes.
Thanks for the comments.
Could anyone tell me how can I match the start of <div> tag to the end of </div> tag with a regular expression in Ruby?
For example let say I have a:
<div>
<p>test content</p>
</div>
So far I have this:
< div [^>]* > [^<]*<\/div>
but it doesn't seems to work.
Nokogiri is great but, imho, there are situations when it can not be used.
For your mere case you can use this:
puts str.scan(/<div>(.*)<\/div>/im).flatten.first
<p>test content</p>
To match the <div> when it's all on one line, use:
/<div[^>]*>/
But, that will break on any markup with a new-line inside the tag. It'll also break if there is whitespace between < and div, which there could be.
Eventually, after you've added in all the extra checks for the possible ways a tag can be written you'll want to consider a better way, which would be to use a parser, like Nokogiri, which makes working with HTML and XML much easier.
For instance, since you're trying to tear apart the HTML:
<div>
<p>test content</p>
</div>
it's pretty easy to guess you really want to get to "test content". What if the HTML changed to:
<div><p>test content</p></div>
or worse:
<div
><p>
test
content
</div>
A browser won't care, nor will a good parser, but a regex will get upset and require rework.
require 'nokogiri'
require 'pp'
doc = Nokogiri.HTML(<<EOT)
<div
><p>
test
content
</div>
EOT
pp doc.at('p').text.strip.gsub(/\s+/, ' ')
# => "test content"
That's why we recommend parsers.
An HTML parser such as Nokogiri would probably be a better option than using a Regex as PinnyM pointed out.
Here is a tutorial on the Nokogiri page that describes how to search an HTML/XML document.
This stackoverflow question demonstrates something similar to what you want to accomplish using CSS selectors. Perhaps something like that would work for you.
I have a webpage looks something like this:
<html>
...
<div id="menu">
...
<ul id="listOfItems">
<!--- repeated block start -->
<li id="item" class="itemClass">
...
<span class="spanClass"><span class="title">title</span></span>
...
</li>
<!-- repeated block end-->
<li id="item" class="itemClass">
...
<span class="spanClass"><span class="title">title something</span></span>
...
</li>
<li id="item" class="itemClass">
...
<span class="spanClass"><span class="title">title other thing</span></span>
...
</li>
</ul>
...
</div>
...
</html>
I would like to know what is the xpath of the titles ("title", "title something", "title other thing"). The point is that the order of the <li> elements are not specified. It could be different after every page loading. Is there any method how to discover a certain structure of the page with xpath? I have an notion about how to solve this issue, but before I'm going to write iterations with C# to discover the page I ask you.
Thanks in advance!
First of all, id's should be unique, so your portrayed webpage would not work well when it comes to testing.
I did however test, and got some XPath locators to work for selecting specific titles (although I recommend you fix your webpage instead of actually using this):
//li[#id='item']/span/span
//li[#id='item'][1]/span/span
//li[#id='item'][3]/span/span
If you're after all three titles, you could try Dimitre Novatchev's suggestion:
//span[#class='title']
This should get all titles on the page.
I would like to say one thing however, if you're getting into Selenium, I recommend you download the Selenium IDE extension for Firefox. It's a great tool for beginners. It helps you both to make your Selenium tests by recording your clicks on a website, and it also helps you auto-generate and test your XPath locators and other locators.
And again: I urge you to not make a website with duplicate id elements :-)
Does Selenium support XPath expressions like:
//span[#class='title']
If yes, than use the above XPath expression. It selects every span element in the XML document, whose class attribute has string value of "title".
I recommend to use a tool like the XPath Visualizer to play with different XPath expressions and see the selected nodes highlighted in the source XML document.