I use codecolorer wp plugin to show raw html codes. But my problem is that I can not customize the codes inside. For example, I would like to make some words in bold. Also, i can not colour the codes exactly as I would like (each code individually).
Do someone know how to customize choosen codes within the raw table or tell me another wp plugin which let us customize each codes?
I could do it by myself without any plugin, just to change ">" and "<" with html names but i have a code which includes both types <, > and " of codes:
<span class='post-comment-link'>
<b:if cond='data:post.hasJumpLink'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> |
</b:if>
...
What Stackoverflow uses here for the raw html codes (codes between apostrophes) would be the best solution but I did not find on internet.
Ok, i got the answer ! It is a bit complicated but essential :
You must go to Visual text editor
Paste the code as it is
Change to HTML editor (Text editor)
The > and < are changed to > and < and the " is changed to " automatically.
Beeing already in HTML editor (Text editor), we can add codes for customize, for example to make the line bold, we add the <b></b> codes normally : <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
Take care NOT to swith back to Visual editor or you can start everything from the beginning !
Related
Are there any free online HTML editors which preserve custom attributes in the code when you're editing the text field? The ones I've tested remove them beyond W3C standards (list below, will add to post based on suggestions).
EDIT: The idea is to have the changes I make to the output be reflected in the text fields of each HTML tag, then copy the changed HTML back out again. More advanced playgrounds like Codepen/JSFiddle unfortunately don't allow editing of the output, just the code.
https://htmlg.com/html-editor
https://html5-editor.net
https://wordtohtml.net
Example code - post in the HTML field of editor then change the text field:
<a id="id" class="class" first="FIRST" last="LAST">
This link has information outside of the conventional attributes.
</a>
Try these:
- https://jsfiddle.net/
- https://codepen.io
Is it what you want?
This should be very simple, i can not believe that a company the size of Wordpress cannot provide users a very simple way to make line breaks.
I know how to use the text tab and code the page using html (im a developer). However my clients have absolutely no idea what html is so they obviously can not use it.
All the client wants to do is make a "space between lines" , in our terms a break line. They only want to use the visual editor.
Now when they start typing and hit enter, it creates & nbsp; or closes a paragraph tag.
Many articles are saying that shift + enter will make one, however this 100% does not as ive tried.
Ive tried a plugin that most articles are suggesting called "tinymce advanced". But this does not resolve the problem.
Is there any way possible for a normal user with no html knowledge to only use the visual editor and create br lines without actually using code?
Holding down Shift+Enter definitely works.
Alternatively, you can always prevent Wordpress from automatically adding <p> tags to the markup using the following code inside of your theme's functions.php file:
remove_filter('the_content', 'wpautop');
I had this problem on my site, it began when I updated the theme, which had not been updated for years.
The "miraculous" solution was to update
all the plugins as well.
I have realized that the
<br / > and the < p >
symbols are not present in the wp editor in text mode
So there must be a conversion between \n (newline) and <br / > and < p > taking place, I have not investigated this further, but maybe somebody can explain how WordPress is working.
With the WordPress upgrade to version 3.2, the text editor seems to remove the line break by itself.
Add a filter in the functions.php file which adds a clear attribute to the <br/> tag. When the attribute is added, the <br/> tag is not removed by WordPress.
function clear_br($content){
return str_replace("<br/>","<br clear='none'/>", $content);
}
add_filter('the_content','clear_br');
Then apply this filter on a variable where you need break should come in that text content
$specification = apply_filters( 'the_content', $specification );
For more info: https://blog.templatetoaster.com/wordpress-line-break-not-working/
This small code fixed my issue.
echo nl2br(category_description( the_content);
Just replace the content tag with this in you file
This question already has answers here:
How to display raw HTML code on an HTML page
(30 answers)
Closed 2 years ago.
I know it is possible because this website does it, but I tried researching how and just got a bunch of junk, so how do I add tags to a website paragraph without the browser interpreting it as code.
For example, if I have <p><div></div></p>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?
I have been writing tutorials for school, and it would be much easier if I could add the code directly to the webpage in text form instead of images, so students can copy and paste it.
Look at how this website itself achieves this:
<p>For example, if I have <code><p><div></div></p></code>, I want the div to display in the browser as text not have the browser interpret it as html. Is this complicated to do?</p>
You need to replace the < and > with their HTML character entities.
There are many ways to use:
Replace < with <
`<h1>This is heading </small></h1>`
Place the code inside </xmp><xmp> tags
<xmp>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
</xmp>
I do not recommend other ways because they do not work on all browsers like <plaintext> or <listing>.
You want to look into something called HTML Entities.
If you want the < character to appear on a website, for example, you can write this HTML code: <. These are the five basic HTML Entities and their source code equivalents:
< <
> >
" "
' '
& &
If you are using a programming language (such as PHP or ASP.NET), then there is probably a built-in command that will do the conversion for you (htmlspecialchars() and Server.HtmlEncode, respectively).
Use the tag <PRE> before a block of reformatted text and </PRE> after.
The text between these tags is rendered as monospaced characters with line breaks and spaces at the same points as in the original file. This may be helpful for rendering poetry without adding a lot of HTML code. Try this:
Mary had a little lamb.
Its fleece was white as snow.
And everywhere that Mary went
the lamb was sure to go.
To add plain text code in a webpage, HTML Character Escaping is needed on five characters:
< as <> as >& as &' as '" as "
(OR)
<xmp> tag may also be used as an alternate, this tag disturbs the style and is obsolete.
<xmp>Code with HTML Tags like <div> etc. </xmp>
Use the html entity/special character of the tag, such as < (for less than)
<p> in html -> <p> in browser
You could also write <p> since there is no ambiguity about the opening tag.
Many languages have built in methods to convert HTML special characters such as php's htmlspecialchars
You need to escape the HTML tags, namely the less-than sign. Write it as < and it will appear as < on the HTML page.
Your html needs to not be in tags. If you use the <> tags you will have it converted into code not text, if I was to write <br> in the middle of a sentence then it would do this You will need to Write the code in code so to speak, using the < > (< >)
and then you get what you need.
I just discovered a much simpler solution at CSS-Tricks...
Just have your outer-most wrapper be a 'pre' tag, followed by a 'code' tag, then inside the code tag put your code in paranthesis.
The simplest way to do it without having to reformat your text using entities is to use JQuery.
<div id="container"></div>
<script>
$('#container').text("<div><h1>Hello!</h1><p>I like you.</p></div>");
</script>
If you then do alert($('#container').prop('innerHTML'));, you get <div><h1>Hello!</h1><p>I like you.</p></div>
How useful that technique is depends somewhat on where your material is coming from.
Use iframe and txt file:
<iframe src="html.txt"></iframe>
I have tried countless plugins, codyfying HTML with escape keys, and my blood is beginning to boil. Switching between Visual and HTML mode is actually changing my content, ie destroying it!!!
OK, i figured out what to do.
First go into visual mode.
Select Preformatted in the formatting drop down. A little grey box is created.
Inside the grey box, copy and paste your raw HTML.
Save it and switch from visual to HTML views a few times. There should be no mangling.
IT IS ABSOLUTELY CRUCIAL that you paste into visual tab, instead of in the text tab, or it will get stuffed up completely (very unintuitive. You would think it would work the other way araound).
Wordpress does a strange thing where if you switch between visual and "text" mode (HTML mode was renamed in 3.5 update) it strips any tags that appear empty which often times may not be. This might be what you are experiencing if I am understanding the problem correctly.
If you are just trying to display code on your website you should be able to wrap the code like this:
<code><p>Example code post</p></code>
This is laid out in these guidelines here: http://codex.wordpress.org/Writing_Code_in_Your_Posts
If it is a block of code that needs to not wrap you could also use the "pre" tag like so:
<pre><code><p>Example code post</p></code></pre>
This is described very well here: <code> vs <pre> vs <samp> for inline and block code snippets
Yes, it is absolutely possible. You can follow any of the above mentioned methods. I prefer the following way.
First of all, decode the HTML code using online html decoder. You can find any on google. Then, You can paste the decoded code on your post. The benefit of this method is that, your indentation won't be lost.
Decoded Code
Rendered View File
Hope, it helps future reader to find a way.
Wordpress is very buggy. It took me a long time to finally succeed. For my Wordpress.org installed on my pc I tried: go to visual mode, add pre-formatted text block, copy/paste decoded or encoded. I tried :
<pre><code><p>Example code post</p></code></pre>
That did not work.
The only way it works for me is:
Go to visual, instead of adding a pre-formatted text block I create a paragraph text block, copy/paste the encoded HTMl and then convert it to preformat.
Hope that helps.
Perhaps, You should try out this plugin
http://wordpress.org/extend/plugins/insert-html-snippet/
Hope this helps!
One way to do is to make the code commented. Something like,
<!--div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div-->
instead of
<div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div>
{ eBayStoresItemList DISPLAY="1" } this tag will display all items of my store in grid view but it is not working when I use in my store. No error will be displayed.
Am I missing something? Please suggest how to do customize store pages in ebay.
In any html editor, when you try to copy the code and directly paste it in the design view, the editor changes the source code and converts some special characters.
For example,
{eBayStoresItemList DISPLAY="1" SIZE="15"} will be changed to {eBayStoresItemList DISPLAY="1" SIZE="15"}
Or
eBayStoresItemList DISPLAY="1" } to {eBayStoresItemList DISPLAY="1" }
This is because the editor automatically converts double quotes and inserts the html code for it.
The solution:
Go to the code view of your html, or try to open it with notepad and copy/paste the oraginal code exactly as it is.
Good luck.
It might be because you have spaces in there:
{ eBayStoresItemList DISPLAY="1" }
Try this:
{eBayStoresItemList DISPLAY="1"}
See also: the Special Tags help topic on eBay
0 - List view
1 - Gallery view
Does that work..?