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>
@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