I'm trying to create an inline code block. I'm a little new to haml.
How does one create a inline code block like this:
HTML
<code>
<article>
<header class="article-header">Example</header>
</article>
</code>
How does one do this in haml?
What i've tried:
%p
%code
<:article
<header class="article-header">Example</header>
</article>
As per this article from Chris Eppstein. I've quickly learned that haml isn't very good for inline content.
When I say content, I mean the meat of a web page. The stuff that is
left after you take away the header, footer, sidebar, ads, etc. The
stuff the user is there to read. Don’t use Haml for adding markup to
your inline content.
- Chris Eppstein
It is ideal to pass this through via a haml plain filter or even a markdown filter:
%p
:plain
<article>
<header class="article-header">Example</header>
</article>
%article
%header.article-header Example
I'm not sure what white space you're trying to preserve. HAML can render this in "pretty" mode, giving you pretty formatting with indentation and spacing, or "ugly" mode, with no indentation.
Related
Can I clarify that these 4 elements below actually do the same job by rendering the text in italic and there is no difference in using each of them except to differentiate the type of content?
<i>
<em>
<address>
<cite>
Yes, you can. Do this:
<html>
<body>
<i>italic text</i>
<em>italic text</em>
<address>italic text</address>
<cite>italic text</cite>
</body>
</html>
Put this into a file called <filename>.html and open it in a browser (e.g. Chrome). If the text looks the same, it looks the same!
As you can see, the <i> and <em> elements do not make a newline automatically, but otherwise there is no difference. If you'd like to change the styles yourself, you can create a css file.
You right, these 4 Elements basically renders all text or content as italic, the different off all these element just at the content.
The <i> tag defines a part of text in an alternate voice or mood.
The <em> tag is used to define emphasized text.
The <address> tag defines the contact information for the author/owner of a document or an article.
The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
Yes, they all have the same default style which sets the content to italic.
And yes, a particular tag will be chosen according to the content.
Reference: For more information refer to below links:
What is the difference between <cite>, <em>, and <i> tags of HTML?
What's the difference between <b> and <strong>, <i> and <em>?
I've created a RDFa snippet to use on a client's website using the GoodRelations tool. The generated code creates the tags as expected, but there's no text between the divs, for instance:
<div typeof="vcard:Address">
<div property="vcard:locality" content="Yorba Linda"></div>
</div>
I'm assuming that this is OK, and that I am expected to put descriptive text for humans between the 'locality' divs without any adverse effects (in relation to SEO.) Correct?
As William says: In most cases, is is impractical to reuse visible content for publishing meta-data, because they differ in sequence or structure. In that case, it is better to put all meta-data in a single block of <div> elements without visible content. This is called "RDFa in Snippet Style", see
http://www.ebusiness-unibw.org/tools/rdf2rdfa/
Hepp, Martin; García, Roberto; Radinger, Andreas: RDF2RDFa: Turning RDF into Snippets for Copy-and-Paste, Technical Report TR-2009-01, 2009., PDF at http://www.heppnetz.de/files/RDF2RDFa-TR.pdf
Google is consuming such markup, despite a general preference for marking up visible content. Many big shops are using this approach with good results, e.g. http://www.rachaelraystore.com/Product/detail/Rachael-Ray-Stoneware-2-pc-Bubble-Brown-Baker-Set-Eggplant/316398
So if you can integrate the visible content and the RDFa constructs, then use
<div typeof="vcard:Address">
<div property="vcard:locality">Yorba Linda</div>
</div>
If you cannot, then use
<div typeof="vcard:Address">
<div property="vcard:locality" content="Yorba Linda"></div>
</div>
...
<div>
<div>Yorba Linda</div>
</div>
But the divs with invisible content must be close to the visible content and be placed better before than after the visible markup.
From and RDFa point of view, it is fine (I am assuming you are using bracers because you don't know how to escape greater than / less than characters).
The only thing you need to think about is how adding this fragment of HTML to your HTML document, will affect the rendering. Based on the fact that you are using the content attribute, this fragment is destined to remain hidden. So yo should think about this in relation to the CSS architecture. My advice would be to create a specific CSS class that is for annotations.
Having spoken to the author of Good Relations, his advice would be to put this fragment before any other HTML element in the body of your document. Generally, the Rich Snippets team indicate that they ignore hidden RDFa, but it doesn't actually matter and really in the long run it enables the publishing of RDF to anyone (not only Google) who wants to consume it.
I know that this is a very non-standard use case, but I'm chaining HAML, Markdown, and Handlebars (in SproutCore 2.0), and I'm 1 step away from 'beautiful' code. Intermingling HAML, Markdown, and Javascript is less ideal than it could be. If I wanted to add a post-filter to the entire output of HAML, replacing {{text}} with <script>{{text}}</script>, what would be the best way to do it?
I could just hack on a post-build step after haml, but I'd like to turn it into something that I can give back to the SproutCore community.
I want to replace
%body
javascript:
{{handlebars}}
With
%body
{{handlebars}}
Which would give me
<body>
<script>{{handlebars}}</script>
</body>
However, I also want this to work when embedded within markdown. For example,
%body
markdown:
# Hello, {{handlebars}}
Currently, the only way to get this is
%body
markdown:
# Hello, <script>{{handlebars}}</script>
Which would product
<body>
<h1>Hello, <script>{{handlebars}}</script></h1>
</body>
Revisiting the same issue much, much later, it appears that there's not a good solution for this with HAML. However, Jade does just about everything that I want.
http://jade-lang.com/
Input
html
script(type='text/x-handlebars')
:markdown
*Hello, {{handlebars}}!*
Output
<html>
<script type="text/x-handlebars"><p><em>Hello, {{handlebars}}!</em></p>
</script>
</html>
This question is about Blogger Template manipulation. People developing/changing or manipulating Blogger templates in any way know its syntax hence can provide some input.
I write a development blog on Blogger and I've changed my blog template so posts display HTML head title differently (post name first) from default (blog name first).
But. Since I format my inline programming code words similarly to Stackoverflow (gray background mono-spaced font) and do the same when I use any of them in blog post title... I enclose such code words inside <code/> element and then I have CSS set for this particular element to add it gray background and set mono-spaced font on it. This formatting works on blog post titles and its content.
But the problem I'm having is that these <code/> tags I use are also displayed in the HTML head title (displayed in browser window title). What is even more importan is that these get displayed in web search results as well. That's even more annoying.
Default template uses <data:blog.pageTitle/> in title element, which strips out any tags, but displays all titles as Blog Name: Blog post title (Google search results are quite meaningless because blog post title gets cut off). That's why I'm using <data:blog.pageName/> instead to display just blog post title in the head, but it still has all tags and I should strip them out somehow.
Check this blog post example. Load it, and look at browser's window title bar that still has tags displayed. I want them gone.
How do I strip tags from the post title when adding it to head element?
UPDATED
ok, so far this is what i worked out:
under settings -> Title -> put a nice
use <data:blog.pageTitle/> as title;
under design -> edit html -> replace theese lines
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=' (Intestazione)' type='Header'/>
</b:section>
with your custom header like
<div class="header section" id="header">
<div class="widget Header" id="Header1">
<div id="header-inner">
<div class="titlewrapper">
<h1 class="title">
aSeptik Site</h1>
</div>
<div class="descriptionwrapper">
<p class="description">
<span>
</span>
</p>
</div>
</div>
</div>
</div>
<title> will result from:
jQuery <em>"scroll into view"</em> plugin (with an additional <code>":scrollable"</code> selector filter)
to
: jQuery "scroll into view" plugin (with an additional ":scrollable" selector filter)
hope this help, demo http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
try with a little bit of javascript in your <body> like this
<script type='text/javascript'>
document.title = document.title.replace(/(<([^>]+)>)/ig,'');
</script>
</body>
copy and past as is don't convert entities,
DEMO: http://aseptik.blogspot.com/2011/02/jquery-scroll-into-view-plugin-with.html
although, i'm not sure this is the
right solution for you since spiders
usually avoid js execution, and i
don't know how "html tags in the title"
affects the search results.
One of my most common operations in textmate is to encapsulate a block of text in a <div>.
How can i create a keyboard shortcut for this? I do not really feel like learning anything complex, so simple solutions would work best - thanks!
Maybe I didn't understand your question, but what about the "Wrap Selection in Open/Close Tag" (Ctl-Shift-W) from the HTML bundle? Having a block of text selected then overtyping the default <p> with <div> does the work. See http://manual.macromates.com/en/bundles#html
But the following snippet :
${0:${TM_SELECTED_TEXT/\A(.)<\/div>\z|./(?1:$1:$0<\/div>)/m}}
does the same thing without even typing the tag ...
HTH
This might slightly off topic, but you might be interested in using Zen coding for Textmate, which allows you produce lots of HTML with a few key strokes.
You write:
div#page>div.logo+ul#navigation>li*5>a
You get:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
(disclaimer: the example code is from the above mentioned site)
Besides that it adds features for easy navigation of editable parts of HTML, for easy wrapping of content using the same syntax as above. This last past would allow you to wrap any text (content) in whatever HTML you would like.
Happy coding :)