[SOLVED]: source code snippet

130 Posts

sbRyGuy Reply #1, 16 years, 10 months ago

Does anyone know of a snippet for formatting code into HTML?

~~So if I wanted to display a chunk of PHP or HTML to the end user and put it in a cool little formatted box so they can select it. Is there one out there? If not, there soon will be~~

~~Oh my how I missed this I’ll never know. You can just set the widget of a template variable to HTML entities and that takes care of everything.~~

Ok so although that returns the HTML characters for what I have in my template variable, it’s still not formatted right.

Is it possible to call in a chunk as a snippet parameter and retain line breaks? then just cycle through the chunk and at every line break and a number? or put the whole thing into an ordered list?

I’m looking to accomplish something like what bbcode does but on my own site.

I twitch because I care....and drink too much coffee.

130 Posts

sbRyGuy Reply #2, 16 years, 10 months ago

Ok so after some further research on the getChunk method and some tinkering here’s where I’m at:

see below....

Now that is far from where I thought I’d get. The next thing would be formatting....I think though my best bet for now would be to just copy it into DW have that format it then throw it into my chunk...

Anyone have any ideas? ~~Is this something HTML Tidy can handle?~~ I know there are programs out there and massive plugins but how does BB use it?

There’s a ton of sites out there to plug code in but I have yet to find an API to handle this. Will keep looking.

I twitch because I care....and drink too much coffee.

2,877 Posts

mrhaw Reply #3, 16 years, 10 months ago

2 useful links:
http://rahul.rahul.net/modx-hints/fixedpre-tag.html
http://alexgorbatchev.com/wiki/SyntaxHighlighter

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower

130 Posts

sbRyGuy Reply #4, 16 years, 10 months ago

THANK YOUR MRHAW!!!

Syntaxhighlighter was exactly what I was looking for. Just in testing so far I can see this will work great. Again for anyone who cares the link to that awesome functionality is:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Here’s my chunk call (using the hosted files for now) This goes in the HEAD of your template:
tplSyntaxHighlighter

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

A note about the above, you don’t need ALL those js files unless you need to show code from all those different languages. It may help on load-time to thin them out a little. Working on a dynamic way to load the right js file and only the one.

And my snippet call:
HTMLthis

[!HTMLthis? &source=`sourceHTML` &type=`1` !]

Snippet code:

<?php
/**********************************
HTMLthis
**********************************
Built upon SyntaxHighlighter  
by Alex Gorbatchev
(SyntaxHighlighter is a fully functional self-contained 
code syntax highlighter developed in JavaScript.)
http://alexgorbatchev.com/wiki/SyntaxHighlighter
==========================
Takes two parameters &source and &type

Example Call:

[!HTMLthis &source=`rawCodeTpl` &type=`1` !]
rawCodeTpl is the name of the chunk containing the code
to be displayed.
&type is the type of code being displayed.

1 = html
2 = php
3 = css

-------------------------------------------
*/
global $modx;
$chunk_str = $modx->getChunk($source);
switch ($type) {
    case 0:
        echo "i equals 0";
        break;
    case 1:
        $ext =  'html';
        break;
    case 2:
        $ext =  'php';
        break;
}
$output_code = '<pre class="brush: '.$ext.'">'."\n";
$output_code .= $chunk_str;
$output_code .=  '</pre>'."\n";
echo $output_code;
?>

Just call the snippet anywhere I need to and pass along whatever chunk I wish to display! Phew....dodged a bullet on that one again thank you mrhaw. grin

I modified the code to clean up the snippet a bit. Also introduced another snippet parameter: &type. This will easily allow you to call multiple different types of code to display and render it properly. Currently I only have html, php, and css defined but you can easily modify the CASE statement to use others.

I twitch because I care....and drink too much coffee.

130 Posts

sbRyGuy Reply #5, 16 years, 10 months ago

I think moving forward with the SyntaxHighlighter method; I’d like to see how to determine which js files to load.

So if I’m calling a chunk in the HEAD of my document called shJS...

Using my snippet and the &type parameter, I can modify that chunk to include the link to the js that corresponds with the type? Does that make sense?

Having a &type=`1` I’d format it for HTML and only load the HTML js file.

I guess the chunk would only be modified once when the page is called??? Or the snippet would parse, modify and save the chunk each time on a view? That seems like an issue.

Maybe a solution to this would be to layout a series of check boxes as template variables so while in the template, if you show a code block you can check which format you’d need to display???

Criticisms, thoughts, suggestions, anything much welcomed

I twitch because I care....and drink too much coffee.

2,877 Posts

mrhaw Reply #6, 16 years, 10 months ago

You could use
$modx->regClientStartupScript()

See my webReader Plugin:

$modx->regClientStartupScript('http://wr.readspeaker.com/webreader/webreader.js.php?cid='. $cid);

http://4up2date.info/webreader

@hawproductions | http://mrhaw.com/

Infograph: MODX Advanced Install in 7 steps:
http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower