Text Tags like OneNote's "Important" or "Question" tags

Features
1

Hi everyone, new user here finally make the switch from OneNote and so far I really like it. Obviously some things I need to get used to, but I don't think it will take long, and the fact I was able to export and copy all my OneNote notebooks using the amazing OneNote MD Exporter made the switch that much easier.

One thing that is missing that I rather liked in OneNote are the text tags. These are not tags like hashtags or page tags or anything like that, but rather the little embellishments and icon tags that you could add to the left hand side of a line of text, such as the Important :star:, Question :question:, and Idea :bulb: tags (you could also add check boxes but that is nicely replaced by the checkbox list item in Joplin).

Screenshot 2022-03-06 210201
Screenshot 2022-03-06 210201448×790 43.1 KB

Maybe I'm just missing something blatantly obvious (forgive me if so--also searching for this is quite difficult as most of the results are for the usual tags and I'm not sure what else to call these), but I didn't see any way to add these sort of little embellishments to pages if I wanted to highlight a line with one of these embellishments. I looked through the plugins as well and didn't see anything that struck me as being similar to this. I also am not sure if there is any technical reason something like this couldn't be added (e.g. if it conflicts with markdown), but if it can, it certainly would be a nice little feature.

Thanks for the consideration.

1 Like
2

I think what you're looking for is the admonition plugin. It adds a new syntax that allows for callouts (which I think are similar to what you want).

Here are some examples

image
image1385×488 39 KB

I'll place the comprehensive list here for you to copy/paste and test on your computer.

!!! question Why is the sky blue?
Light causes it.
!!!

!!! success The 7 keys to success
1. Be like me
2. ...
!!!

!!! tip Always Be Safe
!!!

!!! warning Always Be Safe
!!!

!!! info
!!!

!!! note
!!!

!!! failure
!!!

!!! danger
!!!

!!! bug
!!!

!!! example
!!!

!!! quote
!!!

To install the plugin, simply open the plugins menu (Tools->Options->Plugins or Joplin->Preferences->Plugins) and type admonition.

4 Likes
3

This plugin is really cool.

How much effort would be needed to integrate it into Rich markdown plugin?

1 Like
4

I created something like this for my Bullet Journal :slight_smile:

image
image1663×365 38.2 KB

From my Github:

  1. If you want to use my Bullet Journal style, create a new file in the same folder where the userstyles.css is lying. Name the file userstyle-bujo.css
  2. Don't forget to install the "Font Awesome Free" font to your local PC, or else you wouldn't see the Icons!
  3. At the end of every note, where you want to use this extra style, add this line <style>@import url(C:/Users/<username>/.config/joplin-desktop/userstyle-bujo.css);</style>
/* userstyle-bujo.css */

strong {
  font-weight: bold;
}
strong::before {
	content: "\f005";
	font-family: "Font Awesome 5 Free" !important;
	position: absolute;
	margin-left: 0;
	left: -26px;
}
li li strong::before {
	left: -70px;
}
td strong {
  padding-left: 20px
}
td strong::before {
  left: 13px
}

li:not(.md-checkbox) strong::before {
	left: 8px;
}

/* Red Questionmark */
mark {
  background-color: transparent;
  color: #c71616;
  padding: 0;
  font-weight: bold;
}
mark::before {
	content: "\f128";
	font-family: "Font Awesome 5 Free" !important;
	position: absolute;
	margin-left: 0;
	left: -24px;
}
li li mark::before {
	left: -68px;
}
td mark {
  padding-left: 20px
}
td mark::before {
  left: 15px
}

li:not(.md-checkbox) mark::before {
	left: 10px;
}

/* Blue Calendar */
ins {
  text-decoration: none;
  color: #2178db;
  font-weight: bold;
}
ins::before {
	content: "\f783";
	font-family: "Font Awesome 5 Free" !important;
	position: absolute;
	margin-left: 0;
	left: -24px;
}
li li ins::before {
	left: -68px;
}
td ins {
  padding-left: 20px
}
td ins::before {
  left: 15px
}

li:not(.md-checkbox) ins::before {
	left: 11px;
}

/* Yellow Idea */
blockquote, 
sub {
  padding: 0;
  margin: 0;
  background: 0;
  border: none;
  color: #ffd900 !important;
  opacity: 1;
  font-weight: bold;
  display: inline-block;
  font-size: unset;
  vertical-align: unset;
}
blockquote::before,
sub::before {
	content: "\f0eb";
	font-family: "Font Awesome 5 Free" !important;
	position: absolute;
	margin-left: 0;
	left: -22px;
}
li li blockquote::before,
li li sub::before {
	left: -66px;
}
td blockquote,
td sub {
  padding-left: 20px
}
td blockquote::before,
td sub::before {
  left: 17px
}

li:not(.md-checkbox) blockquote::before,
li:not(.md-checkbox) sub::before {
	left: 12px;
}

/* Pink Book */
em {
  text-decoration: none;
  color: #d858d8 !important;
  font-weight: bold;
  font-style: normal;
}
em::before {
	content: "\f02d";
	font-family: "Font Awesome 5 Free" !important;
	position: absolute;
	margin-left: 0;
	left: -24px;
}
li li em::before {
	left: -68px;
}
td em {
  padding-left: 20px
}
td em::before {
  left: 15px
}

li:not(.md-checkbox) em::before {
	left: 10px;
}

/* Lists general */
ul, ol {
  padding-left: 25px;
}
ul li, ol li {
  padding: 0 0 0 0;
  margin: 0;
}

ul li:not(.md-checkbox)::before {
  display: block !important;
	padding-left:  0.37em;
}

ul li::before, ol li::before {
  display: none;
}
ul li li, ol li li, 
ul li li li, ol li li li {
  padding: 0 0 0 1.2em;
}

ul li.md-checkbox {
  padding: 0;
}
ul li li.md-checkbox {
  padding: 0 0 0 1.2em;
}
	
.resource-icon {
  display: none;
}

/* Calendar support */
.calendar tr td:first-of-type,
.calendar tr th:first-of-type { 
  background: rgba(255, 255, 255, .3);
}
6 Likes
5

Wow thanks for the different solutions. I'll check them out.

To what b8rb8 asked (if I understand correctly), I second that. I know it is completely unorthodox, but I basically only use the Rich text editor in Joplin, so would be nice to have these right up there in the toolbar.

But on the other hand, maybe a good excuse to start learning Markdown.

Anyway will give these suggestions a try and report back.

1 Like