Whenever I reformat html source code in Visual Studio with Ctrl-K, Ctrl-D it formats my source code like this:
<p>
text</p>
<p>
more text</p>
How can I make it use the following format instead?
<p>
text
</p>
<p>
more text
</p>
I know that there are settings at Options-> Text Editor -> Html -> Formatting, but I could not find suitable there.
Thanks,
Adrian
Edit: I've checked the tag-specific settings, and page break for p tags is set to "Before opening, within, and after closing". Also, the little preview shows exactly the format I want to have. But Visual Studio still does it wrong. Could this have anything to do with Resharper being installed on my system?
The problem has nothing to do with ReSharper. This is a feature by design of the Visual Studio Source Formatter where it will attempt not to change the semantics of an element due to formatting options that you specify.
So, you specified that you want the p tags to have breaks within the content, but a break after a p tag would change the semantics of the content within the tag, thus the formatter ends up putting the closing p tag right after the content. To have the closing tag on a separate line you will need to explicitly add a space just before the end of the content and the closing tag.
Thus:
<p>content</p>
will produce:
<p>
content</p>
While (note the explicit inclusion of a space between the content and the closing p tag):
<p>content </p>
will produce:
<p>
content
</p>
This is discussed in a blog post by Scott Guthrie in the 3rd paragraph from the bottom. Start counting from the paragraph right above the additional links section.
Click Tools, Options, Text Editor, HTML, Formatting, Tag Specific Options.
Add a new Client-side tag for p (if it's not there already) and select Separate Closing tag and Before, within, and after closing.
Check this How Change Auto Formatting HTML In Visual Studio 2008 2010
Related
I am trying to transfer a text from a printed book into HTML5, but meanwhile I am trying to keep its thematic and page/paragraph/lines layout structure exactly as it is. For example, every page of the printed book is divided as a <div> section eg. <div class=page id=55> so that it emulates/represents exactly the page unit of the printed book, and also facilitate referencing. I don't care much how the text will be rendered on the browser, this is something that I can think about later. I just want the HTML and the browser to "know" the original pagination and layout of the printed book.
The problem is that in the printed book, some paragraphs or even boxes, tables etc span over to the next page. If I translate it to HTML, I do it like this:
<div class=page id=1>
<p>Once upon a time...</p>
...
<p>...and so the bold knight
</div>
<div class=page id=2>
slew the evil dragon.</p>
<p>Text...</p>
...
This is illegal in HTML, as we have a <p> tag being interrupted by a </div> tag, and then a new div element beginning with a plain text, which is closed by a </p> tag.
HTML would expect me to close the first part of the broken paragraph with a </p>, and continue with a new <p> tag after the div, but I am not doing this because it doesn't correspond to the pagnation of the original book, and would result in half-paragraphs being understood are 2 proper paragraphs.
So, how to use legal HTML while maintaining the theoretical page/paragraph/broken paragraph/page break structure and information, or at least making the brower "know" the original pagination? Is there a more appropriate tag or method to emulate the page break while keeping the page number id?
Perhaps something like
<p>...and so the brave knight<some tag(s) that show page 2 begins here>killed the dragon</p>
How about instead of encapsulating each page within a div you include a tag at the start of each page designating the page number. An aside tag seems appropriate for this.
<aside class="page-number" data-page="1">Page 1</aside>
<p>Once upon a time...</p>
<p>...and so the bold knight</p>
<aside class="page-number" data-page="2">Page 2</aside>
<p class="continued">slew the evil dragon.</p>
<p>Text...</p>
If you need to continue a paragraph then you'll have to break into multiple elements, but perhaps you can specify when a paragraph is a continuation of a previous one. For instance using the continued class as shown above.
If you really don't want to break the p tag then you could put a span within it that is only used for semantic reasons. Something like this;
<p>...and so the bold knight
<span class="page-marker" aria-hidden="true" data-page="1"></span>
slew the evil dragon.</p>
But this kind of makes less semantic sense than the previous solution.
Try adding display: inline; to either the CSS style of the class page or the style attribute of each page div.
Using <a name="foobar">Hello</a> in the text mode editor and switching to visual mode and back to text editor results in 'Hello'. Using latest wordpress 4.8.2. Anchor tag itself works but not sure why the contents are moved out of the a tag. Any idea?
This is the default behaviour of TinyMCE - the default WP editor, and also used in many other applications.
The format you are using is valid according to the HTML 4.01 spec:
<a name="foobar">Hello</a>
However when you use TinyMCE to insert anchors into content, it uses the following format:
<a name="foobar"></a>
...and it appears that it enforces this structure, even if you manually add an anchor manually with text between the tag.
However, you can use any tag (not just <a>) to define the anchor point, if you need to have text in your anchor. The following example from the HTML 4.01 spec shows an id on a h2 tag being used as the anchor:
Section Two
//...later in the document
<h2 id="section2">Section Two</h2>
So if you want to keep the structure you have, you can change your anchor to
Go to foobar
[...]
<p id="foobar">Hello</a>
Note on HTML5 the name attribute of the <a> tag has been deprecated in HTML 5 - use id instead
Hope that helps :)
Wordpress strips out <p> and <br> tags when switching between the visual and the text editors. Well, to be specific, it doesn't actually strip them out of the content, but it does not display them in the text editor view. Is there a way to stop it from hiding those tags?
I know about the tinymce advanced plugin, but is there a way to stop this behavior on a per-post/per-page basis without having to install the plugin?
If you add a meaningless data attribute to the <p> and <br> tags, they will continue to show.
Example
When switching from text to visual editor and back, the following text
<p>Some paragraph text <br> and a second line.</p>
becomes
Some paragraph text
and a second line.
However,
<p data-x>Some paragraph text <br data-x> and a second line.</p>
makes the tags remain visible:
<p data-x="">Some paragraph text <br data-x="" /> and a second line.</p>
This is useful on pages with more complex layouts that can shift around when the tags get stripped.
If the post is custom post type, you can add meta box with add_meta_box and there you can initialize your own editor with wp_editor which can be customized. For example you can pass settings to the tinymce like force_p_newslines which should force every new line to start with new paragraph
I'm using WordPress v 4.0
I've just created a new post, which contains a code block. This code block also contains some empty lines. I have used the "code" button on the in-built editor to enclose the entire code block in to a CODE tag.
The problem is, on my front end output, this CODE tag is being split up and enclosed in P tags. Here is the output I get for the block:
<div class="entry-content">
<p>
<code>some code</code>
</p>
<code>
<p>some code</p>
</code>
<p>
<code>some code</code>
</p>
</div>
This means I can't efficiently style the code block. I'd like to display the code block in a grey background.
Anybody have any ideas how to stop WP from formatting the block this way?
You must prepare your post with visual post editor and save when it is visual. Now, WP'll convert '<' and '>' to < and >
Instead of
<p>Hello <img src="helloworld.jpg"> World</p>
I would like to have:
<p>Hello</p><img src="helloworld.jpg"><p>World</p>
<p> has a padding of 40px and I would like the images to use all space available.
You can turn off paragraphs for all content (link), but as far as I know you can't turn it off for certain elements only.
What you can do is modify the HTML after retrieving it from the database but before outputting it. You haven't specified your server-side language, for C# I've found that CsQuery is great.