Quickly highlight text for later action CSS WikiText

[Stobot]

I'm looking for ideas with a very common (for me) use case

One of the things I use TiddlyWiki for is taking meeting notes, as well as my overall task/project manager. I needed a way to be able to quickly highlight bits of the notes inline that I needed to formally add as task tiddlers later.

For example as I'm writing out the discussion points, if I take ownership for a piece of it, I'll put == in front of it like:

!!! Minutes 2018-07-09

* Team Discussion

** Setup the something - Betty will handle

** Arrange the something else - John will handle

** ==Set the agenda

** Focus on yada yada

* Second topic

** .....

I then on my "Home" tiddler have a <$list filter="[!is[system]search[==]!title[Home]!title[Draft of 'Home']]">....</$list> setup to give me a list of all the Tiddlers with the == string in it. This triggers me to go find those tiddlers and then add todos to my projects. Sometimes in a large block of notes, it's hard to spot the == string in the notes. So I've been trying to find some CSS solution to highlight when I use ==. It appears while easy in Javascript, in CSS it's not possible.

It does however look like I can hijack one of the existing wikitext strings like ^^.......^^ (superscript) and then write some CSS to highlight that yellow, as well as rework my <$list> to find ^^ strings. As I don't really have much CSS knowledge, I'm having a hard time figuring out how to undo all the formatting that superscript ^^....^^ does to make my solution work.

Anybody have any better ideas of making this work?

[Mark S.]

In your stylesheet tiddler, try this:

sup {
  font-size: inherit;
  vertical-align: baseline  ;
  line-height: 0 ;
  background-color: yellow;
  top: 0;
}

[Stobot]

That works - thanks Mark!

[Mohammad]

While Mark gave an elegant solution above

You can also use this simple but a bit lengthy one below!

HTML5 has the semantic element to highlight the text and it can be easily used in TW like this

<mark>This is a highlighted text</mark>

 

[Mark S.]

Wonderful! They finally named a tag after me! Cross that one off the bucket list. ;-)

I assumed that Stobot wanted to use the TW editor and keystroke sequences. Otherwise, you could even make your own tag <m> :

m { background-color: yellow; }

I don't know if making your own tags will get the W3C police after you though ...

-- Mark

[Mohammad]

Mark! They named the highlight tag really after you ;-).

Yes, your solution was what Stobot asked!

But I learned now, I can have my own tag! why not to use <m> in my TW!

/Mohammad

[Stobot]

Thanks for the creative alternative guys - yes, based on what I'm doing the winner is the minimum number of keys, so ^^something^^ is still shorter than <m>something</m>, but I definitely learned something!

I imagine the ability to come up with my own Wikitext to convert (such as the original ==something== into <mark>something</mark>) is a bit more in-depth and would require editing the core javascript or something right?

[Mark S.]

Hi Stobot,

First, just to be sure -- you do know that you can use the edit toolbar to apply the superscript? That's why I assumed you were interested. You can even use a key short-cut, though it would need to re-assigned on firefox because it conflicts with the private session keystroke sequence.

If so, one quick way to put in your own syntax is to hack

$:/core/ui/EditorToolbar/superscript

Change the references to "^^" to "<mark>" and "</mark>" and you're done.

Making your own syntax in this case is surprisingly easy (though I don't know how easily it breaks).

Take the tiddler:

$:/core/modules/parsers/wikiparser/rules/emphasis/superscript.js

and clone it. Change the title to

$:/core/modules/parsers/wikiparser/rules/emphasis/mark.js

Change all references to "superscript" into "mark" and all the references to ^ into = . Change the tag="sup" to tag="mark". Save and reload (you have to reload after changing or adding javascript macros).

Now whenever you type "My name is ==Mark== " the text "Mark" will be highlighted.

Oh! Be sure to make a backup before trying this on any TW5 file that you actually want to keep!

-- Mark

[TonyM]

Stobot,

Another method to those presented so far is, 

• in the edit mode highlight the text you would make a task, ctrl-c to copy it, 
  
• click on the excise button (or use keyboard shortcut) 
  
• The dialoge pops up as attached
  
• Ctrl-v and paste the full text as the "Title of new tiddler"
  
• Check the Tag new tiddler (defaults after first use)
  
• and Replace excised text with transclusion (defaults after first use)
  
• and Click Perform transclusion
  

I personally then use the sideBar recent, to review and do them, or open and add the task tag.

A variation of the excise button may be created to include an additional default tag or field. I may make that.

Regards

Tony

[TonyM]

The Image

[talha131]

This is awesome, Mark. I couldn't even imagine creating new markup or modifying markup would be so straight forward.

[JD]

Wow, thank you for sharing this! I didn't even realize it could be solved this way.

-JD, someone who similarly has this problem

[Stobot]

Fantastic! Wow that teaches me a lot for future needs - I appreciate the help and ideas - Mark, Tony and Mohammad

I ended up combining all methods you describe Mark. For my future reference and anyone who's following along:

• Edit $:/core/ui/EditorToolbar/superscript and replaced ^^ with == so the button (and eventually keyboard shortcut) does ==
• Remapped the shortcut for superscript in ControlPanel>Keyboard Shortcuts to ctrl-shift-= (mine shows as Firefoxequals for some reason), and removed the ctrl-shift-p that was in there.
  
• Cloned $:/core/modules/parsers/wikiparser/rules/emphasis/superscript.js to $:/core/modules/parsers/wikiparser/rules/emphasis/mark.js
• Replaced the \^\^ with == (for anyone reading, I believe the \'s are needed because ^ is a special character in Regex, not so with =)
• Replaced text "superscript" and "mark" and tag="sup" to tag="mark"
• Saved and refreshed

Exactly what I was hoping for - awesome

Tony, that is also a very interesting workflow - for my use-case it's too many clicks as-is (prefer no-mouse option for maximum speed), but it does have the additional potential benefits of storing the actual string of the todo - my method only ends up listing the hosting tiddler. If a variant could be setup to do most of this workflow from a single keyboard shortcut:

• Create new tiddler with selected text
• Maybe add a "todo" tag or something and
  
• Replace text with transclusion or something else with highlighting as previous solution
  

... then that would be even one step more powerful. I'll spend more thought on this - thank you for pointing this out.

[Leopold Bloom]

Thanks to this thread I am going to steal this method to list items to review.

I chose a simple route. Instead of manually editing .js files.

First, I chose to go with the subscript shortcut (Ctrl-Shift-B) which inserts two commas before and after the selected text:

,,Hello World,,

Second, I created a stylesheet tiddler Highlight CSS and tagged it  $:/tags/Stylesheet (shared in this thread earlier):

sub {

  font-size: inherit;
  vertical-align: baseline  ;
  line-height: 0 ;

  background-color: #9dd100;
  top: 0;
}

Third, in my Index tiddler (this is my first tiddler, at the top of my page):

$list filter="[!is[system]search[,,]]">
@@color:red; <$view field="created" format="date" template="0DD-0MM-YYYY"/>@@
<$link><$view field="title"/></$link><br>
</$list>

I would have liked it to be a regex, but the one I come up with is not working (?:,,).*(?:,,) with the regexp filter. But this will do it for now.