Markdown syntax is often convenient to write blogs and comments;
But at times it interferes with the content when you would want to write a simple html
Is there a tag / syntax that asks markdown to ignore that part like the pre html tag?
If pre works, what if the markdown part needs to include an html tag?
The original implementation of Markdown (by Gruber) and PHP Markdown don't format inside block-level HTML elements, so you can use <div>, for example:
Markdown text.
More markdown text.
<div>
Markdown ignores inside the div, you can do all sorts of crazy stuff:
Stack Overflow.
<blink>Is blink still supported?</blink>
</div>
Yet more markdown text.
Will get rendered as:
<p>Markdown text.</p>
<p>More markdown text.</p>
<div>
Markdown ignores inside the div, you can do all sorts of crazy stuff:
Stack Overflow.
<blink>Is blink still supported?</blink>
</div>
<p>Yet more markdown text.</p>
At least here on Stack Overflow, the ... <pre> HTML tag works just fine for that purpose. It also formats your text like a browser would:
This is pre-formatted, so in here I can /slash/ and *star* stuff
without issues, and [[square brackets]] [are] just brackets.
Related
so I have this huge amount of text from several documents that i'd like to insert on my webpages. When i copy paste the text into my <p>element, it works fine and all, but it looks messy in my html-file.
Is there any other way to transfer my written document to my html-file, for instance link the document to the html-file, or maybe there's a way to hide or separate the <p> so the html-file looks neat even though there's a huge amount of text in my html-file. Any advice?
I do not know about any way to include html in another html (something like php's include), but it could be done with JQuery:
index.html:
<html>
<head>
<!-- link jquery -->
<script>
$(function(){
$("#fileContent").load("doc.html");
});
</script>
</head>
<body>
<div id="fileContent"></div>
</body>
</html>
doc.html (file that contains your text)
There's a lot you could do to separate these blocks of text.
Firstly, I'd recommend using <div>..</div> tags to divide the content into separate semantic sections. There are a bunch of different tags that aim to divide the content of the page semantically: <aside>, <main>, <header>, <nav>, and so on. I'd recommend reading up on these tags and using them appropriately.
However, to answer your question more directly, you should separate each block of text into separate <p> tags. After all, the <p> tag is meant for defining separate paragraphs. While the HTML document may not look pretty when indented and filled with multiple different tags like <div> a <p>, it is the best way to do it.
Unless the HTML page is going to be presented in its core (code) format, then how the <p> tags look in the .html file is unnecessary because after all these are what define how the page is presented and rendered in the browser.
I have a string with some HTML markup, but without any paragraphs. I want to replace newlines with paragraph tags, but if I do it "the dumb way":
html.gsub!(/\s*\n+\s*/, '</p><p>')
html = '<p>' + html + '</p>'
, then I will get markup overlapping:
This is text. <b>Bold text.\n
Still bold,</b> now plain.
becomes:
<p>This is text. <b>Bold text.</p><p>Still bold,</b> now plain.</p>
I know that HTML5 allows overlapping tags, but it is still very-very ugly. I want to get something like this:
<p>This is text. <b>Bold text.</b></p><p><b>Still bold,</b> now plain.</p>
How can I fix this problem?
UPD. <br/> is not what I need - I intend to use Kramdown with custom parser to generate Markdown from this string, and in the string I need open and closing tag for each paragraph.
Insert HTML <br> tags. They are well-defined as standalone tags that don't have paired end tags. If XHTML were still a thing, they would be <br/> tags.
By adding a <br> tag you can insert a single line break. It also has no end tag, so no need to try and close it.
W3Schools - < br > Tag
UPDATED:
If you need paired tags you could create a line break using CSS.
HTML
<p class="break">
Break right after this and
<span>before this</span>
</p>
CSS
p.break {
span {
display: table;
}
}
As shown here on Codepen.
I have just installed MediaWiki in my server.
When I try to create an article on the Create Article page, all the default <div> tags are being escaped and shown as text on the page, see screenshot:
Excerpt of article HTML rendered by MediaWiki:
<div id="mw-content-text"><p><div class='noarticletext'>
There is currently no text in this page.
You can search for this page title in other pages,
How can I fix this problem?
Thanks!
Most likely because it was so minimal, you did not satisfy all the newline requirements for using <div> in a MediaWiki article. Specifically:
<div> is a generic block container. Rules:
<div> should be followed by a newline
</div> should be preceded by a newline
</div> followed by text on the same line, two newlines and text before <div> on the same line should be avoided (because the two newlines only produce a space)
From Help:HTML in wikitext, https://meta.wikimedia.org/wiki/Help:HTML_in_wikitext#.3Cdiv.3E
Recommendation
Fulfill the newline requirements, for example in MediaWiki source for that article, write:
<div class="noarticletext">
This is on a new line, fulfilling the rules, so this div should now render.
</div>
Preview or save to view the results.
For my Jekyll blog, I want the images to span the whole width of the column, while having padding on either side of the text, like this: http://www.webdesignerdepot.com/2015/05/the-ultimate-guide-to-web-animation
The main problem I'm having is that Jekyll wraps images in <p> tags, so there's no way (that I know of) to target the width of images without and not the paragraphs.
<p>
"Some text."
</p>
<p> <img src="#"> </p>
How would you suggest tackling this issue?
I think Davids answer is really good. However, if you have no problem solving this with jQuery, you can do this:
$('.content > p > img').parent().css('padding','0');
That way your markdown will stay clean.
I understand that you are writing your post/page in markdown.
In order to apply a specific style to the P container you can use kramdown block attributes to set a class on it.
Some test
{: .imgContainer}
Will render as
<p>Some test</p>
<p class="imgContainer"><img src="/path/to/img.jpg" alt="Alt text" /></p>
You can then style .imgContainer.
You can also choose to create an HTML block. This is done by wrapping an img tag in a div like this:
line
<div><img src="image.jpg" /></div>
line
No clean markdown, but a pretty clean solution nevertheless. Found the solution here.
I am creating an online tutorial and I'm displaying the html code by wrapping it in the <pre><code> tags. I would like to be able to highlight certain sections of the code. Is there a way to do that when the html is wrapped in the the <pre><code> tags?
<div data-role="page">
<h1>Hello</h1>
</div>
I would like to be able to highlight the "page" value of the data-role attribute. I tried to surround the "page" code with a span tag and style it, but the span tag showed up in the code. I also tried to use < and $gt; thinking maybe that would escape the < > around the span tags. It did, but it showed up in the code.
Again, I'm trying to display the code (without screenshots) with certain sections of the code highlighted with yellow.
You have to escape everything but the tag. I used <mark> since it seems more semantically correct:
<pre><code><div <mark>data-role="page"</mark>>
<h1>Hello</h1>
</div></code></pre>
Example http://jsfiddle.net/MFzsS/1/