tag:support.markedapp.com,2011-09-11:/discussions/questions/8672-include-html-directiveMarked: Discussion 2016-08-11T03:15:26Ztag:support.markedapp.com,2011-09-11:Comment/387284102015-12-17T18:09:13Z2015-12-17T18:09:13ZInclude HTML directive<div><p>I'm not certain I understand. Is the original document HTML or
Markdown?<br>
Is the HTML populated via a GET call from JavaScript, or processed
prior<br>
to rendering the output? Are you trying to use <<{} includes
but with a<br>
query string?</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/387284102015-12-17T18:17:51Z2015-12-17T18:17:54ZInclude HTML directive<div><p>The original document is markdown which looks a bit like
this:</p>
<h2><a name="problem-statement" href="#problem-statement" class="anchor"></a>Problem Statement</h2>
<p>We need to do something</p>
<h2><a name="4ps-v-competition" href="#4ps-v-competition" class="anchor"></a>4Ps v. Competition</h2>
<h3><a name="section1" href="#section1" class="anchor"></a>Section1</h3>
<p><<{document1.html}</p>
<p><<{document2.html}</p>
<h3><a name="section2" href="#section2" class="anchor"></a>Section2</h3>
<p><<{document3.html}</p>
<p><<{document4.html}</p>
<h3><a name="section3" href="#section3" class="anchor"></a>Section3</h3>
<p><<{document5.html}</p>
<p><<{document6.html}</p>
<h3><a name="section4" href="#section4" class="anchor"></a>Section4</h3>
<p><<{document7.html}</p>
<p><<{document8.html}</p>
<p>The HTML documents contain charts, each of which has a different
data set. Rather than me having to have 8 duplicated HTML
documents, the only thing different in each is the data for the
charts. I was hoping to have 1 single document and somehow use the
<<{} directive to pass a variable that tells the HTML doc
which JSON file to use for rendering the graph.</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-17T19:03:10Z2015-12-17T19:03:11ZInclude HTML directive<div><p>Make sense now ?</p></div>Carl Bournetag:support.markedapp.com,2011-09-11:Comment/387284102015-12-17T20:06:07Z2015-12-17T20:06:10ZInclude HTML directive<div><p>So this is a sample of the data that I'm trying to pass into the
HTML page that renders the chart.</p>
<p>data = {<br>
"title": 'Title 1', "categories": [ "Category1", "Category2",
"Category3", "Category4", "Category5" ], "competition": { "Item1":
[5, 8, 1, 2, 5 ], "Item2": [5, 8, 1, 2, 0 ], "Item3": [5, 8, 1, 2,
0 ], "Item4": [5, 8, 1, 2, 0 ], "Item5": [5, 8, 1, 2, 5 ], "Item6":
[9, 9, 1, 2, 5 ], "Item7": [8, 5, 1, 2, 8 ], "Item8": [8, 5, 1, 2,
8 ], "Item9": [2, 5, 5, 5, 10 ], "Item10": [5, 5, 3, 3, 10 ] },
"misc": [2, 7, 9, 9, 10] };</p></div>Carl Bournetag:support.markedapp.com,2011-09-11:Comment/387284102015-12-17T20:10:23Z2015-12-17T20:10:23ZInclude HTML directive<div><p>Not something Marked is going to do on its own, but you could
pretty<br>
easily create a pre-processor script to do it. You'd set up a
syntax<br>
like "%%json-file%%" and then parse for the %%tags%% in the<br>
preprocessor, replacing with the necessary markup and injecting the
JSON<br>
file into the text returned to Marked for processing.</p>
<p>I can help a bit with this if you have a foundation in a shell
scripting<br>
language. Let me know.</p>
<p>Side note: If you're on the App Store version, you'll need to
set the<br>
preprocessor to the interpreter for the script (/bin/bash,<br>
/usr/bin/ruby, etc.) and the script as the argument. On the direct
version you can just make the script executable and use it as
the<br>
processor.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/387284102015-12-17T21:12:23Z2015-12-17T21:12:24ZInclude HTML directive<div><p>Looks good but maybe a little ambitious as my skills are more
aligned to Ruby, Python and Golang. I've not done that much with
shell scripting.</p>
<p>Actually the HTML file is pretty minimal its mainly JS so I
guess I could also inject that at the same time as the data ?</p>
<p>Here's the whole thing:</p>
<div>
</div></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-17T21:15:05Z2015-12-17T21:15:07ZInclude HTML directive<div><p>Heres The file.</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T13:04:59Z2015-12-18T13:05:00ZInclude HTML directive<div><p>Hi,</p>
<p>Could you please give me an idea as to how I can started with
creating a pre-processor script. I'll give this a go and see where
it takes me. Can this be done in Ruby or Python or does it need to
be shell script ?</p>
<p>It would be great to see this kind of functionality ultimatly
make it into the marked itself.</p>
<p>Thanks</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T13:30:15Z2015-12-18T13:30:17ZInclude HTML directive<div><p>OK I should have read the docs. I just found the section that
covers the pre-processor so I think I understand how that works
now.</p>
<p>So I get the part for creating a syntax like %%json-file%%. So
my pre-processor would then find the instances of %%json-file%% and
replace it with my HTML markup and JSON data which I guess would
result in a markup document that now contains raw HTML and custom
scripts including the related data.</p>
<p>Is my understanding correct here ?</p>
<p>From the docs, it does look like this processor can be created
using any language ?</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T13:42:21Z2015-12-18T13:42:21ZInclude HTML directive<div><p>That's correct. You're best off limiting yourself to the
languages<br>
provided with OS X by default (bash, python, ruby) as Marked can
only<br>
load a basic shell when it executes, and any environment variables
or<br>
custom installs may not be able to run.</p>
<p>And yes, if you use the html file as a template with its a
placeholder<br>
for the data or link, your custom script can take the filename from
the<br>
token and use it to concatenate the html shell and the data file
for<br>
each token found.</p>
<p>Let me know how it goes.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T13:53:37Z2015-12-18T13:53:39ZInclude HTML directive<div><p>Thanks Brett.</p>
<p>So I thinking of using Python and the Jinja2 templating
system.</p>
<p>So something like this:<br>
-----Test.md--------------- #Heading This is body text. graph will
display next......<br>
{{ json-file}}</p>
<h2><a class="anchor" href="#this-is-more-body-" name="this-is-more-body-"></a>This is more body.</h2>
<p>from jinja2 import Template</p>
<blockquote>
<blockquote>
<blockquote>
<p>template = Template(test.md) template.render(json='custom code
here')</p>
</blockquote>
</blockquote>
</blockquote>
<p>Except that I'm guessing the test.md will be passed in via stdin
and not a file.</p>
<p>Does this look feasible ?</p>
<p>Carl</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T14:04:02Z2015-12-18T14:04:04ZInclude HTML directive<div><p>Brett,</p>
<p>So something more like this, where arg1 is the MD including the
{{json-file}} and arg2 is the HTML/JSON/JS data that gets
injected.</p>
<p>from jinja2 import Template<br>
import sys<br>
input = sys.argv[1]<br>
template = Template(input)<br>
output = template.render(name=sys.argv[2])<br>
print output</p>
<p>Carl</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T14:27:24Z2015-12-18T14:27:24ZInclude HTML directive<div><p>That would require the argument to be variable, and the
processor can't<br>
handle that. What you want is for the token to contain the filename
you<br>
need, and the script to parse the STDIN input for matching tokens
via<br>
regex (e.g. /%%(.*?)%%/) and then handle the templating based on
that.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T15:30:26Z2015-12-18T15:30:26ZInclude HTML directive<div><p>Arh - make sense. I'll try that.</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T17:31:46Z2015-12-18T17:31:47ZInclude HTML directive<div><p>Hi Brett,</p>
<p>Are there any examples of a simple pre-processor preferably in
python ? Just struggling a little bit understanding the input
output process. Also, I assume if the pre-processor can only access
the system default python its not going to pick up any non standard
libraries.</p>
<p>Carl</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T17:48:35Z2015-12-18T17:48:35ZInclude HTML directive<div><p>The libraries generally work if installed with sudo
easy_install, but pip and pyenv can cause issues that require a
wrapper to load an environment.</p>
<p>I have examples in Ruby, might be able to find some in Python,
I'll get back to you when I'm back at my desk. Basically you'll
read STDIN, do whatever you like with the text, then print it to
STDOUT as Markdown for processing. If you want to set up a
processor (as opposed to preprocessor) the script is responsible
for returning html instead of Markdown.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T18:01:34Z2015-12-18T18:01:35ZInclude HTML directive<div><p>Thanks Brett,</p>
<p>Anything you've got will be much appreciated.</p>
<p>Carl</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T21:09:28Z2015-12-18T21:09:29ZInclude HTML directive<div><p>Hi Brett,</p>
<p>If you can't find any Python examples, Ruby will be fine. I'm
sure I can work it out.</p>
<p>Carl</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102015-12-18T21:39:26Z2015-12-18T21:39:26ZInclude HTML directive<div><p>I'm not finding any of the Python ones that have been shown to
me right now, I need to collect those in a GitHub repo for people.
At its most basic, here's a ruby example:</p>
<pre>
<code> #!/usr/bin/ruby
content = STDIN.read
content += "\n\n<!-- marked style: BrettTerpstra.com -->\n"
puts content</code>
</pre>
<p>Read it in, modify it, print it out. Yours will need to do a
regex search and replace, which in Ruby would be easily
accomplished with a gsub block. I'm not well versed enough with
Python to do it easily, but the <a href="https://github.com/CriticMarkup/CriticMarkup-toolkit/tree/master/Marked%20Preprocessor">
CriticMarkup preprocessor</a> is a good start.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/387284102016-01-05T13:40:42Z2016-01-05T13:40:45ZInclude HTML directive<div><p>OK, So I built a custom pre-processor thats pretty much working
except that it appears that some of the data ranges are being
overwritten.</p>
<p>I've attached an example of my markdown and the
pre-processor.</p>
<p>I think the the problem appears to be with the way the HTML is
being injected into the document since the debug python log
(logdata.log) shows that the data is being correctly interpreted
and passed into my HTML template.</p>
<p>I purposely created separate named data structures based on the
value of the ID contained within the YAML data.</p>
<p>I'm thinking I'm probably doing something really stupid but
would like a second oppinion if thats OK.</p>
<p>Carl</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102016-01-05T13:42:53Z2016-01-05T13:42:57ZInclude HTML directive<div><p>Doesn't seem to have uploaded my sample. Trying again.</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102016-01-05T15:33:39Z2016-01-05T15:33:39ZInclude HTML directive<div><p>Ok, so I got this working with a little bit of hacking. First,
the charts aren't showing up because Marked is moving the script
includes to the bottom of the body element, but the jQuery calls to
highcharts are happening before that load. I did two things to
correct this:</p>
<p>First, instead of using the XHTML Header metadata, I had the
script write out the script tag immediately before returning the
response.</p>
<pre>
<code># print h
sys.stdout.write('<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script>')
sys.stdout.write(h)</code>
</pre>
<p>Then I altered the anonymous function wrappers to ensure the
remote jQuery had time to load before it attempted to call anything
with the $ method:</p>
<pre>
<code>(function($){ [code] })(jQuery);</code>
</pre>
<p>As opposed to what you had:</p>
<pre>
<code>$(function () { [code] });</code>
</pre>
<p>Lastly, it was throwing a fatal error because
<code>console.log</code> was being called without quotes on a
variable that wasn't explicitly defined at that time, so changing
the python script template on line 38 to this fixes that issue:</p>
<pre>
<code>console.log('{{ id }}')</code>
</pre>
<p>Hope that helps.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/387284102016-01-05T18:51:10Z2016-01-05T18:51:11ZInclude HTML directive<div><p>Hi Brett,</p>
<p>Thanks for this. So I made the changes (see attached), however
whilst it is rendering the charts its throwing the following
error.</p>
<p>TypeError: $('#c1').highcharts is not a function. (In
'$('#c1').highcharts', '$('#c1').highcharts' is undefined)<br>
Error: Highcharts error #16: <a href="http://www.highcharts.com/errors/16">www.highcharts.com/errors/16</a></p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102016-01-05T18:51:54Z2016-01-05T18:51:56ZInclude HTML directive<div><p>Upload failed</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102016-01-05T22:27:04Z2016-01-05T22:27:06ZInclude HTML directive<div><p>Hi Brett,</p>
<p>The other thing I've noticed is that the JQuery and Highcharts
libs are being loaded twice as shown in the screenshot. Also, with
this approach none of the interactive chart elements in the charts
seem to work. Do they work for you ?</p>
<p>Carl</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102016-01-05T23:04:08Z2016-01-05T23:04:08ZInclude HTML directive<div><p>Did you remove the xhtml header meta from the md file?</p>
<ul>
<li>Brett</li>
</ul></div>Bretttag:support.markedapp.com,2011-09-11:Comment/387284102016-01-05T23:06:17Z2016-01-05T23:06:19ZInclude HTML directive<div><p>Yes, I certainly did. Double checked that. By the way, If I
export to HTML everything looks and works OK.</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/387284102016-01-06T16:31:36Z2016-01-06T16:31:36ZInclude HTML directive<div><p>Ok, I'm not getting that result at all. I'm attaching my version
of the pre-processor, as well as the test document just so we can
make sure we're on the same page.</p>
<p>If you could, let me know what version of Marked you're
currently running, and please attach a screenshot of the source
view (⌘U) of the result you're getting.</p>
<p>Thanks,<br>
Brett</p></div>Brett