HTML formatting in TextMate (automatic 'outdenting') - textmate

I'm using TextMate and indentation isn't working as I'd expect - more specifically, it doesn't 'outdent' closing tags for me.
I create a new HTML file, I move the cursor down to the body section ... and I type
<ul>(newline)
It appropriately indents the next line for me so I build the following
<ul>
<li>hello
</li>
</ul>
Clearly, the closing tags "could" be outdented to line up with their start tags. I'm surprised TextMate doesn't do this automatically. Am I missing something? Sometimes I like to type my opening and closing tags and then fill-in the blanks ... but I keep getting this:
<div>
</div>
It indents correctly - but it doesn't understand that this is a closing tag -- which means I've got to move the cursor behind the closing tag and outdent it myself.

Related

How to create a custom HTML div in Sphinx that isn't automatically nested within a subsubsection?

I'm using the wonderful Sphinx tool to create some documentation and I need to create a custom HTML div so that I can style it apart from Sphinx's other, automatically-created, divs.
This is possible to do using the container directive, but the problem is that if I use this directive below a subsubsection, it automatically nests the div created with the container directive within the subsubsection, like so:
<div id="automatically-created sphinx subsubsection">
...
<div id="my custom container"></div>
</div>
Whereas, I want:
<div id="automatically-created sphinx subsubsection">
...
</div>
<div id="my custom container"></div>
Is there any way to do this? Any help would be greatly appreciated!
Addendum:
One hacky way of potentially solving the problem is to create a new subsubsection so that Sphinx automatically places it on the same level as other subsubsections and then use CSS to hide its header etc. The problem with this approach, however, is that the new subsubsection automatically gets added to the sidebar in the RTD theme (which I'm using) and this is not what I want.
Untested. Try a super-hacky .. raw:: directive, where you would close the current section, then open a new unclosed <div>:
.. raw:: html
</div>
<div id="my custom container">
Then resume using reStructured text markup. This would "trick" Sphinx into thinking that the current section is still open and it would still add a closing </div> after the rest of your markup until it starts parsing the next section.

Closing anchor tags with HtmlAgilityPack

I am using the HtmlAgilityPack to scrape crummy html and get links, raw text, etc. I'm running into a few pages that have inconsistently closed <a> tags, like this:
<html>
<head></head>
<body>
<a href=...>Here's a great link! <a href=...>Here's another one!</a>
Here's some unrelated text.
</body></html>
HAP parses this, and helpfully closes the open <a> tag, but only at the very end of the document:
<html>
<head></head>
<body>
Here's a great link! <a href="...">Here's another one!
Here's some unrelated text.
</a></body></html>
In practice this means that the InnerText of any unclosed link contains all text from the rest of the page, which gets exciting when parsing a page that may contain thousands of unclosed tags and megabytes of text.
So, how can I make HAP close those tags immediately, ideally putting the close just before the next open so that there is never any overlap for an <a>? I've played around with OptionFixNestedTags and OptionAutoCloseOnEnd with no luck, and I've found advice on how to allow overlap, but I'm drawing a blank on actually fixing it.

CKEditor moving br tags

I'm having a problem with CKEditor changing my original paragraph formatting with negative side effects.
I start with a basic paragraph loaded into CKEditor using setData():
<p><span style="font-size:50px">My Text</span></p>
... more document content ...
In the editor, I move the cursor to the end of the phrase "My Text" and press enter (with config.enterMode=CKEDITOR.ENTER_BR setting enabled). Inspecting the markup inside the editor I now see:
<p><span style="font-size:50px">My Text<br><br></span></p>
... more document content ...
Then, when I call getData() to pull the contents from the editor and save the document to a database, the HTML extracted by getData() looks like this:
<p><span style="font-size:50px">My Text</span><br> </p>
... more document content ...
This is a problem because while editing, the <br> tag was inside the <span> and was subject to the 50px font size style. The user saw a 50px blank line before the next piece of document content. After saving the HTML to a database and reloading later the <br> tag is now outside the <span> and is not subject to the 50px font sizing and the blank line appears much smaller than before.
The round trip fidelity of the text formatting is not preserved and the user is frustrated by the results.
Can someone help me understand the results I'm seeing with <br> tags being reformatted and moved around during the editing life cycle, and how I might fix this problem?
Using CKEditor v4.4.1

CKEditor alters content

When I save my content, it changes things that I don't want to be changed. How can I make it so it would just save my content without changing anything?
Content before saving:
<a anything</a>
After save, the above example becomes:
<a a="" anything=""> </a>
I'm trying to find a config option that would make it so when I save my content, it would save it just as it is - without adding anything of its own.
This <a anything</a> is not a valid HTML and CKEditor works only with a valid HTML. So once you try to load this content into CKEditor it (or the browser) tries to fix it.
Quoting CKEditor basic concepts:
CKEditor is not a tool that will let you input invalid HTML code. CKEditor abides by W3C standards so it will modify code if it is invalid.

Middleman & Haml with Github-style fenced code blocks

I'm starting using Middleman for static web pages & blogging purposes. I'm using it with a ZURB Fondation based template, Middleman-Foundation. It employs Haml, and I'm indeed inclined to use Haml, with Markdown files occasionally.
I'm using redcarpet for markdown, to also make use of Github-style fenced code blocks for source highlighting. But I could not figure out how to setup it for Markdown in Haml.
I've checked middleman-syntax which works for .html.md but not for .html.haml. I've tried to figure it out from Glorify but failed. I've checked this and this too.
What are the basics steps to achieve working fenced code blocks in Haml Markdown to produce highlighted source code.
It would be awesome to have a set of steps from start for this, from gem install middleman and cloning/employing Middleman-Foundation, but any short, actual answer is welcome.
EDIT
I was able to achieve pygmentized code blocks in Haml with the following (sad that it seems not possible to use markdown with fenced code blocks for this...):
%li#simple3Tab This is simple tab 3's content. It's, you know...okay.
%li#simple4Tab
-code("ruby") do
:plain
def my_cool_method(message)
puts message
end
%h3 Buttons
But there's a lasting problem, this is what I'm getting:
As can be seen the first line is not correctly being indented, this is happening because the previous code snippet is not producing a heading linebreak:
<li id='simple3Tab'>This is simple tab 3's content. It's, you know...okay.</li>
<li id='simple4Tab'>
<div class="highlight"><pre><span class="k">def</span> <span class="nf">my_cool_method</span><span class="p">(</span><span class="n">message</span><span class="p">)</span>
<span class="nb">puts</span> <span class="n">message</span>
<span class="k">end</span>
</pre></div>
</li>
</ul>
<h3>Buttons</h3>
I cannot figure out how to break the line before the first <span>, following the opening <pre>, so that the code gets correctly indented like the other lines.
Desired:
<li id='simple3Tab'>This is simple tab 3's content. It's, you know...okay.</li>
<li id='simple4Tab'>
<div class="highlight"><pre>
<span class="k">def</span> <span class="nf">my_cool_method</span><span class="p">(</span><span class="n">message</span><span class="p">)</span>
<span class="nb">puts</span> <span class="n">message</span>
<span class="k">end</span>
</pre></div>
</li>
</ul>
<h3>Buttons</h3>
I was able to figure it out through trial & error using the bits of information provided by #bhollis, Haml reference, and this SO question pointed by the Glorify author.
This is the magical combination:
%li#simple3Tab This is simple tab 3's content. It's, you know...okay.
%li#simple4Tab
=preserve do
-code("ruby") do
:plain
def my_cool_method(message)
puts "Hello" + message
end
%h3 Buttons
The result (for this one I've enabled an emacs stylesheet):
This not only solved the question about the "missing" heading newline, but also removed the extra indentation that the referred SO question talks about.
I'm still open for shorter and better approaches. Three lines of preamble to input code is a bit inconvenient.
Check out the docs for middleman-syntax: https://github.com/middleman/middleman-syntax
Code highlighting is automatically included in Markdown code blocks (via Redcarpet), but in Haml, it's better to use the "code" helper:
- code("ruby") do
My ruby code here

Resources