Blockquote support?

[skyblue002]

Versions

RedNotebook version (make sure you have the latest version): 2.11.1 (rednotebook-git package)

Operating system and version: Linux 5.3.6-1 Manjaro (Arch derivative) x86_64

Expected behavior

Using ">" at the beginning of a line results in blockquote formatting when previewing the text.

Actual behavior

There doesn't seem to be any support for blockquotes. When using the markdown, then previewing, the ">" characters are left visible and there is no blockquote formatting.

(It seems like maybe this feature just isn't implemented. It would be a great feature to have in a journal, since some people (myself included) like to include interesting or inspirational quotes when journaling. If this isn't a feature yet, may I please suggest it be added in a future release?)

Steps to reproduce the behavior

Add lines starting with ">" then press Preview, and the lines are not formatted like blockquotes.

Log output when reproducing behavior

There is nothing relevant in the log. It registered past instances of saving, nothing relevant to formatting blockquotes.

[idle-code]

RedNotebook uses txt2tags as markdown syntax - have you tried using tab indents for that? Here is a quick reference.

[skyblue002]

Thank you! I'm a bit new to markdown and had assumed that that's what was being used, that's why I used the ">" character for a blockquote. I just tried tab indenting, as you had mentioned. I don't think the results are ideal, as they don't simply indent, they also make the first character in the quote huge and italicize everything: Do you know if there's any way to choose how it's styled in the preview? A lot of my quotes have styling of their own and it interferes with that to have the styling already chosen.

[idle-code]

The style is embedded in the code itself. And currently there I see no way to override this. @jendrikseipp maybe there should be an option for external CSS style file?

[jendrikseipp]

That's a good idea! What do you think about the following approach? We let RedNotebook write a style.css file into the data directory whenever a new journal is created. By default it contains the current CSS style. Then users can adapt the style file to their needs. If the file is missing, we recreate it with the default contents.

[skyblue002]

Great idea! It's both flexible, and ensures that a style will be available for the user.

Just in case there are less-experienced users that encounter this file and are not sure what to do with it (and, thus, might try to delete it), what if it is put into the ~/.config directory, instead? There could be a RedNotebook subdirectory there for application data. Or, if you want to keep it in the same location as the journal, a .style folder could be created and it could be stored there. (Note the preceding "." denoting that it is hidden.) It would then be hidden to all users except those who know enough to know what to do with it, leaving the experience less confusing for those who are not too tech savvy.

[jendrikseipp]

I agree. Putting it into the journal folder has the advantage that different journals can have different styles. I'm not sure how important that is though. What do you guys think?

[skyblue002]

Central folder

• more central, more part of the installation itself (more of a stylistic choice) :neutral_face:
• out of the way of the user :+1:
• harder to code and maintain because of having to keep track of the journal each style points to :-1:

In the Journal Directory

• more portable (i.e. great if your journal folder is on a USB drive or if you relocate the folder later) :+1:
• also out of the way of the user, if hidden by default (i.e. "." prefix on Linux) :+1:
• easier to code and maintain, because the applicable journal is in the same directory :+1:

I think the "in the journal directory" idea wins out. I'd just hope that it could be left hidden, so if I'm dealing with the journal directory directly (which could happen), it wouldn't get in the way, accidentally get deleted with a custom theme I made, etc. This would also keep less-advanced users from deleting it for any reason. I think it's a great idea to have a default theme as a fallback in case the theme is deleted. But, having it out of the way would be good for several reasons (if that's not too hard to code -- on Linux, I think it would be as easy as just starting the filename with a "." but on other systems, it could be harder, I'm not sure if you make RedNotebook for other platforms).

[idle-code]

I'm in favor of styles in journal directory too. The implementation effort should be basically the same and some people (#395) do use multiple notebooks. Placement in the data directory has additional advantage of user-created styles being included in the backup.

However I don't see a need for hiding this file - if we name it clearly (i.e. notebook_style.css) there is minimal risk of accidental removal. Also anyone who will see it in the directory will know that there is an option for style configuration without needing to look at the documentation.

[jendrikseipp]

Thanks, guys! I agree that putting the file into the journal directory sounds like the preferable option. I also wouldn't hide the file and prefer the name journal-style.css.

[jendrikseipp]

Regardless of whether we make the style configurable, we could try to make the default style prettier. This would benefit all users, even those who don't know CSS.

[skyblue002]

@jendrikseipp Let me know where I can contribute a style. I’m pretty good with CSS and wouldn’t mind sharing.

@jendrikseipp @idle-code As a side note, my recommendation to hide it also comes from my experience working in tech consulting and the long list of problems that came from inexperienced users deleting things they didn’t understand. So long as the style will regenerate if deleted, it shouldn’t be an issue.

[jendrikseipp]

@skyblue002 Perfect, I'm curious to see what you come up with :-)

Here is some sample RedNotebook (txt2tags) markup:

=== This is an example template ===

It has been created to show you what can be put into a template. You can edit and save it with the buttons above.

Templates can contain any formatting or content that is also allowed in normal entries.

Your text can be:

- **bold**
- //italic//
- __underlined__
- --strikethrough--
- or some **//__combination__//**


You can add images to your template:

**Images:** [""/path/to/your/picture"".jpg]

You can link to almost everything:

- **links to files on your computer:** [filename.txt ""/path/to/filename.txt""]
- **links to directories:** [directory name ""/path/to/directory/""]
- **links to websites:** [RedNotebook Homepage ""https://rednotebook.sourceforge.io""]


As you see, **bullet lists** are also available. As always you have to add two empty lines to end a list.

Additionally you can have **titles** and **horizontal lines**:

= Title level 1 =
(The dates in the export will use this level, so it is recommended to use lower
levels in your entries)
== Title level 2 ==
=== Title level 3 ===
etc.

====================

% Commentary text can be put on lines starting with a percent sign.
% Those lines will not show up in the preview and the export.

**Macros**:

When a template is inserted, every occurence of Dienstag, 12.11.2019 17:15:34 is converted to the current date. You can set the date format in the preferences.

There is even more markup that you can put into your templates. Have a look at
the inline help (Ctrl+H) for information.

This is undocumented, but we currently support the full txt2tags syntax. If we ever switch to Markdown, these will not be supported anymore:

	you can create blockquotes with tabs

``verbatim text with two backticks``

|| Tables | Table Heading |
| Table |     align     |
|          lines |      is       |
|      with cell |     nice!     |

and here is the HTML result:

<?xml version="1.0"
      encoding="UTF-8"
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="http://txt2tags.org" />
<style type="text/css">
    body {
        font-family: Ubuntu, mingliu, MS Mincho, sans-serif;
    }
    <!-- Don't split last line between pages.
         This fix is only supported by Opera -->
    p {
        page-break-inside: avoid;
    }
    blockquote {
        margin: 1em 2em;
        border-left: 2px solid #999;
        font-style: oblique;
        padding-left: 1em;
    }
    blockquote:first-letter {
        margin: .2em .1em .1em 0;
        font-size: 160%;
        font-weight: bold;
    }
    blockquote:first-line {
        font-weight: bold;
    }
    table {
        border-collapse: collapse;
    }
    td, th {
        <!--border: 1px solid #888;--> <!--Allow tables without borders-->
        padding: 3px 7px 2px 7px;
    }
    th {
        text-align: left;
        padding-top: 5px;
        padding-bottom: 4px;
        background-color: #aaa;
        color: #ffffff;
    }
    hr.heavy {
        height: 2px;
        background-color: black;
    }
</style>
</head>
<body>

<div class="header" id="header">
</div>

<div class="body" id="body">
<p>
<span id="2019-11-12"></span>
</p>

<h1>Dienstag, 12.11.2019</h1>

<h3>This is an example template</h3>

<p>
It has been created to show you what can be put into a template. You can edit and save it with the buttons above.
</p>
<p>
Templates can contain any formatting or content that is also allowed in normal entries.
</p>
<p>
Your text can be:
</p>

<ul>
<li><b>bold</b>
</li>
<li><i>italic</i>
</li>
<li><u>underlined</u>
</li>
<li><s>strikethrough</s>
</li>
<li>or some <b><i><u>combination</u></i></b>
</li>
</ul>

<p>
You can add images to your template:
</p>
<p>
<b>Images:</b> <img align="right" src="/path/to/your/picture.jpg" border="0" alt=""/>
</p>
<p>
You can link to almost everything:
</p>

<ul>
<li><b>links to files on your computer:</b> <a href="/path/to/filename.txt">filename.txt</a>
</li>
<li><b>links to directories:</b> <a href="/path/to/directory/">directory name</a>
</li>
<li><b>links to websites:</b> <a href="https://rednotebook.sourceforge.io">RedNotebook Homepage</a>
</li>
</ul>

<p>
As you see, <b>bullet lists</b> are also available. As always you have to add two empty lines to end a list.
</p>
<p>
Additionally you can have <b>titles</b> and <b>horizontal lines</b>:
</p>

<h1>Title level 1</h1>

<p>
(The dates in the export will use this level, so it is recommended to use lower
levels in your entries)
</p>

<h2>Title level 2</h2>

<h3>Title level 3</h3>

<p>
etc.
</p>

<hr class="heavy" />

<p>
<b>Macros</b>:
</p>
<p>
When a template is inserted, every occurence of Dienstag, 12.11.2019 17:15:34 is converted to the current date. You can set the date format in the preferences.
</p>
<p>
There is even more markup that you can put into your templates. Have a look at
the inline help (Ctrl+H) for information.
</p>
<p>
This is undocumented, but we currently support the full txt2tags syntax. If we ever switch to Markdown, these will not be supported anymore:
</p>
	<blockquote>
	you can create blockquotes with tabs
	</blockquote>
<p>
<code>verbatim text with two backticks</code>
</p>

<table border="1">
<tr>
<th>Tables</th>
<th>Table Heading</th>
</tr>
<tr>
<td>Table</td>
<td align="center">align</td>
</tr>
<tr>
<td align="right">lines</td>
<td align="center">is</td>
</tr>
<tr>
<td align="right">with cell</td>
<td align="center">nice!</td>
</tr>
</table>

</div>
<!-- xhtml code generated by txt2tags 2.6 (http://txt2tags.org) -->
<!-- cmdline: txt2tags  -->
</body></html>

Feel free to adapt the CSS and post it here or send it to me via email.

[skyblue002]

@jendrikseipp I've done most of the CSS for a few slightly different themes. They're focused on readability and try not to distract the eye too much. I am making them to use the Liberation set of fonts, because they are freely available. (I figured that would cause fewer problems for users than relying on proprietary fonts.) I'll pass them on to you (either by e-mail or github) when they're done.

What are your thoughts on the use of the color red? -- Since the app is named RedNotebook? Would you like a set of themes with that color scheme? Right now I'm using shades of blue, since they are easy on the eyes. But, let me know if you have any preference about the color red.

[jendrikseipp]

A subtle touch of red would be cool, but I agree that blue is easier on the eyes. Maybe you could create two versions?

[skyblue002]

Alright. I'm using css variables for the color to make it easy to change it. I'm creating three base themes: serif, sans serif, and monospace (corresponding to the font styles included with the Liberation pack). The hints of color aren't too overwhelming, so at this point, just 2-3 lines would need to be changed to shift the color.

[jendrikseipp]

I'm closing this issue since blockquote support will be added automatically if we add Markdown support via #560.