Please add a live example to this howto.
Add Matlab code block
Posted by GFMIngo on 11 Jun 2009 23:03, last edited by Ed Johnson on 03 May 2010 17:07
Wikidot does not support direct Matlab syntax highlighting. There is, however, a workaround to post nice-looking Matlab scripts. Here is how you do it:
- Download a special Matlab script, unzip the archive, so that you end up with a highlight folder;
- Put the m-file you wish to post on Wikidot in the same folder and run the Matlab itself;
- In Matlab, go to the folder and run the following command: "highlight('name of your m-file',struct('type','html','linenb',0))". As a result, you will get an HTML-file that contains a properly highlighted code;
- Now in Wikidot editing window type the following:
[[collapsible show="Description of your script" hide="Description of your script"]]
[[iframe http://your-wikidot-site/page-name/code/number-of-your-code-block frameborder="0" scrolling="no" width="100%" height="pick up manually" style="background-color: #F7F7F7; border: 1px dashed #DDDDDD;"]]
[[/collapsible]]
[[div style="display : none;"]]
[[code type="html"]]
full contents of your html file, starting with <html> tag and ending with </html>
[[/code]]
[[/div]]
You can use comments instead of a "div" tag in this code, i.e.
[!-- ... --]
instead of
[[div style="display : none;"]] ... [[/div]]
Things you have to change manually in the code above are:
- Description of your script;
- http://your-wikidot-site/page-name/ - page where you wish to add the script
- number-of-your-code-block - this is the actual index number of your code, so if there are 2 scripts already present on the page and you are going to post the third one, type "3" (without quotes);
- height - this is the height of your code block in pixels. You'll have to pick it manually until you are pleased with the result.
Of course, experienced users can tailor this code according to their needs. For instance, not everyone needs to make a code block collapsible or someone might want to make an iframe less in height but scrollable. But this code will get you started.
Here is a demonstration of this approach:
<html> <head> <title>plotfe.m</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="generator" content="highlight.m © 2003 Guillaume Flandin"> <style type="text/css"> .comment {color: #228B22;} .string {color: #B20000;} .keyword, .cont {color: #0000FF;} .cont {text-decoration: underline;} .code {color: #000000;} </style> </head> <body> <pre class="mcode"><span class="keyword">function</span> plot_fe(propertyname, label, log) <span class="comment">% property name = name of file (without txt ending) that should be visualised</span> <span class="comment">% label = label to be displayed at the colorbar</span> <span class="comment">% log = y/n switch to plot log-scale</span> <span class="comment">% nodes and elements</span> n = load([<span class="string">'nodes.txt'</span>]); e = load([<span class="string">'elements.txt'</span>]); <span class="comment">% scale font on axes</span> fontsize = 16; <span class="comment">% dimensions</span> xmin = min(n(:,1)); xmax = max(n(:,1)); ymin = min(n(:,2)); ymax = max(n(:,2)); <span class="comment">% set large range</span> zmin = -1.0e+9; zmax = 1.0e+9; <span class="comment">% velocity scale factor</span> scalefactorvelocity = 1; <span class="comment">% read in data</span> name = [propertyname <span class="string">'.txt'</span>]; file = [propertyname]; u = load(name); <span class="comment">% generate figure</span> fig = figure(); ax = axes(<span class="string">'Parent'</span>,fig); box on; <span class="comment">% check if velocity is plotted</span> <span class="keyword">if</span> ( strfind(propertyname,<span class="string">'velocity'</span>) ) quiver( n(:,1), n(:,2), u(:,1), u(:,2), scalefactorvelocity ) <span class="keyword">else</span> <span class="keyword">if</span> ( strfind(log,<span class="string">'n'</span>) ) trisurf( e, n(:,1), n(:,2), u, <span class="string">'Facecolor'</span>, <span class="string">'interp'</span>, <span class="string">'EdgeColor'</span>, <span class="string">'interp'</span> ) <span class="keyword">elseif</span> ( strfind(log,<span class="string">'N'</span>) ) trisurf( e, n(:,1), n(:,2), u, <span class="string">'Facecolor'</span>, <span class="string">'interp'</span>, <span class="string">'EdgeColor'</span>, <span class="string">'interp'</span> ) <span class="keyword">elseif</span> ( strfind(log,<span class="string">'y'</span>) ) trisurf( e, n(:,1), n(:,2), log10(u), <span class="string">'Facecolor'</span>, <span class="string">'interp'</span>, <span class="string">'EdgeColor'</span>, <span class="string">'interp'</span> ) <span class="keyword">elseif</span> ( strfind(log,<span class="string">'Y'</span>) ) trisurf( e, n(:,1), n(:,2), log10(u), <span class="string">'Facecolor'</span>, <span class="string">'interp'</span>, <span class="string">'EdgeColor'</span>, <span class="string">'interp'</span> ) <span class="keyword">end</span> <span class="keyword">end</span> <span class="comment">% axes range</span> axis equal; axis([xmin xmax ymin ymax zmin zmax]); <span class="comment">% top view</span> view(2); <span class="comment">% set colorbar</span> <span class="keyword">if</span> ( size(strfind(propertyname,<span class="string">'velocity'</span>)) == 0 ) co = colorbar; col = ylabel(co,label); <span class="keyword">end</span> <span class="comment">% set lables</span> xl = xlabel(<span class="string">'Distance [m]'</span>); yl = ylabel(<span class="string">'Distance [m]'</span>); <span class="comment">% change fonts on axes and labels</span> set(ax,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontSize'</span>,fontsize); set(xl,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontSize'</span>,fontsize+2); set(yl,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontSize'</span>,fontsize+2); <span class="keyword">if</span> ( size(strfind(propertyname,<span class="string">'velocity'</span>)) == 0 ) set(co,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontSize'</span>,fontsize-2); set(col,<span class="string">'FontName'</span>,<span class="string">'Arial'</span>,<span class="string">'FontSize'</span>,fontsize-2); <span class="keyword">end</span> <span class="comment">% print to JPG file</span> print( <span class="string">'-r200'</span>, <span class="string">'-djpeg'</span>, file ); <span class="comment">%print( '-r100', '-depsc', file ); </span> close all; </pre> </body> </html>
Please add a live example to this howto.
gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
Done! :-)
CHGeditor… I want to inform that you do not need to use:
to hide the HTML code, just use:
have a try… btw, you have nice method too in making syntax highlight!
I just posted one possible solution, which is not the most succinct :-) I've added your remark to the how-to.
oww…. it's okay for me… and you already know about comment syntax to hide HTML before I told you, right?
anyway, why I prefer to use comment syntax is because the comment syntax is shorter than hiding it via div… just that's all… sweet!
I would put the mathlab code as 1st block: easier to understand for our dummies here!
gerdami - Visit Handbook en Français - Rate this howto:import-simple-excel-tables-into-wikidot up!
Thanks for a great article
matlabi