Obsidian plugin: copy document as HTML, including images

Overview

Copy as HTML

Plugin for Obsidian that copies the current document to the clipboard, so it can be pasted into HTML aware application like gmail.

This plugin exposes the Copy as HTML: Copy the current document to clipboard command, which can be bound to a keyboard shortcut.

Support

Currently working with :

  • images
  • plantuml
  • diagrams
  • obsidian-tasks
  • obsidian-dataview - for large dataview blocks the content may not be complete
  • Excalidraw - rendering as bitmap solves pasting in gmail

Implementation

The plugin converts image references to data urls, so no references to the vault are included in the HTML.

Known issues

  • Only works in edit mode.
  • Special fields (front-matter, double-colon attributes, ...) are not removed.
  • data-uris can use a lot of memory for big/many pictures

TODO / wish-list

  • Adjust image resolution / quality
  • Should be usable in preview mode also, using Workspace.activeFile

Development

Please see the Obsidian sample plugin.

Credits

Oliver Balfour for his obsidian-pandoc plugin, which helped me solve some rendering issues.

Comments
  • Plugin has no behavior

    Plugin has no behavior

    Describe the bug Right-clicking shows no option to copy as HTML. Using Cmd+P to use the command results in nothing on my clipboard.

    To Reproduce Steps to reproduce the behavior:

    1. Attempt to copy
    2. Attempt to paste

    Expected behavior Pasting would show what was supposedly copied.

    Desktop (please complete the following information):

    • OS: OS X 12.6
    • Version: Obsidian 1.0
    opened by micseydel 8
  • (optionally) format code blocks and callouts as tables

    (optionally) format code blocks and callouts as tables

    First of all, thanks for the plugin, is filling a big gap for me!

    Is your feature request related to a problem? Please describe. In apps like google docs there is no direct translation for code blocks or callouts.

    One alternative I've found that works really well is using tables.

    Describe the solution you'd like Code blocks A single row, single column table with mono font, no borders and background color: image

    Callouts Two row, single column table, first row has the type of callout or title, the second the content. Borderless and with background colors:

    image

    This could be enabled/disabled from the plugin options, the custom css will help to customize the colors Not sure about how difficult this would be, but I thought was a nice suggestion to made. What do you think?

    opened by vicrdguez 5
  • Image URL keeps the way it is

    Image URL keeps the way it is

    An images URL don't convert to SVG, keeps the URL.

    For example, my Markdown is:

    ![GitHub](https://fastly.jsdelivr.net/gh/emisjerry/upgit@master/20221670655020000nmd1lp.png)
    

    Please keep the origianl Markdown, do not convert to SVG.

    enhancement 
    opened by emisjerry 3
  • Code highlighting

    Code highlighting

    Is your feature request related to a problem? Please describe. Source code is just plain black when a document is pasted

    Describe the solution you'd like I expect syntax highlighting, like the preview in Obsidian.

    wontfix 
    opened by mvdkwast 1
  • Add basic styling

    Add basic styling

    Is your feature request related to a problem? Please describe. Currently no styling is applied, which causes a few problems for legibility :

    • no table borders
    • callouts not readable

    image

    Describe the solution you'd like Provide some minimal styling. Bonus feature would be to be able to select a theme. The user theme used in Obsidian should not be used for this.

    opened by mvdkwast 1
  • Mermaid with \n hangs export

    Mermaid with \n hangs export

    Describe the bug If a node contains a newline (\n), the plugin will hang on export.

    To Reproduce Create the following document :

    ```mermaid
    flowchart TD
    el(a\nb)
    ```
    
    bug 
    opened by mvdkwast 0
  • Resize images

    Resize images

    Is your feature request related to a problem? Please describe. When copy HTML of a note with images, it can convert the image into base64 inside the HTML. This is a great feature! Thanks so much.

    But the images are in their raw file image sizes in the output HTML. For example, a png file of size 1920*1080, and in the note it was set display width as 400 (![[image/path.png|400]]). In the copied HTML, it is still 1920 wide not 400.

    Describe the solution you'd like If it is possible to have the image resized according to the MD setting? like ![[image/path.png|400]] ?

    Describe alternatives you've considered na

    Additional context na

    opened by lyso 0
  • Expose some simple api functions

    Expose some simple api functions

    Adding minimal plugin api

    Changes:

    • Adds accessable api functions to this plugin: copy-as-html
    • Fixes the desktop-only file read error (tested on my own android mobile)
    • Added wait for promises completion to the ppIsProcessing flag

    Added Functions

    • Note: These functions are added to the plugin instance itself.
    • Note: All functions are async! They return promises you must await!

    Convert View

    Convert a markdown view to an html element.

    Params:

    • {MarkdownView} view The markdown: view to convert
    • {{convertSvgToBitmap: boolean, removeFrontMatter: boolean}} options: The options to pass to the converter.

    Return:

    Promise<HTMLElement>: A promise for an html element with the result of the markdown as html

    Convert Markdown

    Convert a raw markdown string to an html element.

    Note: This may cause tabs to open and close temporatily in the background, this is nessicary to render the items property without using the current view.

    Params:

    • {string} markdown: The raw markdown content string to convert
    • {string | undefined} sourceFilePath: The source file to use for fetching frontmatter, links, embeds, etc.
    • {{convertSvgToBitmap: boolean, removeFrontMatter: boolean}} options: The options to pass to the converter.

    Return:

    Promise<HTMLElement>: A promise for an html element with the result of the markdown as html

    Credits

    opened by MeepTech 3
  • Support of Mathjax/Latex

    Support of Mathjax/Latex

    The plugin you made is almost perfect but just this issue that it can parse latex properly.

    What I would Like is that it converts latex to image, just like the way you are dealing with excalidraw images. there are many websites out there which deals with that is coverting latex to image.

    Thanks For your Plugin. And Please support this feature, as early as possible.

    enhancement 
    opened by Gaaruda 5
Releases(0.3.3)
Owner
mvdkwast
mvdkwast
A plugin for Obsidian (https://obsidian.md) that adds a button to its search view for copying the Obsidian search URL.

Copy Search URL This plugin adds a button to Obsidian's search view. Clicking it will copy the Obsidian URL for the current search to the clipboard. T

Carlo Zottmann 6 Dec 26, 2022
Lightweight library to copy PNG and JPG images to clipboard

Copy Image Clipboard Created with ❤️ by Luan Eduardo da Costa | Follow me on Linkedin ?? About This library allows you to copy JPG and PNG images (onl

Luan Eduardo da Costa 34 Nov 29, 2022
Obsidian plugin: Implicitly add an alias matching the first heading in a document.

Alias from heading Aliases in Obsidian make it convenient to provide display names to document links. However, there are a few pain points: Aliases ar

Chris Basham 6 Dec 17, 2022
NoPrint.js - Disable Print, Screenshot, Copy & Paste in HTML by JavaScript.

NoPrint.js Disable Print, Screenshot, Copy & Paste in HTML by JavaScript. NoPrint.js is a small and neat open source JS library that disables print, s

null 33 Dec 26, 2022
An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor.

Obsidian Excel to Markdown Table An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor. Demo You can paste the copied Excel d

Ganessh Kumar 108 Jan 4, 2023
An Obsidian plugin that lets you browse the web within Obsidian.

Obsidian Web Browser An Obsidian plugin that allows you to browse the web within Obsidian using v1.0 tabs. The core functionality of the plugin, rende

Dion Tryban 102 Dec 28, 2022
A jquery plugin that allows an html page to be converted and/or downloaded into a Microsoft Word Document with an emphasis on performance

googoose A jquery plugin that allows an html page to be converted and/or downloaded into a Microsoft Word Document with an emphasis on performance Abo

Aaron Adel 32 Jan 3, 2023
An obsidian plugin for uploading local images embedded in markdown to remote store and export markdown for publishing to static site.

Obsidian Publish This plugin cloud upload all local images embedded in markdown to specified remote image store (support imgur only, currently) and ex

Addo.Zhang 7 Dec 13, 2022
Copy to clipboard jQuery plugin.

jQuery - Copy to clipboard Plugin jQuery Copy to clipboard plugin - copy any text to the user site's clipboard. Operates on the basis of creating hidd

Milan Kyncl 16 Aug 21, 2022
Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Mario Duarte 8 Aug 3, 2022
Quickly create an interactive HTML mock-up by auto sourcing lorem ipsum/images generators, with minimal html markup, and no server side code

RoughDraft.js v0.1.5 Quickly mockup / prototype HTML pages with auto-generated content, without additional JavaScript or server side code. <section>

Nick Dreckshage 464 Dec 21, 2022
Obsidian-dataview-table-filter-menu - Dynamically created filter menu for dataview tables in obsidian

Dataview table Filter Menu for Obsidian Dynamically created filter menu for data

shiro 17 Sep 24, 2022
Obsidian-Snippet-collection - A collection of snippet to customize obsidian

This repo is a collection of CSS snippets for Obsidian.md. To install them on PC

Mara 110 Dec 22, 2022
Obsidian Web: Connect your browser with your Obsidian notes

Obsidian Web: Connect your browser with your Obsidian notes This is an unofficial Chrome extension for Obsidian that lets you send content from the we

Adam Coddington 97 Jan 3, 2023
This project is a Web application based on an external API. The API provides data about music (including artists, albums, etc) that users can access on-demand. This project was built with ES6, HTML and CSS and it is a SPA.

Capstone M2: Music App This project is a Web application based on the music API Napster built with ES6, HTML and CSS and it is a SPA. This API provide

Karla Delgado 12 Aug 29, 2022
A vanilla JavaScript library that automatically generates the "Table of Contents" of an HTML document.

DocumentOutline.js DocumentOutline is a vanilla JavaScript library that automatically generates the "Table of Contents" of an HTML document. See a liv

Angelo Faella 3 Jul 12, 2021
Random Fractals stash of Observable Data Tools 🛠️ and Notebooks 📚 in ES Modules .js, .nb.json, .ojs, .omd, .html and .qmd document formats for Data Previews

Random Fractals stash of Observable Data Tools ??️ and Notebooks ?? in ES Modules .js, .nb.json, .ojs, .omd, .html and .qmd document formats for Data Previews in a browser and in VSCode IDE with Observable JS extension, Quarto extension, and new Quarto publishing tools.

Taras Novak 14 Nov 25, 2022
When pasting screenshots into obsidian notes, convert the images to jpeg and compress them

obsidian-paste-png-to-jpeg This plugin is inspired by obsidian-paste-image-rename, obsidian-paste-image-rename can be used when inserting images renam

null 19 Nov 15, 2022
Emoji - Use emoji names instead of Unicode strings. Copy-pasting emoji sucks.

Grammy Emoji Adds emoji parsing for grammY. Check out the official documentation for this plugin. While this draft is working, we still do not recomme

null 8 Sep 5, 2022