Giter VIP home page Giter VIP logo

obsidian-copy-as-html's Introduction

Copy Document 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 document as HTML command, which can be bound to keyboard shortcuts (see below). Content can also be copied from the file explorer view.

image

Features

Commands

copy-as-html-actions

The commands can be bound to keyboard shortcuts from the hotkeys menu, or run using the commands menu (Ctrl+P)

Copy selection or document to clipboard : If text is selected, it will copied as HTML into the clipboard. If no text is selected, the entire document is copied. This should probably be your default keyboard shortcut. (suggestion: Ctrl+Shift+C)

Copy entire document to clipboard : Copy the entire document

Copy current selection to clipboard : Copy the selected text only

Media 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
  • ✅ Mermaid

image

Styling

By default, simple styling is applied to the document. The stylesheet can be customized through the plugin settings, eg. to customize how tables or quotes look. Feel free to improve the current style and show it the world !

image

Advanced

  • You may choose whether you want to embed external links (http, https) or not. If you don't (default), you will need internet access to view the document, and the linked image may be taken offline. If you do your documents will be larger.
  • It is possible to customize or replace the stylesheet in the settings dialog.
  • The default is to convert SVG to bitmap for better compatibility at the cost of potential quality loss. If you know that you are pasting into an application with good .svg support, you can disable the Convert SVG to bitmap setting.
  • It is possible to render code and callouts to HTML tables. This makes them ugly except in Google Docs where they make the document slightly prettier.
  • If you have titles in your markdown files, use the filename as title
  • If you don't need a full HTML document but only a HTML fragment, for instance to paste into an existing document enable the "Copy HTML fragment only" option.
  • You may also retrieve the HTML content by pasting into a non-HTML editor, such as notepad.

Implementation

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

Known issues

  • No mobile support
  • Support for removing special dataview fields (double-colon attributes, ...) is experimental, and bracket notation is not supported. They are also not removed from transcluded files.
  • data-uris can use a lot of memory for big/many pictures

Also see the issues section on github, and feel free to ask anything here.

Install

Look for Copy document as HTML in the community plugin section in the Obsidian settings.

Don't be afraid to report or ask if anything seems wrong !

Development

Please see the Obsidian sample plugin.

Credits

  • Oliver Balfour for his obsidian-pandoc plugin, which helped me solve some rendering issues.
  • @TfTHacker for his BRAT plugin which makes beta-testing a breeze.
  • PJ Eby for his Hot-reload plugins which makes plugin development fast and fun.
  • @jkunczik for enabling transclusions to work with heading references
  • @Ivan1248 for making the generated HTML more standard-compliant and @fetwar for his constructive comments on the subject

obsidian-copy-as-html's People

Contributors

brradut avatar ivan1248 avatar jkunczik avatar mvdkwast avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

obsidian-copy-as-html's Issues

Copy as HTML button by right clicking doesn't seem to be working?

When I click on the button to Copy to HTML nothing seems to happen

image

But when I try to do it with my hotkey'd command, there is a short progress bar and I do get the document into the clipboard, so when I use the hotkey it works just fine

image

The plugin is working great for me with the hotkey, but in general I don't use hotkeys for tasks like these (that I don't do that often). I wonder if this is a bug or if there's any plugin that this is incompatible with?

Edit: further information on this:

It seems that I can only copy a document to HTML when my text cursor is enabled in a file
image

If I select something from the vault (left click) obsidian will automatically place the cursor at the beginning of the file and like this I can use Copy as HTML through the hotkey shortcut.

If I right click any file on the vault, the cursor will be removed and I no longer can copy to html (I can't copy even when I use the hotkey in this scenario)

Images in Transcluded Notes are missing

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Transclude a note (containing at least one image) into another "Parent Note"
  2. Copy the Parent Note to HTML, then paste into empty Google Docs document

Expected behavior
Images from the transcluded note will be visible. Actual behavior, images appear as Obsidian path text placeholders

Screenshots
Obsidian Source Mode
image
Obsidian Live Preview
image|250
Google Docs or Gmail
image

Desktop (please complete the following information):

  • OS: Windows 10
  • Version: Obsidian 1.3.7 w/ Copy document as HTML v0.5.0

Additional context
Thanks for the awesome plugin! Hard to imagine using Obsidian without it!

Edit
Added Obsidian Source Mode Screenshot

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.

Mobile support

The title says all. This feature has been requested multiple times already.

Copy selection instead of whole document

Discussed in #17

Originally posted by aravindk100 January 12, 2023
Copy selection as HTML – There is another plugin that does similar capability, but that plugin does not appear to be actively developed and has a few bugs that limit the usage of it. With all the capability, this plugin as this would be an wonderful addition.

When I copy paste documents with tasks, checkbox renders differently between Word and Outlook

Discussed in #29

Originally posted by aravindk100 May 8, 2023
I noticed that checkboxes in Word looks good but in Outlook, empty check boxes has a red cross in them. Is there a way I can customize the stylesheet to avoid this? Most of my workflow uses copy pasting in Outlook for sending meeting minutes and I have not been able to find a workaround for this. I have not observed the same issue when I export through pandoc plugin.

Word rendering
image

Outlook rendering
image

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)
```

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.

Plugin fails to remove pinpoints and handle display text of wikilinks

Describe the bug
The plugin fails to remove the # and | portions of a wikilink if the respective option is activated. In addition, one would expect that the display text would be displayed, rather than the link text. (I suspect it also fails to remove the ^ block pinpoint but simply interprets it as superscript.)

To Reproduce
Steps to reproduce the behavior:

  1. Add the following text to an editor: [[Test link]]. [[Test link header#header]]. [[Test link block#^test]]. [[Test link display test|display text]]
  2. Activate the "Remove Wikilink brackets" option
  3. Copy with the assigned hotkey for "copy as html"
  4. Paste into e.g. Word

Result
Test link. Test link header#header. Test link block#. Test link display test|display text

Expected behavior
Test link. Test link header. Test link block. display text

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.

Strip off links to obsidian documents

Discussed in #17

Originally posted by aravindk100 January 12, 2023
Can you add an option to strip off links and convert them to plain text - Links are for other notes, which does not mean much when I copy and paste into another software like Outlook?

Upon Copy, optionally include the File Name

Discussed in #34

Originally posted by MikeSeim July 9, 2023
I think it'd be really nice to have the option to include the title of the file, the file name, included at the first line of the copied content as Heading-1-styling. If included, perhaps include two line breaks to make it format nicely.

I imagine some folks include the title of their note on the first line in the note whereas others might use the filename as the title. For those in the later camp, like me, that'd be really nice.

I found this plugin today for my recipe vault. When I want to print the recipe, I find Obsidian's export to PDF feature putzy. This plugin actually makes it easier; I think. I just "ALT+P" and paste in a blank work document. Super nice! I can even quickly delete aspects of my recipe I don't want printed, notes for example. But I'm missing the recipe title which is actually the file name.

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

FR: Copy as HTML content only, not full page

Is your feature request related to a problem? Please describe.
I like this plugin except for the fact that it creates an entire HTML page document, instead of just HTML for the contents of the note. I'm not looking to paste the entire page into a blank text file and save it as .html, or use it to compose a styled email. I just want to "copy as HTML" much in the same way that the Ulysses writing app offers natively: Copy As > HTML. It just takes the markdown and converts it to HTML without adding any fluff.

Describe the solution you'd like
A second hotkey option (so that we can choose which one to use, or use both with different hotkeys) that is something like "Copy as content HTML" or so. Although preferably, I would rename the existing hotkey to "Copy as HTML Page" and this new option "Copy as HTML contents"

Describe alternatives you've considered
The alternative I've considered is not using this plugin and writing in Ulysses.

MarkdownRenderer.renderMarkdown is deprecated

The MarkdownRenderer.renderMarkdown function in the Obsidian API is deprecated and should be replaced with a call to the new API.

This is a technical issue, and should be solved before this function is removed from the Obsidian API.

[Question] Resize images as render in obsidian

Hello author, when I preview my notes in Obsidian, they are always fixed to the same size.
However, when I export them to HTML, they are in their original size, which results in inconsistent image sizes. How can I set it so that the exported images are all the same size?

In obsidian:
image

After export in html:
image

Remove dataview metadata fields

Lines like the following should be removed from the export :

rating:: 9
some info:: here

Inline meta-data like this must be preserved:

A very good movie with a [rating:: 9].

This feature should be an option, since for some kind of content the meta-data may be necessary to keep.

Nothing copied on iOS

Describe the bug

On iOS, the Copy as HTML command doesn't touch the clipboard, so nothing is copied.

To Reproduce
Steps to reproduce the behavior:

  1. Use Obsidian for iOS (version 1.3.5, for instance).
  2. Select text.
  3. In the tools ribbon (below the document, typically above the keyboard), select the Command Palette (">_" icon).
  4. Select the "Copy as HTML" command.

The result is that the clipboard is left untouched.

Expected behavior

Instead, an HTML version of the text should go to the clipboard.

Smartphone:

  • Device: iPhone 13 Pro
  • OS: 16.5.1
  • Browser: Safari
  • Version: ? (version in iOS 16.5.1), with default Experimental features.

This is really handicapping, when HTML (and not Markdown) is important (for example for pasting into an email).

Front matter is getting copied over when dataview inline variable is also present

Describe the bug
Front matter is getting copied in the final HTML (even with the option selected to ignore front matter) only when there is inline variable using dataview is present. When I try the same steps without inline variables front matter is ignored. The option to enable or disable remove data view metadata lines has no effect.In both cases dataview inline variables still got removed (which is fine by me but does not seem to follow the option)

To Reproduce
Steps to reproduce the behavior:
Copy document as HTML when document has dataview inline variable.

Expected behavior
I expect front matter and dataview inline variables to be removed from the final output

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows 11

Callout as table is placed at end of text

Describe the bug

When exporting a text with a callout and with the option "Render some elements as tables" on, the callout is pasted at the end, instead of its original place.

To Reproduce

Text first

> [!info] A callout
> Callout text.

Second text.

Export looks like

Text first
Second text.
A callout
Callout text.

Expected behavior

I'd expect

Text first
A callout
Callout text.
Second text.

Desktop, Windows 10, Obsidian 1.1.16, plugin version 0.4.0

(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?

Notes that contain a transcluded section of another note do not export correctly

For Example, exporting a note containing this:

### First Project
![[NoteID1#section10]]

### Second Project
![[NoteID2#section14]]

### Third Project
![[NoteID3#section5]]

Results in this:

First Project
NoteID1 > section10
Second Project
NoteID2 > section14
Third Project
NoteID3 > section5

Instead of the transcluded content

Transcluding the full note works correctly.

Copy note with embedded heading of another note

I often have a heading of one note embedded in another note. For example:

note a:

Heading XYZ

Some Text under this heading

Heading ABC

<MANY OTHER TEXT OF NOTE A

note b:

![[note a#Heading XYZ]]

In Preview of note b I only see from note a:

Heading XYZ

Some Text under heading

Wehn I export it with your plugin. In the html output of note b I see all content of note a and not only the heading XYZ

File name as H1 (FR)

Hi, as the title says: It would be nice to have an option to copy the filename (page title) as H1 above the content!

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

If possible, it is hoped that support can be provided for format conversion using Pandoc.

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
markdown -> html --pandoc-->docx

Describe alternatives you've considered

Using the "obsidian-copy-as-html" plugin, convert Markdown to HTML and copy it to the clipboard. Then, use the following Windows script to convert it to the desired format, such as DOCX. The script will be bound to a shortcut key for easy use.

@echo off

REM 从剪贴板读取内容并写入temp.html文件(使用UTF-8编码)然后将其通过pandoc转换成docx,方便分享后二次编辑

REM 从剪贴板读取内容并写入temp.html文件(使用UTF-8编码)
REM powershell -command "Add-Type -AssemblyName PresentationCore; [Windows.Clipboard]::GetText()" | Out-File -Encoding utf8 temp.html
powershell -command "Add-Type -AssemblyName PresentationCore; [Windows.Clipboard]::GetText() | Set-Content -Path temp.html -Encoding utf8"

REM 使用文件浏览器选择模板文件
set "template="
for /f "delims=" %%i in ('powershell -Command "Add-Type -AssemblyName System.Windows.Forms; $OpenFileDialog = New-Object System.Windows.Forms.OpenFileDialog; $OpenFileDialog.Filter = 'Word files (*.docx)|*.docx|All files (*.*)|*.*'; $OpenFileDialog.Title = 'Select a template file'; $OpenFileDialog.ShowDialog() | Out-Null; $OpenFileDialog.FileName"') do set "template=%%i"

REM 检查模板文件是否存在
if not exist "%template%" (
    echo Template file not found.
    exit /b 1
)

REM 调用pandoc进行转换
pandoc temp.html -o output.docx --reference-doc="%template%" --variable mainfont="宋体"

REM 打开转换后的文件目录
start "" "%SystemRoot%\explorer.exe" /select,"%cd%\output.docx"

REM 删除中间的临时文件
del temp.html

Additional context
The purpose of this requirement is to export files edited with Obsidian, along with some plugins such as PlantUML and Excalidraw, into more common formats such as DOCX, so that they can be shared with people who do not use Obsidian for further editing. The existing export plugins cannot handle the added features of the PlantUML and Excalidraw plugins, as well as the default image link format in Obsidian.

Convert [[internal links]] to <a> tag

Is your feature request related to a problem? Please describe.
I would like to request the functionality of being able to copy an internal link as an external link, as is done in the Obsdian_to_Anki plugin.

Describe the solution you'd like
When we copy a selection that contains an internal link like [[test]], the plugin will convert that selection into an a tag with href. <a href="obsidian://open?vault=vaultName&amp;file=Test">Test</a>

Describe alternatives you've considered
Didnt find another alternatives than that

Additional context
As not everyone may want it, it would be interesting to just leave an option for those who want it.
Full example if it helps: <a href="obsidian://open?vault=My%20Vault&amp;file=Test%20A">Test A</a>

Furthermore, thank you very much for the plugin, it was an alternative to my workflow that needed to copy some summaries from Obsidian to HTML.

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.

mermaid subgraph

The following code generates an image with a black background

```mermaid
flowchart LR
subgraph title
direction LR
    A(a)-->B(b) 
end
```

Is the subgraph option supported?
mermaid-obsidian-subgraph

Olivier

Recognizing an Alias

Currently, this will remove the wikilink brackets, which is excellent, but it would be even better if there were an option to parse everything out but the alias.

For instance the wikilink of [[Flintstone, Fredrick|Fred]]

Currently pastes as Flintstone, Fredrick|Fred

Ideally, we would have an option for it to paste as Fred

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.