frankyonnetti
12/20/2017 - 2:31 PM

Easily style HTML output from iA Writer

Easily style HTML output from iA Writer

hack-ia_writer.markdown
content_copyfile_download
  • Rendered
  • Source
  1. Right-click on iA Writer.app in your Applications folder, select "Show Package Contents"
  2. Open up Resources/English.lproj/htmlTemplate.html in your favorite text editor
  3. Add a link to a CSS file in your home directory (and anything else you might want). I put mine in ~/Library/Application Support/iA Writer/themes/policus/css/styles.css and decided to load a couple of web fonts from Google. See hacked-htmlTemplate.html later this gist.
  4. Save, exit
  5. Create the CSS file, override default Writer styles

Now when you export to HTML from inside of Writer, your HTML file will be styled according to your your overrides. Want to share your pretty docs? Print to PDF.

Next steps: Link to a locally-hosted jQuery and write a little JS app for switching themes in browser.

hacked-htmlTemplate.html
content_copyfile_download
<!DOCTYPE html>
<!--[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-gb"><![endif]-->
<!--[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-gb"><![endif]-->
<!--[if IE 8 ]><html class="ie ielt9 ie8" lang="en-gb"><![endif]-->
<!--[if IE 9 ]><html class="ie ie9" lang="en-gb"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en-gb"><!--<![endif]-->
  <head>
    <title>__IAWRITER_DOCUMENT_TITLE__</title>

    <meta charset="utf-8">

    <meta name="author" content="__IAWRITER_USER_NAME__">
    <meta name="generator" content="iA Writer for Mac __IAWRITER_BUNDLE_VERSION__" />

    <style>
      html,body,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,em,img,small,strong,sub,sup,b,i,dl,dt,dd,ol,ul,li,table,tbody,tfoot,thead,tr,th,td {
      background:transparent;
      border:0;
      font-size:100%;
      margin:0;
      padding:0;
      outline:0;
      vertical-align:baseline
      }

      body {
      background-color:#FFFFFF;
      color:#222222;
      font:normal normal 400 100%/1.5em serif;
      margin:2em auto;
      width:45em;
      }

      a {
      background-color:transparent;
      font-size:100%;
      margin:0;
      padding:0;
      vertical-align:baseline
      }

      hr {
      border:0;
      border-top:1px solid #CCCCCC;
      display:block;
      height:1px;
      margin:1em 0;
      padding:0
      }

      h1,h2,h3,h4,h5,h6,dl,ol,ul,p,blockquote,pre {
      margin-bottom:1em;
      margin-top:1em
      }

      ol ol,
      ol ul,
      ul ol,
      ul ul {
      margin-left:1.5em
      }

      dd,dt,li {
      display:list-item outside
      }

      blockquote {
      border-left:solid .1em #DDD;
      padding-left:1.4em;
      quotes:none
      }

      blockquote ol,
      blockquote ul {
      margin-left:1.5em
      }

      code {
      background-color:#FFE;
      font-family:monospace, sans-serif;
      font-size:87.5%;
      margin-bottom:-.125em;
      margin-left:.125em;
      margin-right:.125em;
      margin-top:-.125em;
      padding:.125em
      }

      pre {
      background-color:#FFE;
      padding:.75em
      }

      pre code {
      display:block;
      margin:0
      }

      h1 {
      font-size:1.5em
      border-bottom: 3px double #444
      }

      h2 {
      font-size:1.3125em
      border-bottom: 3px double #dedede
      }

      h3 {
      font-size:1.125em
      border-bottom: 2px solid #d3d3d3
      }

      h4 {
      font-size:1em

      }

      h5 {
      font-size:1em
      }

      h6 {
      font-size:1em
      }

      table {
      border-collapse:collapse;
      width:100%
      }
    </style>
    
    <!-- override styles -->
    <link href='http://fonts.googleapis.com/css?family=Inconsolata&v1' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:regular,regularitalic,bold,bolditalic&v1' rel='stylesheet' type='text/css'>
    
    <link rel="stylesheet" href="file:///Users/alexcabrera/Library/Application%20Support/iA%20Writer/themes/policus/css/styles.css">
  </head>
  <body>
__IAWRITER_CONTENT__
  <!-- HTML document generated using John Gruber's Markdown.pl script: http://daringfireball.net/projects/markdown/ -->
  </body>
</html>