Skip to content

Add Google Docs and Gmail preview themes#348

Merged
schuyler merged 2 commits into
schuyler:mainfrom
petems:feat/#347-google-docs-gmail-themes
Apr 3, 2026
Merged

Add Google Docs and Gmail preview themes#348
schuyler merged 2 commits into
schuyler:mainfrom
petems:feat/#347-google-docs-gmail-themes

Conversation

@petems

@petems petems commented Mar 21, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Add two new CSS preview themes — Google Docs and Gmail — so users can
    draft Markdown and copy-paste rendered content into Google Docs or Gmail with
    minimal formatting cleanup
  • CSS-only additions to the Styles folder (folder reference) — no Objective-C
    code changes or Xcode project modifications needed

Google Docs theme

Matches Google Docs default formatting for seamless copy-paste:

  • Arial 11pt, 1.15 line-height, 816px max-width (~letter page)
  • Heading sizes matching Docs defaults (H1=20pt, H2=16pt, H3=14pt, H4=12pt)
  • Link color #1155cc with underline (Google's standard hyperlink blue)
  • Code blocks: grey background (#e8eaed) with green text (#1e8e3e),
    matching the Google Docs code add-on style
  • Prism syntax highlighting overridden to uniform green so the preview
    matches what appears after pasting into Google Docs
  • Blockquotes with 3px #cccccc left border

Gmail theme

Matches Gmail compose/reading defaults:

  • Arial 10pt, 1.5 line-height, 600px max-width (email body width)
  • Conservative heading scale for email context
  • Web-safe fonts only (Courier New for code — no Roboto Mono)
  • Gmail quoted-reply style blockquotes (2px #cccccc left border)
  • Light #cccccc table borders (Gmail strips heavy styling)

References

Both files include header comments documenting color/layout choices with source URLs:

Test plan

  • Build MacDown and confirm both "Google Docs" and "Gmail" appear in
    Preferences > Rendering > CSS dropdown
  • Open a Markdown file with headings, lists, links, code blocks, tables,
    and blockquotes
  • Select "Google Docs" theme — verify preview renders with Arial, tight
    line spacing, letter-width layout, green code blocks
  • Select "Gmail" theme — verify preview renders with smaller font, wider
    line spacing, narrower email-width layout
  • Copy rendered preview content and paste into Google Docs — verify
    minimal formatting differences
  • Copy rendered preview content and paste into Gmail compose — verify
    minimal formatting differences
  • Verify existing themes are unaffected
  • All existing unit tests pass

Closes #347

petems and others added 2 commits March 20, 2026 20:06
* Add Google Docs CSS theme matching Docs default
  typography (Arial 11pt, 1.15 line-height, 816px)
* Add Gmail CSS theme matching email defaults
  (Arial 10pt, 1.5 line-height, 600px max-width)
* Both use Google's #1155cc link color
* Include reference URLs for color/layout choices

Closes schuyler#347

Co-Authored-By: Claude <[email protected]>
* Override Prism syntax highlighting tokens to uniform
  green (#1e8e3e) so preview matches Google Docs paste
* Change code background from #f1f3f4 to #e8eaed
  (Google Docs code add-on style)
* Fix inline code: relative font-size (0.85em), green
  text, better padding
* Update color reference comments

Related to schuyler#347

Co-Authored-By: Claude <[email protected]>
@schuyler

schuyler commented Apr 3, 2026

Copy link
Copy Markdown
Owner

Thanks for the PR!

@schuyler schuyler merged commit e134cf7 into schuyler:main Apr 3, 2026
5 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Approximate Google Doc / Gmail Formatting for Editor themes and CSS files

2 participants