emacs org-mode: How to remove <colgroup> tag generated by HTML export? - emacs

Environment:
emacs 24.3 (9) for os x with org-mode version: 8.2.1.21
I used org-mode to convert org files with tables into html tables format. However, the html files always include the following snippets whenever a table exists:
<colgroup>
<col class="left" />
<col class="right" />
<col class="right" />
</colgroup>
I have tried several ways to eliminate that snippet output but those tags just won't go way; some include
M-x customize-variable
1. org-html-*
2. org-export-table-*
3. org-export-html-*
4. org-table-*
I can see that snippet may be generated by ox-html.el but I cannot nil that action.
I just want to have plain HTML tables exported from my org files. Nothings else. No extra default attribute, no other default HTML tags, no css, etc. How can I achieve that?

There's currently no customization options to remove <colgroup>.
But you can do this if you know that you don't want them at all:
(defun org-export-table-cell-starts-colgroup-p (table-cell info))
(defun org-export-table-cell-ends-colgroup-p (table-cell info))

Related

VSCode Wrap HTML attributes each on their own line

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! :)

Visual Studio Code and Prettier html formatting on separate lines

I'm using VS Code, and Prettier and cannot get it to format the way I want it to be upon saving.
If I have a line like
<input type="checkbox" /> Label<br />
upon format/save, it becomes
<input type="checkbox" />
Label
<br />
I don't want to turn off Format on Save since I want to be able to Format Document from time-to-time. Is there a setting to get the line breaks how I want them? I'd prefer it only wrap on line length and other wanted places (e.g. select and option tags on different lines)
Note: this is just a simplified example. There are many other cases where it's putting every tag on a separate line when I'd like them to stay on one.
You need to update your .prettierrc file in your root to have
"printWidth": 1000
or whatever print width you are looking to have and it should fix this. Also check out the Prettier docs at https://prettier.io/docs/en/configuration.html to see other items you can configure.

How to customize color, size, and font of emacs inline code

I used to use markdown all the time. Now I use emacs org-mode for everything ("this koolaid tastes good"). One piece that kept driving me nuts was the ability to use backticks for inline code in emacs.
Everything I read wanted me to use easy templates for source code like this:
#+BEGIN_SRC
Just add: " < " + one of the letters below
s #+BEGIN_SRC ... #+END_SRC
e #+BEGIN_EXAMPLE ... #+END_EXAMPLE
q #+BEGIN_QUOTE ... #+END_QUOTE
v #+BEGIN_VERSE ... #+END_VERSE
c #+BEGIN_CENTER ... #+END_CENTER
l #+BEGIN_LaTeX ... #+END_LaTeX
L #+LaTeX:
h #+BEGIN_HTML ... #+END_HTML
H #+HTML:
a #+BEGIN_ASCII ... #+END_ASCII
A #+ASCII:
i #+INDEX: line
I #+INCLUDE: line
#+END_SRC
Then I stumbled onto the post by Mr. Abrams: Exporting inline code to html in org-mode. I just need to use =code= instead of 'code' for emacs inline quotes? OK. Why isn't this noted somewhere simple in the months worth of docs I've been perusing!? (It probably is!)
Now of course, I want to know how to customize the color, font, and size of these inline code snippets in emacs. The default size is too small and there is no subtle background color like with markdown.
Thank you
I believe Org Mode exports your current color theme. To verify that, you can change the colour scheme of your emacs and re-export your buffer to see if things change.
As for myself, I set org-html-htmlize-output-type to css and org-html-head to the following:
<link rel="stylesheet" type="text/css" href="path/to/my.css" />
This way, I can tune the css as I want regardless the colour theme of my emacs.
Below please see the help of org-html-htmlize-output-type:
org-html-htmlize-output-type is a variable defined in ‘ox-html.el’. Its value is ‘css’ Original value was inline-css
Documentation: Output type to be used by htmlize when formatting code snippets. Choices are ‘css’ to export the CSS selectors only,‘inline-css’ to export the CSS attribute values inline in the HTML or ‘nil’ to export plain text. We use as default ‘inline-css’, in order to make the resulting HTML self-containing.
…
To get a start for your css file, start Emacs session and make sure that all the faces you are interested in are defined, for example by loading files in all modes you want. Then, use the command ‘M-x org-html-htmlize-generate-css’ to extract class definitions.
You can customize this variable.
EDIT
Please put the following to your init.el, restart emacs and retry to see if it works:
(setq org-html-htmlize-output-type 'css)
(setq-default org-html-head "<link rel=\"stylesheet\" .../>")
I just need to use =code= instead of 'code' for emacs inline quotes?
I think this is because you didn't go through the manual carefully. Monospace is described in 11.2 Emphasis and Monospace
You can make words ‘bold’, ‘/italic/’, ‘underlined’, ‘=verbatim=’ and ‘~code~
If you want to represent a code block, you can use #+BEGIN_SRC and #+END_SRC pair.
#+BEGIN_SRC emacs-lisp
(defun org-xor (a b)
"Exclusive or."
(if a (not b) b))
#+END_SRC
As you have mentioned in your question description, you can type <s and TAB for auto completion.
I want to know how to customize the color, font, and size of these inline code snippets in emacs.
There are two levels to set font in org.
Change the font on a document-wide level
Add below #+HTML_HEAD_EXTRA: to the begin of your org file.
#+HTML_HEAD_EXTRA: <style>*{font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei; font-size: 20px; font-style: italic; !important}</style>
#Lungang Fang gives you another way to place CSS.
Change the font size locally
#+BEGIN_EXPORT html
<p style="font-family:Monospace; font-size: 30px; font-style: italic;">
This is a customized line.
</p>
#+END_EXPORT
To customize the style of a block mentioned in your quetion description, you can see my other answer.

how to add a <li> tag to every line automatically when exporting a HTML file in org mode

now i am using org-mode 8.0.2. recently i found it is really a waste of time,i should type
lots of repetitive <li> tags when listing a heap of items. now i just want to implement a function as follows:
<customization-tag>
first statement;
second statement;
third statement;
</customization-tag>
when it is exported to a html file. it will be converted to below format automatically
<ul>
<li>first statement;</li>
<li>second statement;</li>
<li>third statement;</li>
</ul>
I found the HTML preamble may be helpful, but I don't know where to start.
Can some help me out?
thanks
Is there a reason you don't want to use a list (See the manual)?
Using Org 8.02 and the following:
- First statement;
- second statement;
- third statement;
And then exporting to HTML C-c C-e C-b h H (for temp output of body only in this case) I get:
<ul class="org-ul">
<li>First statement;
</li>
<li>second statement;
</li>
<li>third statement;
</li>
</ul>
This is a bit of an alternate approach, but if you're willing to do it manually (i.e. not programmatically), I'd vote for a simple ^(.*)$ regex find-and-replace. It'd also be easy to convert to a programmatic script, though again, this is a bit of a hack-workaround instead of a solution.
[EDIT] Sorry, didn't see the emacs flag at first... Try the command
M-x replace-regexp <RET> regexp <RET> newstring <RET>
via: http://www.gnu.org/software/emacs/manual/html_node/emacs/Regexp-Replace.html
I think you should try cua-mode. With it, you can edit column in Emacs. See this video for details.

org-mode export as html: inline images displayed and linked?

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.