3

Intro

Is it possible to replicate the following rendering of org mode blocks like in LogSeq? I have done some research but failed to find any kind of solution that would achieve it and I have a feeling that it is impossible, yet we have LaTeX rendering as well as image, so there still may be some hope.

Problem definition:

I would like to have custom #+BEGIN_TIP or #+BEGIN_QUOTE blocks to look like:

tip block

source block

And as more advanced thing I would like to be able to edit it in a similar fashion:

tip block editing

What I've tried so far:

  • prettify-symbols-alist to replace #+begin_src with custom character but it takes exactly one line, when on the previous screenshot we see that tip icon is definitely larger.

prettify-symbols-example

  • org-hide-emphasis-markers but this one works only for bold, italic, etc.
  • searched if it is possible to render actual html to image and replace this block

LogSeq implementation details

For LogSeq this thing is actually not a problem as it runs in browser/electron apps, so it is just a matter of rendering HTML text back n forth.

NickD
  • 27,023
  • 3
  • 23
  • 42
noobsaibot
  • 31
  • 3
  • Have you done anything with the fonts? That looks like just font manipulation to me. I set the title of my org files in 22pt Kodchasan. Take a look at `buffer-face-mode`, it makes changing font settings easy. – naugiedoggie Oct 20 '21 at 01:52
  • @naugiedoggie is it possible to specify font only for the part of the buffer? in general this thing could work, especially if I find the way to automatically turn on/off it for `BEGIN` blocks on edit/highlight – noobsaibot Oct 21 '21 at 09:19
  • Yes, fonts can be set according to use of the text. e.g., my title fonts are `org-document-title`. Org mode sets different fonts inside `src` blocks from the main body text. You can identify the fonts by putting point on a letter and going to menu *Options->Customize Emacs->Specific Face*. You will be prompted to customize that face, and you can set the fonts as you like. Or at least identify them. – naugiedoggie Oct 22 '21 at 02:08

1 Answers1

1

This is not a complete answer, because I did not yet 'investigate' the steps that would be required to get this toggleable, or how to get this working in org-mode. However, I can already show you 'the first' step of how to achieve this e.g. in text-mode, and provide some advice to help you sort this out and 'convince' you that this is possible (we can update this answer when we find out the next step(s) to achieve what you ask for, after we had some more time to investigate it).

For background info about how I came to this answer, see the answer here.

Then, to achieve, partially, what you ask for, you can add the following function to font-lock as follows:

(defun org-do-font-lock-tip (limit)
  (re-search-forward "\\(^#\\+begin_tip.*\n\\)\\(.*\n\\)\\(.*\n\\)*\\(#\\+end_tip\\)" limit t)
  (add-text-properties (match-beginning 1) (1- (match-end 1))
                       '(invisible t))
  (let ((im (create-image "~/light-bulb.png")))
    (add-text-properties (match-beginning 2) (1+ (match-beginning 2))
                         `(display ,im)))
  (add-text-properties (match-beginning 4) (match-end 4)
                       '(invisible t)))

(font-lock-add-keywords 'text-mode
                        '((org-do-font-lock-tip)))

Now, after you create a useful png image with the name "light-bulb.png" in your home directory (of course you can adapt the path), then evaluate the above code, and finally open a text file with the following contents:

#+begin_tip
  Hi, cool tip!
#+end_tip

you will find that it gets displayed more or less like the example in your question. Adding a space before "Hi, cool tip!" is important, because that space will hold the 'display' text-property.

This code displays the image on a single line, but probably, you would prefer to display it sliced over multiple lines (like in telega and gitter.el.

This does not directly work in org-mode, because the overlay- or text-properties of the org-mode source block 'interfere' with the text-properties added here.

As far as I know, prettify-symbols-mode takes care of replacing, and placing back, such font-lock text properties. So to get what you ask for, it is probably a good idea to study how prettify-symbols-mode achieves what it does and adapt it to this situation.

To see an example of how prettify-symbols-mode can be adapted, you might like to have a look at the answer here.

B.t.w. it might be handy not to try to make Emacs 'behave/display' exactly like a browser, but instead try to think of a similar solution that achieves the same thing. What I mean, for example, is that it might not be necessary to make the icon larger than the line height. Also, it might be acceptable, or even nicer, to display the icon in the left margin etc.

dalanicolai
  • 6,108
  • 7
  • 23