Skip to content

Instantly share code, notes, and snippets.

@supersupermomonga
Created October 4, 2015 05:33
Show Gist options
  • Save supersupermomonga/142177a226f3d83d49ec to your computer and use it in GitHub Desktop.
Save supersupermomonga/142177a226f3d83d49ec to your computer and use it in GitHub Desktop.
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.js'></script>
<script>
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: false
});
function optimizeHeight() {
var calcuratedHeight = $(window).height() - 90;
$('.tab-pane').css({ height: calcuratedHeight+'px' });
}
function toggleTab(e) {
var target = $(e.target).attr('href'),
markdown = $('#markdown').val(),
formatted = marked(markdown),
action = {
'#markdownContent': null,
'#htmlContent': function() { $('#html').html(formatted) },
'#previewContent': function() { $('#preview').html(formatted) }
};
action[target]();
}
$(function() {
optimizeHeight();
$(window).on('resize', optimizeHeight);
$('a[data-toggle="tab"]').on('shown.bs.tab', toggleTab);
});
</script>
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
html, body {
height: 100%;
}
textarea {
height: 100% !important;
min-height: 100%;
resize: none;
}
#tabs {
padding: 15px 0;
}
#preview {
height: 100%;
min-height: 100%;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: scroll;
}
</style>
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('script').addItem('show sideBar', 'markdown2html').addToUi();
}
function onEdit() {
onOpen();
}
function showSidebar() {
var html = HtmlService.createTemplateFromFile('layout').evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME).setTitle('Markdown2Html')
SpreadsheetApp.getUi().showSidebar(html);
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('_stylesheet'); ?>
</head>
<body>
<div class="container-fluid">
<div class="row" id="tabs">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#markdownContent" data-toggle="tab">Markdown</a></li>
<li role="presentation"><a href="#htmlContent" data-toggle="tab">HTML</a></li>
<li role="presentation"><a href="#previewContent" data-toggle="tab">Preview</a></li>
</ul>
</div>
</div>
<div class="row" id="content">
<div class="col-xs-12">
<div class="tab-content">
<div class="tab-pane active" id="markdownContent">
<textarea name="markdown" id="markdown" class="form-control"></textarea>
</div>
<div class="tab-pane" id="htmlContent">
<textarea name="html" id="html" class="form-control"></textarea>
</div>
<div class="tab-pane" id="previewContent">
<div id="preview"></div>
</div>
</div>
</div>
</div>
</div>
<?!= include('_script'); ?>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment