I've noticed that block level things are not really markdown friendly. Imagine the following segment (Yes, I am intending to output for twitter bootstrap):
<section id="loremipsum">
<div class="page-header">
# Heading 1 #
</div>
Lorem ipsum, blah blah blah, yada yada yada.
</section>
The expected output should be:
<section id="loremipsum">
<div class="page-header">
<h1>Heading 1</h1>
</div>
<p>Lorem ipsum, blah blah blah, yada yada yada.</p>
</section>
Instead, the produced output is closer to:
<p><section id="loremipsum"></p>
<div class="page-header">
# Heading 1 #
</div>
<p>Lorem ipsum, blah blah blah, yada yada yada.</section></p>
There are two problems here:
As per suggested by Daring Fireball, Markdown should be smart enough to not put in un-wanted tags around block level elements such as section tag.
Heading 1 is not parsed as a heading, but instead left unparsed.
Both of these problems actually happens also in Dingus, the official parser, so I guess this is one of those "working as intended" kind of issue. That said, are there any markdown gurus out there that knows how to work around these problems?
A little late to the game, but an updated answer (as of summer 2015).
The question depends on which implementation you use, but a good reference on markdown is CommonMark. According to the HTML-blocks specification you can get the wanted result with this markdown:
<section id="loremipsum">
<div class="page-header">
# Heading 1 #
</div>
Lorem ipsum, blah blah blah, yada yada yada.
</section>
Note the empty lines, which are end conditions for HTML-blocks. Also note:
The block begins with a line that meets a start condition (after up to three spaces optional indentation).
Meaning one should be careful with indenting the start of HTML-blocks.
markdown-it implements commonmark 100% in js, perl-commonmark gives you bindings to CommonMark C library, and I guess you will find implementations of CommonMark in most programming languages.
You can use Pandoc's markdown, which by default interprets code between <div> tags as markdown text.
$ pandoc input.md -o output.html
(See the markdown_in_html_blocks section of Pandoc's markdown doc for details.)
Yep, that's by design. According to Gruber:
Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.
I'm not aware of any sort of workaround for that, but I wouldn't put myself at guru-level when it comes to Markdown.
Edit: You might want to check out PHP Markdown Extra if you're working with PHP.
Some implementations may be case sensitive.
It turns out that markdownsharp will use a real div if you capitalize the <DIV> tag, but not if you use <div>.
So this may give you what you want
<DIV class="video-panel">
![Review][1]
![Review][2]
</DIV>
Even stackoverflow's markdown still differentiates between the two, although it strips out the DIV itself. For a public website this is probably a good thing though!
this will be bold
**this will not be bold**
Related
I have several html files with same <section> but different content.
I would like to know if it is possible for me to remove these sections in multiple files using the sublime text
Exemple:
<section class="all-classes" id="section1">
content
</section>
<section class="all-classes" id="section2-do-not-remove-section">
content
</section>
<section class="all-classes" id="section3">
content
</section>
<section class="all-classes" id="section4">
content
</section>
in this example I would like to remove sections 1, 3 and 4 and keep section 2
As mentioned by MattDMo in the comments, an HTML parser would be your best option for this job.
For simple cases where you just need a quick find+replace, you may use this RegEx:
<section.*id="section[\d]*"[\s\S]*?<\/section>
See it in action here.
Where:
<section.* - Catch text that starts with the tag section e.g. <section class="all-classes"
id="section[\d]*" - Catch the ids where the name is section followed by a number e.g. id="section32"
[\s\S]*? - Catch all characters (whitespaces or not) in a non-greedy way. This is to prevent spanning across multiple sections.
<\/section> - Catch the closing tag </section>. Since this was captured in a non-greedy way, this will always be the closest </section> tag.
WARNING: If you have nested sections (a section within a section), this will not work. You have to use an HTML parser for that.
Is it possible to embed a <canvas> tag in markdown? In particular, I'm hoping to embed canvas tags to display charts from the Chart.js library within a blog entry using the GrahamCampbell/Laravel-Markdown package but it does not seem to work.
Blog Entry Sample:
Lorem ipsum blah blah blah blah blah....
<canvas id="myChart" width="400" height="200"></canvas>
Lorem ipsum blah blah blah blah blah...
My laravel view (post.blade.php) receives the body of the blog post as follows:
<div class="article__body">
{!! Markdown::convertToHtml(e($post->body)) !!}
</div>
Currently the <canvas> tag is being posted as text within a <p></p>tag
In short, maybe. It depends on which Markdown implementation you are using.
The rules state:
For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.
Which, of course, would seem to indicate that it should work. But then there is the pesky issue of the HTML being wrapped in a <p> tag. The next paragraph in the rules state:
The only restrictions are that block-level HTML elements — e.g. <div>, <table>, <pre>, <p>, etc. — must be separated from surrounding content by blank lines, and the start and end tags of the block should not be indented with tabs or spaces. Markdown is smart enough not to add extra (unwanted) <p> tags around HTML block-level tags.
The issue is that Markdown was created long before the <canvas> tag (during the HTML 4 and XHTML 1 days) and most Markdown implementations do not include that tag in their list of "block-level HTML elements." However, a few implementations may have updated their code in recent years to add the newer HTML 5 block-level tags, and if you use one of those implementations, then you should be able to use a <canvas> tag without it being wrapped in a <p> tag.
You can compare some implementations on Babelmark2, where is appears that about half of the implementations listed will support canvas tags to some degree or another. However, that is a small sampling of all of the implementations out there. A much longer, albeit incomplete, list can be found here.
I have a title and subtitle like so:
The Programmer
Saving the world with bikesheds and perl hacks.
Which I'm representing like this:
<h1>The Programmer</h1>
<p><strong>Saving the world with bikesheds and perl hacks.</strong></p>
However perhaps this is more appropriate:
<h1>The Programmer</h1>
<p class="subtitle">Saving the world with bikesheds and perl hacks.</p>
But since it seem to make sense to put a subtitle class on the element wouldn't this be better:
<h1>The Programmer</h1>
<h2>Saving the world with bikesheds and perl hacks.<h2>
Which would be more appropriate?
In HTML4, I'd maybe go for your 2nd approach but change the class name to tagline if you're not quite comfortable having a class of subtitle on a non-heading tag:
<h1>The Programmer</h1>
<p class="tagline">Saving the world with bikesheds and perl hacks.</p>
In HTML5 you could use a <section>, <header> and <hgroup> tag and wrap the <h1> and <h2> version, giving you something like:
<section>
<header>
<hgroup>
<h1>The Programmer</h1>
<h2>Saving the world with bikesheds and perl hacks.<h2>
</hgroup>
</header>
...
</section>
(Alternatively you could use an <article> tag instead of a <section> tag - or any other sectioning tag - due to the change in the way HTML5 works out the document outline).
Well i think it that using proper markup it's more appropriate, if it's an header (like the start of a chapter) you should definitly use <h2>. If it's just a way of emphasize content i think it's better to use the CSS class so that you explain what it is.
If you use html 5 you may be intersted in teh <header> tag like in this example:
<header>
<h1>The most important heading on this page</h1>
<p>With some supplementary information</p>
</header>
<article>
<header>
<h1>Title of this article</h1>
<p>By Richard Clark</p>
</header>
<p>...Lorem Ipsum dolor set amet...</p>
</article>
here and here there are some quick info on the header tag in html5.
You can also read this chapter of "Dive into html5" for more complete reference (read the whole book while you are at it, it's good!)
Sometimes such "subtitles" are more of a teaser or short description (but in your case it actually seems like a subtitle); if you felt it was part of the title, you could stick it in the <h1> tag and perform special formatting. It's just a question of semantics: if you feel this is more a part of the header or more a part of the body, or neither.
I'd say my suggestion would be more appropriate, semantically and for screen readers, in this particular case. But the second case works well too, assuming these aren't huge descriptions.
First one is looking good. 2nd approach is also good, but for that you have to write a css class.
How do I stop Drupal from removing tags from the body of a page??
If I create a page that is organized such as
<p>blah blah</p>
<p>blah blah 2</p>
When I go back and edit - it removes the p and when I publish even without editing it turns into this
blah blahblah blah2
It's really annoying especially when editing pages with a lot of content - because I have to redo everything..!!
What input filter are you using? It sounds like the wrong one is being used.
Sounds like you might be using either plain text or filtered HTML.
From Drupal, details for Filtered HTML:
• Web page addresses and e-mail addresses turn into links automatically.
• Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
• Lines and paragraphs break automatically.
To see and configure your input filters go to admin/settings/filters or /admin/config/content/formats/filtered_html
This is more theoretical, I don't have a use for it currently, but would be nice. I would like to create a div layout in which each section cannot be broken by mismatched tags inside of it.
A simple model:
<div id="navbar">
</div>
<div id="content">
**blah blah blah </div>**<!-- assume this line came from a php include -->
blah blah blah
</div><!-- still related to #content despite the bogus /div above it. -->
Has anyone ever tried to accomplish this, or is this a fools errand?
There is no way to do this. If you have an opening <div> tag, the next </div> tag will close it. Period. Case closed.
If you don't want your <div> to be closed early, then don't print the bogus </div>.
There's always
<div>
<![CDATA[ blah blah </div> ]]>
</div>
But then you can't really make use of the tags inside the CDATA section.
Frames (inline or otherwise) provide some isolation. Anything inside the frame won't close tags outside the frame.
That does happen but the solution is sanitizing what you will output properly, this **blah blah blah </div>**<!-- assume this line came from a php include --> should not be printed, strip the tags or check for valid html before doing so.