Markdown highlighting

PopClip Extensions
1

It would be useful if there were an extension that, similar to the bracket or quotation mark extensions, could put double colons around selected text :: so that I can highlight text in markdown; or even better you can input what you character want to wrap the selected text with (for example, ** ~~ __, etc.).

Thanks!

5 Likes
2

Great suggestion! Thanks and welcome to the forum @chrisbarrettm

3

Hello there, I just learnt about popclip about a week ago through the post a post at Quick Tip: Writing Your Own PopClip Extension Snippets – The Sweet Setup

markdown highlighting and strikethrough were the 2 first reasons to use it
I am a noteplan user where there aren’t native buttons for highlighting or strike through so I made the next pop clip actions

# popclip
name: Highlight 
icon: symbol:highlighter
requirements: [text, paste]
javascript: popclip.pasteText('::' + popclip.input.text + '::')

and

# popclip
name: Strikethrough
icon: symbol:strikethrough
requirements: [text, paste]
javascript: popclip.pasteText('~~' + popclip.input.text + '~~')

it works for me fine in noteplan

3 Likes
4

Thanks for the tip! I’ll give it a try.

Cheers!

5

Works perfectly in Noteplan! I didn’t realize you could write own extensions in Pop Clip so thank you for the link. And very easy to implement.

Thanks again!

1 Like
6

Great work @haris_sab thanks for those! Nice use of symbols there.

Here’s a quick tip - in case people want to save on extension ‘slots’ (and for ease of installation), you can combine multiple actions into one extension like this:

# popclip
name: Markdown Helpers
requirements: [text, paste]
actions:
- icon: symbol:highlighter
  title: Markdown Highlight
  javascript: popclip.pasteText('::' + popclip.input.text + '::')
- icon: symbol:strikethrough
  title: Markdown Strikethrough
  javascript: popclip.pasteText('~~' + popclip.input.text + '~~')
- icon: symbol:bold
  title: Markdown Bold
  javascript: popclip.pasteText('**' + popclip.input.text + '**')
- icon: symbol:italic
  title: Markdown Italic
  javascript: popclip.pasteText('_' + popclip.input.text + '_')

Any properties defined at the top level, as in this case requirements, will apply to all actions, so they only have to be defined once. The title fields are optional but nice to have.

4 Likes
7

Thanks for the feedback! These snippets are a very new feature and I have given it limited publicity so far while we all get the hang of it. @haris_sab - thanks for the Sweet Setup link, I hadn’t seen that. They did a great job with the write-up, very concise and clear.

8

What is ‘Markdown Highlight’. I used it but it doesn’t seem to render, I just see the selected text prepended and appended with four dots, so can you enlighten me?

9

Some markdown apps don’t render highlighting. What app you trying to use highlighting in?

10

NotePlan, Drafts - I don’t understand the concept

11

Highlighing is a non-standard syntax and it depends on the markdown engine. There are a few different versions, ::, ^^, ==. it causes the text to be rendered in a highlighted style, for example:
CleanShot 2022-02-01 at 22.59.06@2x
In HTML it usually corresponds to the <mark> tag.

12

Doesn’t seem to work for me in NotePlan. It just shows the text surrounded by the the dots. Doesn’t render. Can you help?

13

You need to revise the theme to add the necessary code. Read this.

1 Like
14

Many Thanks. I will go through this and revert if needed.

15

When I install this extension (via highlighting and “popclip-install” clickin the pop-up) I get the actions in PopClip’s pop-up, but not with icons, just with text:

Screen Shot 2022-02-05 at 1.34.31 pm
Screen Shot 2022-02-05 at 1.34.31 pm954×44 12.3 KB

Any idea why?

1 Like
16

The symbols icons only show up on macOS 11.0 and above. For lower OS versions you could modify the snippet to use text-based icons instead (see https://github.com/pilotmoon/PopClip-Extensions#text-based-icons)

1 Like
17

Thanks for replying, @nick. Re OS requrenets, Catalina is not enough? After all the symbol viewer app is reported to work on Catalina.

18

No, Big Sur is required. Although you can install the symbol viewer app on Catalina, Catalina does not have the API for apps to access symbols. As you can see within the symbols viewer app, each symbol has a minimum OS version requirement. Typically this is 11.0 and some symbols require 12.0.

1 Like
19

I just spent a bunch of time recreating the snippets here (and others) before I found this thread ¯\(ツ)/¯

Sharing a more complete Markdown helper in case it helps anyone else. This might be near the upper usable boundary for combined actions in a single snippet.

# PopClip - Common Markdown
name: MD helpers
requirements: [text, paste]
actions:
- title: MD Header 1
  icon: H1
  javascript: popclip.pasteText("# " + popclip.input.text)
  description: adds Markdown header 1
- title: MD Header 2
  icon: H2
  javascript: popclip.pasteText("## " + popclip.input.text)
  description: adds Markdown header 2
- title: MD Header 3
  icon: H3
  javascript: popclip.pasteText("### " + popclip.input.text)
  description: adds Markdown header 3 
- title: MD Bold
  icon: symbol:bold
  javascript: popclip.pasteText("**" + popclip.input.text + "**")
  description: adds Markdown bold
- title: MD Italic
  icon: symbol:italic
  javascript: popclip.pasteText("*" + popclip.input.text + "*")
  description: adds Markdown italic
- title: MD Strikethrough
  icon: symbol:strikethrough
  javascript: popclip.pasteText('~~' + popclip.input.text + '~~')
  description: adds Markdown strikethrough
- title: MD Highlight
  icon: symbol:highlighter
  javascript: popclip.pasteText("==" + popclip.input.text + "==")
  description: adds Markdown highlighting
- title: MD Quote
  icon: symbol:quote.bubble.fill
  javascript: popclip.pasteText("> " + popclip.input.text)
  description: adds Markdown quote
- title: MD Code
  icon: </>
  javascript: popclip.pasteText("```\n" + popclip.input.text + "\n```" )
  description: adds Markdown code box
2 Likes