MediaWiki creates <pre> tags after parse {{Template}} with html code.
How to prevent this tags?
Example template:
<span style="color:#FF0000">{{{1}}}</span>
In wiki html page looks like:
<pre>
<span style="color:#FF0000">Some Text</span>
</pre>
In basic templates like:
My name is {{{1}}}
no problem with <pre> tags.
PS <pre> tag creates unwanted borders around elements in MediaWiki.
Bergi's solution: avoid to indent some markup (either in the template or outside at the inclusion) with one (or more) spaces.
Related
I want to use an external CSS file for my markdown.
I added this at the top of my file:
<link href="./src/css/main.scss" rel="stylesheet"></link>
And was able to use CSS classes. But my problem is when I use a CSS class, it completely overwrites the markdown and the markdown formatting is gone.
For example I want to have a code section with font color red, I tried this:
<span markdown="1" class="font-red" >
```bash
quasar dev```
</span>
But this prints out the entire line in red. CSS overwrites the markdown formatting:
` ``bash quasar dev```
I tried to change it to:
```bash
<span markdown="1" class="font-red" >
quasar dev
</span>
```
But this prints the tag as text. This time, markdown formatting overwrites the CSS.
So how can I achieve a mixture of markdown and CSS format?
A code section where its font is color red?
Help please! Thanks
This is part of the markdown syntax. Markdown isn't parsed inside inline HTML. You need to recreate the HTML elements yourself.
Plus, you can't put block-level elements inside a inline-level element (like <span>).
Use this:
<pre markdown="1" class="font-red"><code>bash
quasar dev</code></pre>
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 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/
I need to include some codes in my html document
I've tried <pre> tag, but that didn't help.
How do I get this code into a document like text?
Thanks
Short Answer.
Encode your code using an online HTML Encoder and then put it inside pre
<pre>
<%--your encoded code goes here--%>
</pre>
Long Answer.
The above will only help you to show your code. If you want proper highlighting for your code, Try something like SyntaxHighlighter
Link: How to use SyntaxHighlighter.
You have to use html entities. Example:
<div>
Some Stuff
</div>
should be
<div>
Some Stuff
</div>
and it will render as the first one
You can use <pre> tag. Each time you insert any texts within the <pre> tag it wont get parsed as html document. One caveat though, if you try to put an opening HTML tag inside the pre tag, you have to do it like this:
<pre>
<TEST>
TEST!!
</TEST>
</pre>
Use the xmp tag. It is easier and quicker than using an HTML encoder. Example:
<h1>This is a heading.</h1>
<p>This is a pharagraph</p>
<xmp>
<h1>This is a heading.</h1>
<p>This is a pharagraph</p>
</xmp>
You can use a combination of the <pre> and <code> tags. The <pre> tag retains the formatting , and the <code> tag outputs in monospaced font. Wrap the <code> tag in <pre> tag, and paste whatever block of code in the <code> elements body. This will output like the following:
<pre>
<code>
function(){
var myVar = "This is code";
return myVar;
}
</code>
</pre>
Some people might crucify me not escaping my code. But this worked for me.
CSS
.tag:before{
content: '<'
}
.tag:after{
content: '>'
}
HTML
<pre>
<span class="tag">tag</span>
</pre>
<!--Instead of having to escaping all the character-->
<tag> </tag>
<!--Kinda interested to see why this is bad. I understand that not escaping code can be dangerous b/c of SQL injections and all sort of BS but why is this not a viable option-->
Use
encode
Example:
<br> -> encoded -> <br>
use <br> in your text
same answer as Ibu but maybe you want a fast way to encode your tags.
To not escape any characters at all, you can use a textarea:
textarea {
font-family: inherit;
font-size: inherit;
border: none;
background-color: transparent;
resize: none;
outline: none;
}
<div>In order to show a bullet point in html use the li tags:</div>
<div>
<textarea readonly><li>Hello</li></textarea>
</div>
<div>And this is what it will look like:</div>
<li>Hello</li>
Run the snippet and notice the <li> and </li> tags render verbatim rather than being converted to a bullet.
Now why do we need the CSS and the extra HTML tags and attributes?
The CSS removes all the styling from textarea since the textarea will typically include styling for borders, resize gripper, and will use "input" style fonts. The textarea tag needs the "readonly" attribute so users can't edit it. The extra div tag around the textarea makes the textarea insert more correctly into the document flow.
It has some extra steps and it changes the DOM considerably but if you really need to show text strictly without escaping any characters at all for whatever reason.
I guess you just want to display a piece of code so you can just use https://highlightjs.org/
include this in your web page:
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release#11.6.0/build/styles/default.min.css">
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release#11.6.0/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
then add the <pre><code> tags to wrap your escaped piece of code
you can use https://www.freeformatter.com/html-escape.html
<pre>
<code class="language-html">
<h1>this is my HTML code</h1>
</code>
</pre>
or for CSS code
<pre>
<code class="language-css">
input { caret-color: red;}
</code>
</pre>
doc here https://highlightjs.org/usage/
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.