No description
Find a file
GnoxNahte 6fc932d465 Complete converting listening to <img> instead of <a>.
This is due to shifting to marking links with ![](link) instead of [](link).
This commit mostly removing previous code.
2024-03-11 13:53:51 +08:00
embeds Add support for Spotify embeds 2024-03-08 12:49:59 +08:00
.editorconfig Initial commit 2024-03-05 08:42:56 +08:00
.eslintignore Initial commit 2024-03-05 08:42:56 +08:00
.eslintrc Initial commit 2024-03-05 08:42:56 +08:00
.gitattributes Initial commit 2024-03-05 08:42:56 +08:00
.gitignore Initial commit 2024-03-05 08:42:56 +08:00
.npmrc Initial commit 2024-03-05 08:42:56 +08:00
esbuild.config.mjs Initial commit 2024-03-05 08:42:56 +08:00
LICENSE Create LICENSE (MIT License) 2024-03-06 15:59:39 +08:00
main.ts Complete converting listening to <img> instead of <a>. 2024-03-11 13:53:51 +08:00
manifest.json Initial commit 2024-03-05 08:42:56 +08:00
package-lock.json Initial commit 2024-03-05 08:42:56 +08:00
package.json Initial commit 2024-03-05 08:42:56 +08:00
preview-embed-modal.ts Complete converting listening to <img> instead of <a>. 2024-03-11 13:53:51 +08:00
README.md Clean up code, update README.md 2024-03-10 20:53:54 +08:00
settings-tab.ts Remove "Markdown link content" from these 2 commits: 3ec1d6a2a1 and c0c5c58f0f 2024-03-11 13:11:32 +08:00
styles.css Add support for Spotify embeds 2024-03-08 12:49:59 +08:00
suggestEmbed.ts Clean up code from previous commit (suggesting embed after pasting) 2024-03-09 10:54:50 +08:00
tsconfig.json Initial commit 2024-03-05 08:42:56 +08:00
utility.ts Completed asking user if they want to add embeds after pasting url (Code cleanup needed) 2024-03-09 10:18:47 +08:00
version-bump.mjs Initial commit 2024-03-05 08:42:56 +08:00
versions.json Initial commit 2024-03-05 08:42:56 +08:00

obsidian-auto-embed

Obsidian plugin to help embed links using markdown instead of iframe

Features

Auto embeds popular websites like YouTube, Twitter, and Steam.

Set Custom Options

Supported websites:

  • YouTube
  • Twitter
  • Reddit (Has some resizing bugs)
  • CodePen
  • Steam

Try not to modify this unless you want to:

  • Embed all links by default. See FAQ
  • Or want to change how the markdown looks in Source Mode and Live Preview mode

The plugin uses the text inside the markdown [text](example.com) to identify whether a link should be embedded or not. So try to make it unique to prevent the plugin from embedding other links unintentionally. It's also used to set your options.

This text will only show up in Source Mode and Live Preview. In Reading Mode, it'll show the embed result (iframe)

Some examples when url="https://www.youtube.com/watch?v=DbsAQSIKQXk&t=468s", options="dark-mode"

Format Result Remarks
embed:{{options}} embed:dark-mode embed: Don't need {{url}}, its just for you to know where the link points to in Live preview
embed:{{url}}|{{options}} embed:https://www.youtube.com/watch?v=DbsAQSIKQXk&t=468s|dark-mode Default format
embed:{{url}}, {{options}} embed:https://www.youtube.com/watch?v=DbsAQSIKQXk&t=468s\, dark-mode Changed | with ,
customText-{{options}} customText-dark-mode Don't need to start with "embed:"
{{options}} dark-mode Don't need any text at all, only options. However, this means that ALL links will be embedded (except those with noembed).
No format, not recommended as all links will be embedded and there's no options.

TLDR:

  • Don't need any specific text (But is better to prevent embedding other links unintentionally)
  • {{url}} is optional
  • But {{options}} is required if you want to have custom options for each link

Note: You can put other text other than your format. For example,

  • When Markdown Link Format = "embed:{{options}}",
  • Markdown can be [Video explaining how to use Obsidian embed:](https://www.youtube.com/watch?v=DbsAQSIKQXk&t=468s)
  • This means you can still describe your link and see it in Live Preview

How it works

  • When you paste a link, it suggests to embed the link
  • If you accept, it replaces the markdown with the markdown format

TODO

  • Instead of the quite complicated markdown try doing something like: Embed Web Pages - ![](link). Can check for some other special character like '@' to avoid conflict
  • Add support for embedding non-supported websites. But only do when task above ^ task is done.
  • Add support for other websites (Suggest some examples?)
    • Google Maps
    • Google Docs
    • Google Calendar
    • Notion
    • Other websites. Iframely has a list of websites that are embeddable.
  • Add tests
  • Updated Readme.md
    • Add images / gifs to show examples
    • Add installation instructions
  • Submit to Obsidian plugin directory?

Current Limitations & Known Bugs

  • Reddit: Incorrect resizing of Reddit embeds when there are multiple Reddit embeds.
  • Spotify: Only able to play 30 seconds of a song. Spotify only allows when the user is logged in the browser, which is not possible in Obsidian.

Frequently asked questions

The embed isn't appearing

Are you in Editor Mode? The plugin only works in Reading Mode. Click the book icon on the upper right to change to Reading Mode.

Yes! This is the mode I use too. It's disabled at the start to prevent confusion to those who aren't what happened to their vaults.

To enable it,

  • Go to Settings -> Auto Embed -> Show Advanced Settings
  • Then in Markdown link format, replace it with {{options}} Done!

This will only embed on links that the plugin supports

To disable embedding on a specific link, put noembed in the markdown. Example: [noembed](example.com)

Support

If you have any questions, suggestions or issues feel free to create a issue or contact me! Email - gnoxnahte@gmail.com Discord - https://discordapp.com/users/222261096738717696

If this plugin helped you and want to support it's development, consider supporting me at ko-fi