
I was looking for a script that would copy markdown formatted URL and title `[Title of Page](https://url.of.page.com)` from multiple browsers, since I'm using different browsers regularly. This kind of script can be used standalone or in one of the macOS automation apps like Alfred or Raycast.

<Image
  alt="Copy Markdown Title and URL in Raycast"
  src="/static/images/copy-markdown-title-raycast.jpg"
  width={1869}
  height={1317}
  layout="responsive"
/>

There are multiple examples of AppleScript, but most of them don't cater to multiple browsers. Also, as it turns out AppleScript automation is really cumbersome to work with. Its syntax was supposed to be readable, and it is, but due to that nature, it's not easy to write in. I'm not a fan of languages that try to mimic natural languages too much.

But as it turns out Since macOS Yosemite [JavaScript](https://en.wikipedia.org/wiki/AppleScript#JavaScript_for_Automation) is the first-class automation language. It's was much easier to create a more compact version of this script in markdown.

You can find the current version of the script in the following repository: [chodorowicz/copy-markdown-url-and-title: Script to copy URL and title from current browser](https://github.com/chodorowicz/copy-markdown-url-and-title).

To add it to Raycast follow instructions detailed here: [raycast/script-commands:](https://github.com/raycast/script-commands).

<Image
  alt="Copy Markdown Title and URL JXA script"
  src="/static/images/copy-markdown-title.png"
  width={1684}
  height={1212}
/>


A script that copies markdown URL and title from multiple browsers on macOS

How to copy markdown URL and title using JXA in Raycast (JavaScript automation for macOS)


Here's a quick tip for everybody using VS Code for viewing markdown files with code blocks. It might be handy for all of you to use VS Code as a note-taking app.

The problem is that by default, in VS Code markdown edit mode (not the preview mode, that's an entirely different story), code blocks are not very clearly styled. They don't look much different than other types of text, and VS Code doesn't offer an easy way to achieve that. The main problem is that VS Code theming doesn't allow setting the background color for different types of parsed syntax. Ideally, I'd like to set background color code blocks so they'd be easily distinguishable from the rest of the text.

<Image alt="VS Code lack of code blocks styling" src="/static/images/styling-code-1.jpg" width={1600/2} height={652/2} />

Fortunately, there's a [Highlight](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-highlight)  extension, which allows you to set much more advanced styling (background color 🎉) by defining regex patterns and styling rules. Of course, ideally, I'd prefer to use theme tokens from the `tmTheme` parser, but it seems it's the best we can have 🤷.

So, first, of course, install the extension. Then to define to enable code blocks highlighting for a particular repo, create a settings file `.vscode/settings.json`.

```json
{
  "highlight.regexes": {
    "([^`])(`[^`]+?`)": {
      "filterLanguageRegex": "markdown",
      "regexFlags": "g",
      "filterFileRegex": ".*\\.md",
      "decorations": [{}, {
        "backgroundColor": "rgba(0, 0, 0, 0.05)",
        "border": "1px dashed rgba(0, 0, 0, 0.1)",
        "borderRadius": "3px"
      }, {}]
    },
    "(```.+?```)": {
      "regexFlags": "gs",
      "decorations": {
        "backgroundColor": "rgba(0, 0, 0, 0.05)",
        "isWholeLine": true,
      },
      "filterLanguageRegex": "markdown",
      "filterFileRegex": ".*\\.md"
    }
  }
}
```

And now, after applying the settings  (drums 🥁🥁🥁).

<Image alt="VS Code with code blocks styling" src="/static/images/styling-code-2.jpg" width={1598/2} height={648/2} />

There's a little bit of regex trickery here around selecting single backticks `` ([^`])(`[^`]+?`) `` and triple backticks group ```` (```.+?```) ````. After that, there's only styling left. I'm using backgrounds and a bit of border color and radius in case of inline code blocks, but you [can do a little bit more with this API](https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions).


It's possible to style code blocks in a rich way in VS Code with a little help of Highlights extension

Latest

How to copy markdown URL and title using JXA in Raycast (JavaScript automation for macOS)

How to style markdown code blocks in VS Code