This should be easy points as I forgot how and can't find it on Google.
How do I accomplish something like this:
Blah Blah Blah some code Blah Blah
in wordpress? pre doesn't work as it will give a line break.
It may be better to use <code> than <pre> to display inline code, for two reasons:
it's treated as inline
the semantics of <code> are a much better match than <pre>
But definitely use CSS classes (as #Blender points out).
There's a caveat: <code> doesn't escape <> brackets, so if you want to display HTML then you have to manually escape brackets as < and >. (which you should really do anyway; tags in HTML really should be clearly distinguished from data)
<tt>text</tt> gives text
Wait... Wordpress? What HTML tags does it support?
You can have an inline <pre> by adding some custom CSS to your theme's stylesheet:
pre.inline {
display: inline;
}
Now, when you write:
I am some <pre class="inline">code, see?</pre> Foo.
It shows up like this:
I am some code, see? Foo.
In this case is better to use <code>, it has a more semantic html syntax and any css workaround won't be needed to make it inline
p {
font-family: sans-serif
}
code {
background: #c7c7c7;
padding: .1rem .2rem;
border-radius: .2rem;
}
<p>
Some text <code>some code</code> some text
</p>
Related
I am trying to write guide like in codeacademy.
I want to write line with part of code and then white text.
i tried couple of methods, the text always go down line below the <code> or <xmp>
How can I create straight line with some code, for example red colored, then some text? I tried this:
<xmp style="color:#C34D57; "> <!DOCTYPE html> textextext </xmp>
and dozen more methods
As MDN states, the <xmp> element is obsolete and should not be used. It goes on to say:
Use the <pre> element or, if semantically adequate, the <code>
element instead. Note that you will need to escape the '<' character
as '<' to make sure it is not interpreted as markup.
So you could use:
<pre><!DOCTYPE html> textextext </pre>
Example:
pre {
color: #C34D57;
}
span {
color: green;
}
<pre><!DOCTYPE html> <span>textextext</span> </pre>
See also https://developer.mozilla.org/en-US/docs/Glossary/Entity
friends. I'm using atom to write html codes. Every time I input the word "p", it can generate 3-line codes automatically:
<p>
</p>
now I give a inline class to put two p elements in one line:
.inline {
display:inline-block;
}
<p class="inline">
Hi, friend
</p>
<p class="inline">
s
</p>
I want it shows "Hi, friends" in browser, but it shows "Hi, friend s" with a space between "friend" and "s".
I know the problem is that html treats a line-break as a space.So if I write the code as <p class="inline">Hi, friend</p><p class="inline">s</p>, then I can get the result I want. So I have two questions:
Can I avoid the needless space when write codes in multiple lines?（I tried to search on the web, only get the answer "No": Advanced HTML multiline formatting - removing not need spaces from new lines）
If No.1 can't, can I autocomplete the p element in only one line as <p></p> while using atom?(Actually, after autocomplete the codes, I can use Ctrl+J to join two lines. However, this only works for two lines(not 3 or more) and will change original line-break into a space)
Waiting for answers sincerely. Thanks.
Hi you can remove white space, see my fiddle here
you can do this by keeping in one line like this
<p>Hi, friend</p><p>s</p>
p{
margin: 0;
display: inline;
}
or by this method
<div class="parent1">
<p>Hi, friend</p>
<p>s</p>
</div>
p{
margin: 0;
display: inline;
}
.parent1 {
font-size: 0;
}
.parent1 p {
font-size: 16px;
}
Try display:table-cell - like this:
.inline {
display: table-cell;
}
<p class="inline">
Hi, friend
</p>
<p class="inline">
s
</p>
Final edit:
This answer was wrong and I know it is wrong. I'm leaving it for posterity because some of the information below is still useful.
Edit: forget everything I wrote below-- the problem is just that your CSS is set to display as inline-block, not inline.
.inline {
/*display:inline-block;*/
display: inline;
}
Check out this post:
How to remove the space between inline-block elements?
This is known, expected behavior for inline-block elements. And it's not just the space because of the new line in the element-- it happens even if they are on the same line, like so:
<p class="inline">Hi, friend</p>
<p class="inline">s</p>
There are known techniques for handling this behavior (see here and here -- none of it is super pretty, but it's the reality of the situation.
To summarize the above links, they are basically means of trying to remove the spaces in the editor in ways that aren't super hideous or painful My preferred method is commenting out the spaces, like so:
<p class="inline">Hi, friend</p><!--
--><p class="inline">s</p>
...but it's really up to preference.
Alternately, you can leverage other options like floats or flexbox to achieve what you are looking for.
So I'm having a sorta minor issue that is really bothering me. I'm trying to make a single line but the live site is separating the h3 and the sup onto two separate lines.
<p><h3><b><font color=" crimson";>CONSENT</font></b></h3> <sup>
Forgot? I got you </sup><a
href="http://www.exampledomain.com/example"
target="_black">Script</a></p>
The concept is to have the "Forgot? I got you" and the button be on the same line but spaced a little further from the word "Consent".
As you haven't really provided an exact example of what you want your result to look like, you might consider using the following mark-up :
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
What this does :
<h3> and other heading tags are block level elements, which means that they will take not be rendered inline by default. You can change this by indicating that you want to display them inline by using display:inline; or display:inline-block;
The <font> tag hasn't been used in ages, you are better off simply applying a style attribute to the most relavent tag to style your contents.
You were previously using all of these tags within a <p> tag, which can constitute invalid markup. They have each been broken out, if you need some type of container tag, you can use a <div>.
Replaced the superscript tag <sup> with a small tag <small> to keep everything on the same line. You could replace this if you preferred.
Previously, you were using target="_black", which undoubtedly you meant to be target="_blank" for your <a> tag.
Generally, you would want to avoid using an abundance of inline style tags in favor of using an actual CSS file along with class attributes.
Example
<h3 style='color: crimson; display:inline-block;'>
CONSENT
</h3>
<small>
Forgot? I got you
Script
</small>
Your code needs a lot of work but really you could achieve this with simple CSS. As simple as it gets would be using a vertical-align on a <span> element, unfortunately vertical-align: middle; does NOT work directly on your <p> or <h3> tags. There are plenty of other ways to achieve this with separate <div>'s and all but here is the most basic.
HTML:
<span class="vAlign">
<h3 class="crimson flt-left vAlign">CONSENT</h3>
<p class="vAlign"><a href="http://www.exampledomain.com/example"
target="_black">Forgot? I got you</p>
</span>
And CSS
.flt-left{
float: left;
}
.crimson {
color: crimson;
}
.vAlign {
display:inline-block;
vertical-align: middle;
}
Well, I have a H2 tag with a company name and next to that in the same line we need to have a Superscript tag (TM), I have:
<h1 class="Red">Company Name</h1><sup>™</sup>
I get:
Company Name
™
I guess there is a way to avoid this newline between those tags using CSS or something but I am not able to figure it out, I will appreciate any help.
The proper format is to wrap the entire phrase inside your <h1> tag like so
<h1 class="Red">Company Name<sup>™</sup></h1>
Keep in mind with this answer that any styles you apply to the h1 tag will apply to your sup tag as well.
<h1 class="Red">Company Name<sup>™</sup></h1>
The main issue I run into with sup tags is that they can push up the line-height on lines containing them.
It's easy to fix with the following CSS; just figured it was worth mentioning.
h1.Red sup { line-height: .1em;}
Add this to your CSS.
.Red {
display:inline;
}
Header tags default to line breaks so you need to set it to display inline which will not break after the end h tag
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/