I wanted to have a block of text aligned to the right, which takes up less horizontal space then the rest of the text on that page. How'd I go about it?
The problem with it being completed in literal HTML is that org-mode automatically puts any text outside the sections into a <p> tag (and it is not a block element, so floating inside of it isn't generally a good thing etc.)
Here's how I have it now (and it displays fine, so I'd like it to be more or less like that):
#+BEGIN_HTML
<div style="width:100%;height:84pt">
<p class="epigraph">
<em>
I have not increased nor diminished the measure,<br/>
I have not diminished the palm,<br/>
I have not encroached upon fields,<br/>
I have not added to the balance weights,<br/>
I have not tempered with the plumb bob of the balance.</em>
<br/>
<span style="text-align:right;width:100%;display:block">
<b style="line-height:24pt;font-weight:bold">
The Book of the Dead, Spell 125.</b>
</span>
</p></div>
#+END_HTML
Plus I have this CSS:
.epigraph {
float:right;
font-size:10pt;
font-family:serif;
line-height:12pt;
color: #aaa
}
But I'd rather it be automatic...
OK, I think I found something that worked similar enough to what I wanted:
#+BEGIN_VERSE
I have not increased nor diminished the measure,
I have not diminished the palm,
I have not encroached upon fields,
I have not added to the balance weights,
I have not tempered with the plumb bob of the balance.
-- The Book of the Dead, Spell 125.
#+END_VERSE
This generates HTML that later with some use of CSS is possible to format in the way it would look more or less like an epigraph. Not perfect, but will do.
Related
If I have a bit of HTML, XML, or JSX formatted like this:
<p class="foo">
<b class="bar">
some text
</b>
<p>
I would like to be able to make a selection from <p> to </p>, run a command (ideally via an assigned keyboard shortcut), and have VSCode convert it to this:
<p class="foo"><b class="bar">some text</b><p>
As context, I sometimes need to process a fair amount of marked up text in a variety of file formats, and it's very tedious to manually do this kind of formatting (or unformatting). I know you can do it with a regex find and replace in selection, but that's inconvenient because (1) there doesn't seem to be an easy way to save a set of find/replace settings as a macro and then assign them to a keyboard shortcut, and (2) VSCode's handling of the "in selection" part of find/replace all confuses me every time I use it.
I used to do this in my previous editors (e.g. BBEdit, TextMate, Sublime), but I'm hitting a wall with VSCode. The best I can find is minify/uglify extensions that work on entire files. And tons of basic tips about toggling word wrap, automatically removing trailing whitespace, etc.
I'd like to keep some space between some html blocks in my code. However, Prettier wants to remove these lines. Is there a Prettier setting to keep this spacing?
Before prettier:
<template>
<form>
<div>First block</div>
<div>Second block</div>
</form>
</template>
After pretter:
<template>
<form>
<div>First block</div>
<div>Second block</div>
</form>
</template>
There is no way to actually do this, you might only use tricks.
First trick
Ignore completely the file (or file extensions) but you will not benefit from Prettier
Second trick
Deny Prettier to trim whitespaces
trim_trailing_whitespace = true
And add whitespaces in line breaks.
Once again this is not an effective solution, it's only a trick.
An issue has been closed by devs
adding and removing line breaks is core to prettier's formatting algorithm
According to #suchipi , Github member:
adding and removing line breaks is core to prettier's formatting algorithm, so preserving them isn't consistently possible.
As a work around you can try:
setting very short printWidth
put // prettier-ignore comment above your code.
For Refernce:
Github issue
Is there a config in prettier to keep line breaks?
Don't know if this will work as intended however, in the document for Prettier, there is a section for "Empty Line" that says;
"Prettier collapses multiple blank lines into a single blank line."
By this, you may want to add a double blank line instead of a single blank, where you are wanting a space to be, as it should compress it into a single line rather than removing it all together.
Take a look on this thread https://github.com/prettier/prettier/issues/4870, it's pretty good explaining why this is still non-existing feature.
There is no simple way for formatter to determine what to keep and what to remove.
So the only practical things you can do
Add comments to disable formatting in certain places (which is bad idea and never work well, dev gents become annoyed with this super quickly).
Accept that empty lines would be collapsed (still bad, because of poor readability)
Disable this feature and maintain empty lines yourself (alternative editor). This one "arguably" seems to me the simplest (best) option in a long-term.
I'm looking for a setting or extension in VSCode that provides the following functionality:
Format on save
wrap html attributes on their own line, even if there is only one attribute
put closing symbol of opening tag on new line, aligned with tag
alphabetically order attributes
do not align attributes according to the position of the first attribute, simple use one level of indentation
Example 1:
<span my-attr="value">Hello, world!</span>
becomes
<span
my-attr="value"
>
Hello, world!
</span>
Example 2:
<x-status-indicator wire:click="pushMe" class="block" :status="$status"
:description="$description" />
then becomes
<x-status-indicator
:description="$description"
:status="$status"
class="block"
wire:click="pushMe"
/>
So far there have been many posts about formatting, but I could not find a single post or extension that satisfies these requirements. Any suggestions would be greatly appreciated, thank you! :)
The auto completion is pretty much default right now. If I type
<p{tab}
I get
<p></p>
Is it possible to configure it so that instead I end up with
<p>
</p>
This is just an example. I'd like it to be more comprehensive beyond just the <p></p> tags.
It seems I've been doing it wrong. I've been looking at what happens only when I tab-complete a tag as in my example. It did not occur to me that simply pressing enter after the auto completion that it would actually set me up the way I would like and even better than I was asking for.
After pressing enter I end up with
<p>
_
</p>
with the cursor (represented by the _) indented two spaces on the blank line.
If I use the folowing syntax,
#+ATTR_HTML: width="200"
[[file:highres.jpg][file:highres.jpg]]
I should expect that the page would display highres.jpg in the specified size, and when clicked on, would like to the file itself? Which is what I get from these instructions. However, when I generate the html from an org-mode file, the image is displayed but not linked/clickable. Am I doing something wrong or have I misunderstood?
In more recent versions of org-mode, the format seems to have changed. The following works for me in Emacs 24.4.1:
#+ATTR_HTML: :width 200
[[file:highres.jpg]]
In your example it is treating it as being without description because the description is identical to the link itself. The instructions you link to say to use a generated thumbnail for the description (which will be displayed instead of the full image).
On the other hand, I wasn't able to get it to respect #+ATTR_HTML: width="200" when I did change the description text to allow for a difference
#+ATTR_HTML: width="200"
[[file:highres.jpg][./highres.jpg]]
Instead the inlined clickable image was full-size. I don't know if this is intended or not, the best place to ask that would likely be the mailing list (where they may also be able to fix it if it is a bug).
Added Testing of issue
Using the following Org snippet
* SVG test
#+CAPTION: Test
#+ATTR_HTML: width="200" title="Hello"
[[./img/Bitmap.svg][file:./img/Bitmap.svg]]
#+Caption: Test2
#+ATTR_HTML: width="200" title="Hello as well"
[[./Bitmap.svg]]
I get the following HTML, which does explain why the strange result with regards to image sizes occurs:
<p>
<img src="./img/Bitmap.svg" alt="Bitmap.svg"/>
</p>
<div class="figure">
<p><img src="./Bitmap.svg" width="200" title="Hello as well" alt="./Bitmap.svg" /></p>
<p>Test2</p>
</div>
The initial image is being adjusted in size, instead of the link image. Definitely a question of how the exporter interprets the #+ATTRL_HTML information. Under the current exporter the best choice might well be to generate a thumbnail of the image for insertion.