Emacs indentation for html (web-mode) doesn't work properly - html

I'm using web-mode in Emacs to get syntax highlighting and indentation for PHP and HTML.
If I have this code in a .php file
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
And then put the cursor on the middle line and press tab then nothing happens.
I want it to look like this:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
If I put the text in a tag on a single line and try to indent, it works.
This:
<p>
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</p>
turns into this, which it should
<p>
<a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
</p>
My .emacs file
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.jsp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))
(setq web-mode-markup-indent-offset 4)
(setq web-mode-css-indent-offset 4)
(setq web-mode-code-indent-offset 4)
(setq web-mode-indent-style 4)

try put these setting in a hook function:
(defun my-web-mode-hook ()
"Hooks for Web mode."
(setq web-mode-markup-indent-offset 4)
(setq web-mode-css-indent-offset 4)
(setq web-mode-code-indent-offset 4)
(setq web-mode-indent-style 4)
)
(add-hook 'web-mode-hook 'my-web-mode-hook)

Could you add this
(add-to-list 'auto-mode-alist '("\\.php\\'" . web-mode))

Related

How to preserve leading whitespace in Jinja variable?

I have a variable source containing multiple lines containing indentation (i.e. leading whitespaces):
.. admonition:: Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean in dolor
id massa convallis eleifend sed eu mauris.
However, when printed with {{ source }}, Jinja actually prints
.. admonition:: Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean in dolor
id massa convallis eleifend sed eu mauris.
i.e. it strips leading whitespaces! How to preserve them?
Try:
{{ source|indent }}
See jinja documentation indent (default indentation is four spaces, the first and blank lines are not indented - which is exactly what you need)
When reproducing your example this way:
import jinja2
source = """
.. admonition:: Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean in dolor
id massa convallis eleifend sed eu mauris.
"""
template = jinja2.Template("""Content of 'source': {{ source }}
jinja2 version {{ version }} was used.""")
result = template.render(source=source, version=jinja2.__version__)
print(result)
the output was
Content of 'source':
.. admonition:: Lorem ipsum dolor sit amet
Consectetur adipiscing elit. Aenean in dolor
id massa convallis eleifend sed eu mauris.
jinja2 version 2.11.3 was used.
(so the indentation of source was not modified by jinja2).

Add (click) method to link in text block in Angular component

I have a small problem. I'm getting a text from the server with innerHtml which is inserted in Angular component. Inside of this text, there are possibly some links. Example text block looks like this:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Is there a way to insert a bind there a click action like this?
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="some.link.com" (click)="methodName('http://domain.tld/page.html')">Link<a/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Thanks.
If I get you right, you render html loaded from server with innerHtml, in this case you can't use Angular directives inside of this template. But you can add listeners with common JS (document.addEventListener) after content rendering.
#Component({
template: `<div #wrapper [innerHTML]="sanitizedHtml"></div>`
}) class MyComp {
#ViewChild('wrapper') wrapper: ElementRef<HtmlElement>;
ngAfterViewInit() {
const links = this.wrapper.naviveElement.querySelectorAll('a[href]');
links.forEach(link =>
link.addEventListener('click', this.linkClickHandler.bind(this));
);
}
linkClickHandler(event: MouseEvent) {
...
}
}
For dynamic links you can bind your desired url link in you a tag like the following
<a [href]="some.url">Link</a>
If some is an object.
For click event you can have something like
method(url: string) {
window.location.href = url;
}
then you'll pass your url string like (click)="method('http://domain.tld/page.html')"

Replacing values from JSON result with HTML and CSS

I'll try to explain this the best I can. There is a JSON result which separates every paragraph of the text and marks them with 0 or 1 (or even 0.3 etc). The Stringified results on the frontend shows those numbers too. Is there a way to replace these and apply CSS styles based on the value (0, 0.1, or 1)?
the JSON:
RAW:
"content": [
[
0.0,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
[]
],
[
0.0,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
[]
],
[
1,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
[]
]
],
...
What I get in the front end is:
0Lorem ipsum dolor sit amet, consectetur adipiscing elit.0Lorem ipsum dolor sit amet, consectetur adipiscing elit.1Lorem ipsum dolor sit amet, consectetur adipiscing elit.
I should get:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
With 0s and 1s replacedby html (and classes)
You should just be able to map over that content and pull the values out of each item, then render them.
data.content.map((item, i) =>
<p key={i} className={ item[0] < 0.5 ? 'low-value' : 'high-value' }>{ item[1] }</p>
)
Then you can use deconstructing assignment to make this cleaner and give each value a named local variable.
data.content.map(([value, text, array], i) =>
<p key={i} className={ value < 0.5 ? 'low-value' : 'high-value' }>{ text }</p>
)

split string into array of hashes with data on delimeter

I have a string like the following:
lorep ipsum dolor sitamet, consectetur adipiscing elit.
I need to split it into fragments, but save link classes for fragments inside anchors. So perfect result would be:
['lorep ipsum ', {'link-1' => 'dolor sit'}, 'amet, consectetur', {'link-2' => 'adipiscing'}, ' elit.']<br />
Or:
['lorep ipsum ', ['link-1', 'dolor sit'], 'amet, consectetur', ['link-2', 'adipiscing'], ' elit.']
I've tried using this code:
string.split(/<[^>]>/)
But it returns returns only an array of fragments.
I'd do using Nokogiri
require 'nokogiri'
doc = Nokogiri::HTML.parse <<-eot
lorep ipsum dolor sitamet, consectetur adipiscing elit.
eot
ary = doc.search("//a").flat_map do |n,a|
[n.previous_sibling.text.strip,{n['class'] => n.text.strip},n.next_sibling.text.strip]
end.uniq
p ary
output
["lorep ipsum", {"link-1"=>"dolor sit"}, "amet, consectetur", {"link-2"=>"adipis
cing"}, "elit."]

Markdown Lorem Ipsum generator?

There are dozens of html/text Lorem ipsum generators around; However something I haven't found which I find strange with the prevalence of Markdown online is a Markdown Lorem Ipsum generator.
Does anyone know of one online somewhere or of any reason one wouldn't exist?
I recently came across this awesome markdown lorem ipsum generator called Lorem Markdownum.
It's configurable and includes random generation of all markdown elements using Markov chains and other cool stuff.
Here's a sample output:
Amoris Pindusque spreta Denique et positus quoniam
Inquit Tyriis cervos circuit Hyrie ocius sitientes
Renuente feruntur fontibus pares, ait tertia lacunabant animo, est. Limina
pulvere victima fores Aeacidae. Cum sua muneris spargit albis
glomerabat novercae puniceo. Vel quae
hac valuisse et artus intexuit ramosam Herculeos umbras. Ferarum niger.
Vestigia votorum turbatusque putes haeremusque matrem fateor
Iam natam sic fataliter uterque exiliis una
Proceres aethera
Amando littera solantia iam Paridis priorem dixisse
Illis altior bracchia lapides decus increpat ignota. Lucis suis eheu nec, sive
dicta villosa deos flexi me parvo tendere, talibus semper Polydegmona ait.
Refert versato vultus, percussit pavor, primum matrem care grande, iam adeundi
est arenti! Dracones hinnitus soleo sequenti, Arethusae me morte sanguine;
inscripsere summa: ego.
logicPim = imapOptical(19 - laserIconSpreadsheet, text_technology(
yobibyte_regular_hyperlink, icio_gbps_compiler),
swipeOdbcInterface.gnutella_copyright(backside_netmask,
abend_camelcase, mbrCycleTag) + smmFileMemory);
waveform_server(mini_degauss_paper(ccMegapixel + default_minisite_ieee,
script_system));
rtf_restore_crossplatform(barBlu, css);
Quod res fulmen in, hunc, atque vivum. Quid aequor captivo illum, clausit in
dubitas mixta. Est penates est celas, modo perque reticere
orbem timore neptis refero. Sperneret viridis iaculis avis Phrygiisque alto!
I did this little thing while learning emberjs. Hope it helps!
http://juanda.me/tests/ember-lipsum-md/
This http://www.lorem-ipsum-html.com/ it is simple and clean, This provides code snippets with html like this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.