How to format HTML in Sublime Text 3 - html

I’m using Sublime 3 to prepare HTML files that will eventually be turned into an epub in Sigil. This is working very well except that the formatting isn’t helping the readability.
I have HTMLbeautify and HTML/CSS/JSPrettify. They do a great job with the indentation but I would also like a method of putting the opening and closing paragraph tags on new lines, something like
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum dolor in lacus efficitur consequat. Cras turpis dolor, pretium sit amet tincidunt sed, porta iaculis lectus. Morbi consectetur vitae justo eu pretium.
</p>
Can anybody help?
I've read all the other Sublime/HTML formatting queries and i can't find anything that quite covers this.

Just select all lines (Ctrl A) and then from the menu select Edit → Line → Reindent. This will work

Related

Is it possible to capture a block of nested HTML with PCRE RegEx?

Before you slate me, yes I know that you shouldn't parse HTML with regex, you should use a dedicated parser. I don't have that option in the language I'm using (Xojo) and for various reasons, I need to use RegEx.
I'm trying to capture an entire block of HTML that may or may not contain nested HTML elements. Examples:
<blockquote> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.</blockquote>
-----------------
<blockquote> This is the first level of quoting.
<blockquote> This is nested blockquote.</blockquote>
Back to the first level.</blockquote>
-----------------
<div>
Not nested
</div>
-----------------
<div>
Top level
<div>Nested</div>
</div>
I had come up with this pattern: <(\w*)>([\S\s]*?)<\/\1> but whilst it works for blocks of HTML it fails if the block contains a block of HTML with the same tags as the parent block. Online example here.
I'm using the PRCE variant of RegEx and coding in Xojo.
Does anyone have any useful advice on how to solve this problem? Thank you.

How to save (or convert) HTML content as RTE parsable content in Extbase?

I'm retrieving 3rd party html in my controller which I'd like to save (or convert) as RTE parsable content.
For example:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel tristique ex. Sed sit amet tempor sapien, at euismod erat.</p>
<p>Sed et leo sit amet lorem consectetur ultricies. Aenean iaculis non ligula aliquam pulvinar.</p>
Is parsed incorrectly when using f:format.html and results in:
<p class="bodytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel tristique ex. Sed sit amet tempor sapien, at euismod erat.</p>
<p class="bodytext"> </p>
f:format.raw will not be the solution for me since I need to translate hyper links to RTE <link> tags also.
So is there a way to convert or save my (3rd party WYSIWYG) content so it will be parsed correctly by f:format.html?
I think the solution is the parseFuncTSPath Parameter. Try this:
<f:format.html parseFuncTSPath="lib.parseFunc">... your HTML here ...</f:format.html>
You can create or use Rte View Helper to get the proper content rendering. For Creating view helper take reference. You can download RTE view helper from here

Kentico - CKEditor - Disable the Advanced Content Filter (ACF)

I'm currently developing using Kentico CMS, which makes use of CKEditor.
We're using Bootstrap as part of our development, and therefore sometimes require quirky HTML.
CKEditor seems to be auto-correcting the HTML:
Before:
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">NEBOSH Revision</h4>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare mattis vulputate. Nullam eu est quis risus congue feugiat. Sed ut erat accumsan.</p>
</a>
After:
<h4 class="list-group-item-heading">
<a class="list-group-item" href="#">NEBOSH Revision</a>
</h4>
<p class="list-group-item-text">
<a class="list-group-item" href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ornare mattis vulputate. Nullam eu est quis risus congue feugiat. Sed ut erat accumsan.</a>
</p>
I've been reading up on the "config.allowedContent = true" option to disable the Advanced Content Filter but it doesn't seem to be working.
I don't know if this is because I'm doing it incorrectly, or if it's because this option won't fix my problem.
Inside my config.js file I have tried setting:
CKEDITOR.editorConfig = function (config) {
config.allowedContent = true;
And setting it like this:
CKEDITOR.config.allowedContent = true;
CKEDITOR.editorConfig = function (config) {
Your problem has nothing to do with Allowed Content Filter. CKEditor 4.x is HTML4/xHTML 1.1 editor (static DTD) and those standards don't allow block elements inside of links (see this answer). This is why CKEditor's parser considers your HTML invalid and corrects it.
You got to change your markup to make it compatible with CKEditor (see this answer).

MultiColumn Text

Is there a way to specify that a text must be in multiple column and column width is defined in percent?
something like :
<div style="width:20%; max-height:100px;" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante.
</div>
if the text overflow the div bound a new column is displayed.
I'd probably advise having a look at CSS3's Multi Column functionality if you don't have to support older browsers:
http://www.w3.org/TR/css3-multicol/
This is not currently supported using native HTML. Currently JavaScript must be used to obtain this feature.
See: http://www.htmlgoodies.com/html5/tutorials/how-to-create-multi-columns-in-css3-and-javascript.html#fbid=uRKNCpHfmWY
This is a JavaScript Solution:
I did an iPad WebApp in my last term at the uni which was supposed be a newspaper app. To get the newspaper like rows we used this jQuery Plugin:
http://archive.plugins.jquery.com/project/Columnizer
or: http://welcome.totheinter.net/columnizer-jquery-plugin/
you can specify the width of your columns, the amount of columns and has quite a few features which might be useful for your purpose. (but we didn't need them actually...)

Replace single words/lines with text from multiple inputs

What would be the best method for replacing variables/words/lines of text in a larger "paragraph" of code?
Example:
Lorem ipsum dolor $SIT amet, consectetur adipiscing elit. Aliquam condimentum dolor ut est faucibus dapibus. Donec molestie dictum nisi, eu euismod $SAPIEN gravida in. Aliquam dictum, tellus eu facilisis laoreet, sapien nunc placerat turpis, eu pretium augue eros vel lectus. Quisque condimentum lorem $EROS, vel pharetra tortor.
I want to be able to enter text in a textbox/prompt to replace the "Variables" $SIT, $SAPIEN, $EROS with actual values automatically.
I trust I've made myself obscure? :P
I'm n00b at any sort of coding. I only know some basic HTML, PHP, and Java. But please give me a clear solution with an example or link or more help.
Thanks so much!
You must utilize JavaScript if you want to do it client-side, and any of the server-side ones [PHP, Python, Ruby] if you want to do it that way. In all of these languages there are equivalents of "string replace" functions, that'll take list of strings to search, list of strings to replace and subject that they will be working on. Solution for JS and PHP:
http://php.net/manual/en/function.str-replace.php
http://www.w3schools.com/jsref/jsref_replace.asp
The way that you'll do it is up to you.