Skip to content

Instantly share code, notes, and snippets.

@alexcabrera

alexcabrera/hack-ia_writer.markdown

Created June 25, 2011 19:50
Show Gist options
  • Save alexcabrera/1046827 to your computer and use it in GitHub Desktop.
Save alexcabrera/1046827 to your computer and use it in GitHub Desktop.
Download ZIP
Easily style HTML output from iA Writer
Raw
hack-ia_writer.markdown
  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.

Raw
hacked-htmlTemplate.html
<!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>
@maxtruxa
Copy link

maxtruxa commented Apr 2, 2014

In the current iA Writer version (1.5.1) there is no Resources/English.lproj/htmlTemplate.html anymore.
Instead the templates are now split for preview (Resources/preview.tpl.html), export (Resources/export.tpl.html), and print (Resources/print.tpl.html).

@tobyweston
Copy link

iA Writer 2.1.1 has changed again, its Resources/iA Writer.writertemplates/Contents/Resources export.tpl.html and preview.tpl.html. The template engine has also changed so see my modified version of your template below.... thanks for sharing :)

ps, out of interest, any chance you could share styles.css?

<!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>
    <meta charset="utf-8">
    <title>{title}</title>
    <meta name="generator" content="{generator}" />

    <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>
  {contents}
  <!-- HTML document generated using John Gruber's Markdown.pl script: http://daringfireball.net/projects/markdown/ -->
  </body>
</html>

@gavinwye
Copy link

In version 2.1.3 these files seem to have changed again I've just successfully edited iA Writer.writertemplate/Contents/Resources/local.tpl.html. I also linked to a css file located on my site, so there's another option if you don't want needles duplication of files and want to roll in changes to stile in the future.

I'm using typekit to host the fonts for my site and they don't work in the iA Writer preview. If anyone has any ideas for getting this working I'd appreciate the help.

@dw-io
Copy link

dw-io commented Mar 7, 2016

do you guys expect that updating export.tpl.html would actually impact the exporting of html from iA Writer?

I tried adding in CSS headers for my site to avoid having to modify every file exported, but they are stripped on export.

Edit: I also tried creating a .iawritertemplate directory. I had to change a few plist files, but it shows up with the name I gave it as a selectable style. Unfortunately, the changes to the export template are still not acked. Maybe they've changed something.

@martinmodighkarlsson
Copy link

martinmodighkarlsson commented May 13, 2017 •
edited
Loading

Thanks for your instructions on how to style HTML-output. I use IA for writing blog posts for WP sites now and then. As WP seems to accept Markdown only when typed in wysiwyg editor, not copy+pasted, I'd like to export head- and footerless HTML from IA. How would you go about to be able to export text or html-files starting with i.e. '<h2'> (since '<title usually is = ') instead of '<html'> and ending with '</p'>?

@Kofoed
Copy link

Kofoed commented Nov 1, 2017

Oh dear, the steps involved in creating custom html export has changed so many times. Unfortunatly, it's becoming more and more confusing. It doesn't even seem to be possible anymore — I can't locate any export.tpl.html file anywhere, and the documentary on creating templates is just for pdf output and in-client preview. Back to IA Writer Classic, I guess.

@chippwalters
Copy link

What is up with styling HTML on export for iA Writer? Just can't figure out how to do it. Are there templates for this sort of thing? TIA.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment