开发者

Color of date tag in org-mode publish to HTML and boxes around text

开发者 https://www.devze.com 2023-04-08 12:29 出处:网络
I am using org-mode version 7.4 to organize all of my research notes and then export to HTML so I can create a sort of personal wiki. I just have two questions:

I am using org-mode version 7.4 to organize all of my research notes and then export to HTML so I can create a sort of personal wiki. I just have two questions:

1) Upon export to HTML, the org-mode date stamps appear a very faint gray, is there anyway to change this this color to something more bold? If the fix involves adding a lot of messy CSS tags, is there something I could add to my .emacs file instead? I am hoping to keep my original org file as neat and as legible as possible.

2) Also, what is the best way to add a box around some text in org-mode? I have found that surrounding the text in #+BEGIN_SRC emacs-lisp / #+END_SRC emacs-lisp tags works the same as #+BEGIN_EXAMPLE/#+END_EXAMPLE in that the org-mode features (like using an asterix to mark headings and -,+,. to mark sub-items) do not get evaluated in the block. I am interested in just being able to put a block around the text, but still have the org-mode features such as headings, sub-items, etc., be evaluated.

Thank you for the help, I admit I am a bit of a noob here.

UPDATE: Thank you to Jonathan Leech-Pepin and Juancho for the tips. Part 1 is definitely answered and I apologize for missing it in the manual.

For part 2, I realize I could wrap DIV tags in BEGIN_SRC HTML tags, but I was hopeful that there might be a simpler way of doing this, as it seems like something many people would want to do as a way of highlighting or offsetting text. I was hoping there was something equivalent to the BEGIN_EXAMPLE/END_EXAMPLE tags t开发者_运维技巧hat I was simply missing. I can use the DIV tags, and will if need be, but it ends up making the original org file look a bit messy and illegible if you end up doing it a lot. So if anyone knows a shortcut, I'd be happy to hear it. I suppose if I knew what I was doing more, I could write my own function, which I may just end up looking into once I'm through my thesis proposal and actually have more free time. :)

Thanks Everyone!!!


For point 1)

You can adjust the CSS settings either for a single file or create a custom stylesheet.

The relevant classes for style formatting are listed in the Org Manual - CSS Support

As a test I added (as a single line, the line return is to make it easier to read on the page)

#+STYLE: <style type="text/css"> .timestamp { color: purple; font-weight: bold; }
         </style>

to one of my org files and exported. The timestamps were a bold purple, which was much more legible.


The HTML exporter in org-mode adds class identifiers extensively, so that you can style your HTML at will.

Have a look at http://orgmode.org/manual/CSS-support.html

You don't need to include your CSS inside the document itself. You can either link to a stylesheet via the #+STYLE directive, or you can customize the default CSS that comes with org-mode.

As for question 2, have a look at an exported org-mode file. There are plenty of div sections that you can style via CSS, like adding a border.


As another option if you prefer some trial and error as well as seeing an example vs. a specification is to download some examples and pay attention to what css elements are tweaked.

For example, I was recently trying to change the background color of exported tags in html and found this org-mode mailing list thread. I grabbed a copy of worg-original.css and searched it for the word 'tag':

.tag {
    color: #DDD;
    font-size: 70%;
    font-weight: 500;
}

I didn't like the background and noticed other elements with a background-color property so I played with it and ended up with:

.tag {
   color: #000;
   background-color: #ccf;
   font-size: 85%;
   font-weight: 500;
   margin: 0 0 0 8em;
}

You can do the same for timestamp properties. I'd suggest finding some things you like and throwing them together in a .css file. From there you can just put the #+style: line in each file (as has already been mentioned):

#+STYLE: <link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" />

This isn't really anything new compared to the other answers; I mainly added it as another approach. I didn't know css, so seeing the list of properties in the org manual (p.author, .timestamp-kwd, .todo) didn't mean much to me. Finding a .css that was specifically designed for org-mode expert, such as those linked in the mailing list above for the org manual and worg were much more helpful since I could see some tangible examples and tweak from there.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号