Applying Preview Theme for Exported Files

anon4309311 · October 1, 2018, 2:22pm

This would most likely apply to the “export-as-html” plugin, however I was not sure if this needed to be posted as issue on the github page or here.

Since the current themes in Inkdrop already render along with the preview window, I would like to suggest to add the option for the export module to use the editor preview theme instead. This would let the user export their Markdown files in the same style as the preview instead of the default Github Markdown theme that’s set under the Theme settings.

Another thing that could be easily added for a more personal touch would be Font customisation. The easiest would be to query fonts.google.com for available fonts, and have the user select two fonts for exporting and/or editing. One for normal text, and one for code text.
Fonts can be loaded through the Google fonts CDN, so it won’t create much larger HTML (unless the fonts have to be available offline).

craftzdog · October 2, 2018, 2:38am

Hi ZeroThe2nd,

Thank you for the suggestion.
Supporting preview theme for exported files sounds nice.
It’ll plan to support it.

If you would like to customize fonts, you can make your own preview theme that uses google fonts once theming is supported.
Here is a documentation about how to create a theme: https://doc.inkdrop.info/manual/creating-a-theme

craftzdog · October 9, 2018, 4:04am

Oops, I found that the app already supports using preview theme for exported files!

github.com

inkdropapp/inkdrop-export-utils/blob/master/src/index.js#L22


ReactDOM.render(file.contents, container)
let html = container.innerHTML


document.body.removeChild(container)


return html
}


export function getStylesheets () {
return inkdrop.styles.getStyleElements().filter((el) => {
  return typeof el.context === 'undefined' || el.context === 'inkdrop-preview'
}).reduce((styles, el) => {
  return styles + el.outerHTML
}, '')
}


export async function replaceImages (body, dirToSave) {
// find attachments
const uris = body.match(/inkdrop:\/\/file:[^) ]*/g) || []
for (let i = 0; i < uris.length; ++i) {
  const uri = uris[i]

So all you have to do is to create your own preview theme.

Thanks