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>
Related
In VS Code, I use Beautify extensively. But it unnerves me that closing tags always wrap on the same line as "floating" text, or self-closing tags. For instance, before Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png">
</div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some...
</div>
And after Beautify :
<div class="wrap">
<img src="/wp-content/uploads/2018/08/image.png"> </div>
<div class="wrap">This is just some text
<strong>but it needs to be emphasized</strong>! And then some... </div>
Is there a setting, or another extension that could help get the code closer to what it looks like in the first example, or am I just doing things wrong ?
It doesn't matter much most of the time, other than being a bit ugly to my taste, but yesterday I saw that it actually created problems with Wordpress, I just can't use Beautify anymore, it risks breaking the formatting.
There isn't an option to force the end tags to new lines.
One setting that helps is preserve_newlines. Enabling that should keep your tags from getting pulled back to the same line if you have them on their own line.
Version 1.8.1 of js-beautify (the library underlying Beautify for VSCode) improves the behavior in this area, but still doesn't have an option to force the end tags to new lines.
Several issues have been filed around this, including #1468 and #1413. PRs are always welcome.
I do not know about that. If you want a similar result to the top bit of code you could use Glitch.Com, Made by the people who made stackoverflow. Glitch hosts your website (website.glitch.com) and has a nice editor, Not to mention project rewind if you want to revert to a previous version.. You have light and Dark theme too.. It automatically closes tags like this
<h1>
</h1>
I think it is perfect compared to any other editor, You can have multiple files too.. no download required. Auto saving and perfect for any developer :3
In VS Code I am having trouble in formatting HTML.
For example, I write a list of tags inline and I press Shift+Alt+F and nothing happens.
I noticed this:
If I write:
<div><span><p></p></span></div>
nothing happens when I do the auto format.
If I write:
<div><div><div></div></div></div>
then it becomes:
<div>
<div>
<div></div>
</div>
</div>
hope this will help you to help me...
We had the same problem in my dev team. Please check or try the following things:
Are the keyboard bindings correct?
Is selected code language HTML?
Have you restarted VS code?
Begin a small piece of the formatting and then try again (for some reason it
thinks its already correct.
There are a certain list of tags that are ignored when auto formatting - these are defined in the setings.json file under
html.format.unformatted":
So go to settings (Command-Comma on a mac) and search for that setting and remove the tags you do want formatting.
The bad news is that it still doesn't format how I think it should - i.e. the isn't indented inside the but it at least puts it on a new line for you!
This is a VS code bug. I installed the 1.17 and it worked very well https://code.visualstudio.com/updates/v1_17
I'm trying Slim templates in a new project (after using Haml for quite a while). While overall experience is great, I've run into a problem with spaces being always inserted around tags which normally use display: block
Say,
ul.ampm
li.am am
li.pm pm
generates
<ul class="ampm">
<li class="am">
am
</li>
<li class="pm">
pm
</li>
</ul>
while
.ampm
span.am am
span.pm pm
generates
<div class="ampm">
<span class="am">am</span></span class="pm">pm</span>
</div>
Normally it's not a big issue, but we use responsive layouts which applies display: inline-block to li tags; obviously, having whitespace between them breaks the layout.
I'm aware of
Slim::Engine.options[:pretty] = true
option (and turning it on does remove the offending whitespace), but it makes all generated source hard to read, not just the part I'd like to fix.
< and > in Slim seem to do the opposite to what I need - they're intended to be used for adding whitespace around inline tags.
So...
is it possible to remove whitespace around a single block tag in Slim similar to HAML whitespace eaters? (Without the impact of turning off the pretty option, that is)
if not, is it a fundamental Slim restriction ("by design") or something which is on the roadmap and would be potentially implemented in the future?
Much appreciated.
I worked around this by reverting back to inline HTML in the critical places. For me, it was adding a collection of options to a select:
select
- my_collection.each do |item|
<option value="#{item.id}">#{item.name}</option>
I can put up with this in the few cases where it really matters (as it did for me in the option elements). But if you need better whitespacing throughout your code, I think you're out of luck.
is it a fundamental Slim restriction ("by design") or something which is on the roadmap and would be potentially implemented in the future?
I'm going to go with "no" for both of those. It looks like the Slim team just implemented a naive algorithm and didn't look back. Case in point, this quote from the GitHub issue tracker:
The pretty renderer is not working well under some circumstances since Slim's focus lies on performance. If you have time please provide patches for the pretty renderer of the temple project https://github.com/judofyr/temple and also provide test cases.
Yes, I am struggling with displaying data from our database that CONTAINS markup! One particular field I am displaying has an open-bold tag but no close bold tag. I am trying to 'contain' this markup so it doesn't affect the rest of the page.
The data coming from my database is like this text:
this is soem nasty <b>data
(note the lack of a closing < /b > tag)
If I enclose the markup in a div, the rest of the page is bold:
<div>this is some nasty <b>data</div>
However if I wrap it in a table like this:
<table><tr><td>this is some nasty <b>data</td></tr></table>
All is well! In fact, the DOM inspector for both FF (FireBug) and IE9 show the tree. In the div-case, it shows the open-b tag and the rest of the document contained within it. But the table seems to enclose it.
How can I get this to 'close the b' without a table?
You use a closing </b> tag properly, like any sane human being.
You can use DOMDocument and tidy to try and fix the malformed markup in case you have no control over it, but it's best if you could fix it before it got to your database.
I've read somewhere that HTML Purifier should be able to achieve this. Might be worth trying.
I took a cue from HTML rich-text editors like TinyMCE and built up an IFrame. It seems to contain the arbitrary, possibly-mal-formed content better.
I am trying to search/select a link in a page that is underlined, while others are not. The source is something like this:
<a href="someurl1">
<b>
<u>Some ulined text</u>
</b>
<u></u>
</a>
<br>
Other link text
<br>
Another Link text
<br>
I tried something like
link = browser.link(:u?, true)
link.exists?
I get the following errors
TypeError: expected one of [String, Regexp], got true:TrueClass
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:152:in `check_type'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:189:in `normalized_selector'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:188:in `each'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:188:in `normalized_selector'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:76:in `find_first_by_multiple'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/locators/element_locator.rb:33:in `locate'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/elements/element.rb:260:in `locate'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/elements/element.rb:247:in `assert_exists'
from /usr/lib/ruby/gems/1.8/gems/watir-webdriver-0.2.4/lib/watir-webdriver/elements/element.rb:31:in `exist?'
Edit:
So I am actually using this for screen scraping rather than testing. That may explain the reasons why watir does not support this directly since CSS and other better practices make sense for testing and when you the HTML development and testing go hand in hand. Hoserver from a scraping perspective, the text formatting is what the user sees, and searching underlined, bold links etc. make sense for scraping.
I've never seen that kind of attribute used in a test case before. I also haven't seen any code support for it. You may have to roll your own. Here is an example borrowed from Zeljko
def hasUnderlined(browser)
s = false
browser.links.each do |l|
if l.html.downcase.match /\<u\>*\<\/u\>/
s = true
end
end
end
def getUnderlined(browser)
browser.links.each do |l|
if l.html.downcase.match /\<u\>*\<\/u\>/
return l
end
end
end
I don't think what you want is possible directly because the underline is not an attribute of the link tag, but a formatting tag that apples to just the text in the link.
However, in modern web pages, formatting is often controlled by a combination of CSS and attributes such as class names, which ARE something you could specify when identifying a link. So IMHO your best bet here might be to talk a little with your developers about how they are coding the site and see if they are perhaps open to increasing the testability of their code by using slightly more modern techniques for controlling what links are underlined, such as say using CSS and basing the underlining on a class name. (There's a lot of other good reasons to use CSS for controlling formatting instead of embedding it directly in the HTML, but unless your guys are fresh off the html-banana-boat so to speak, they should not need to be taught why using CSS is a good thing)
That would let you search for a link according to the class attribute that was being used to cause CSS to underline the text
If your developers are not open to such an approach to make their code more testable, then I think your only option is going to be to create your own ruby code for this and modify your copy of water (see #Dave's answer), and then be prepared to maintain that custom patch any time you update watir etc.
So, the only thing you know about a link is that it is underlined?
I thought this would do it (using the latest watir-webdriver gem):
browser.link.u.click
But I got this:
NoMethodError: undefined method `u' for #<Watir::Anchor:0x00000100cbb3c0>
Jari (watir-webdriver developer) said he thinks u tag is not in HTML spec.
By the way, this works:
browser.link.b.click
Jari suggested trying xpath, but I thought css selectors would be nicer to read. Here it is:
browser.element(:css => "a b u").click