I really love the function on the github's code box, especially the 'embed' and 'raw' function.I am curious about how to implement a code box like that.(Not the code highlight,just the 'embed' and 'raw' function)
example
Have you every seen any plugins or some other thing can make that?
Thank you.
Here is how they do it: they have the raw file on their server, so when you click raw, it just executes the following script
window.open('whateverrawcode.rb');
For the 'embed' functionality, what they do is they have the code again, and on the server, they convert the code to html with classes added for syntax highlighting. In the script that they give you, the just document.write out the link to the stylesheet and then document.write out the HTML. I have taken a look at the script for the ruby code, here it is:
document.write('<link rel="stylesheet" href="https://gist.github.com/stylesheets/gist/embed.css"/>')
document.write('<div id=\"gist-984320\" class=\"gist\">\n \n \n \n \n \n\n <div class=\"gist-file\">\n <div class=\"gist-data gist-syntax\">\n \n \n \n <div class=\"gist-highlight\"><pre><div class=\'line\' id=\'LC1\'><span class=\"nb\">require<\/span> <span class=\"no\">File<\/span><span class=\"o\">.<\/span><span class=\"n\">expand_path<\/span><span class=\"p\">(<\/span><span class=\"s1\">'../config/application'<\/span><span class=\"p\">,<\/span> <span class=\"bp\">__FILE__<\/span><span class=\"p\">)<\/span><\/div><div class=\'line\' id=\'LC2\'><span class=\"nb\">require<\/span> <span class=\"s1\">'rake'<\/span><\/div><div class=\'line\' id=\'LC3\'> and more HTML')
I deleted a lot of the HTML to shorten the code, but that's the idea.
Related
MyCode (a line in a gsp of grails)
<h3><g:message code="view.hello"/><span style="color:orange"><g:message code="view.world"/></span><h3></h3>
Output
HelloWorld(in orange World)
But dont like how i put this line of my code. I wish do something like this.
the code i want
messages.properties (put inside string+html)
view.helloword= hello>span style="color:orange">World>/span>
But output is:
hello>span style="color:orange">World>/span>
Dont look html code. how i can resolve?
Can be done as below:
//messages.properties
view.helloworld=Hello <span style="color:orange">World</span>
//gsp
<h3><g:message code="view.helloworld"/></h3>
You can add any html to messages and render message in view quite easy. Answer below works in grails 3.0.1
${raw(message(code:"view.hello"))}
You can use same approach for any html-like string.
This is being used in a Bootstrap Popover.
The live page under development can be viewed here
This is got to be simple but I can't find it anywhere. Within data-content attribute I want to force a paragraph or line break between "Date Assessed: 10-Nov-13 and Results: CR= ...
Using a BR or P tag doesn't work it shows the literal tag. In Javascript to force a line break you use \n how do you do the same in HTML within a quoted string?
<td class="setWidth concat"><div class="boldTitle"><a href="#"
class="tip" rel="popover" data-trigger="hover"
data-placement="top"
data-content="Date Assessed: 10-Nov-13 <br />
Results: Cr = 2.2 mg/dl"
data-original-title="Out of Range">
<span style="color:red"
class="glyphicon glyphicon-warning-sign"></span> Cr = 2.2 mg/dL</a></div></td>
See last update: Bootstrap gives you ability to specify that the content is HTML instead of text.
It depends entirely on bootstrap's implementation of the popover effect. If they are using $('.popover').html($(this).data('content')) then it should "just work". If they are using $('.popover').text($(this).data('content')) or otherwise escaping the results of the data-attribute first, then it probably won't.
If bootstrap's implementation isn't working the way you want it to work, you might be served better by writing your own javascript to handle the effect you're looking for.
See this fiddle for an example of a line break from a data-attribute working correctly:
http://jsfiddle.net/g32tw/1/
Update: I've updated the fiddle with a second link that produces the error you're experiencing, which is likely how bootstrap's implementation works.
UPDATE: just looked at bootstrap's documentation. Have you tried adding "data-html" = "true" to the element?
Source: http://getbootstrap.com/javascript/#popovers-usage
Watch out with this - if the content is end-user-supplied using the html option might subject you to XSS attack vulnerabilities. If you trust the data it's fine. See https://www.acunetix.com/websitesecurity/cross-site-scripting/ for information about cross-site scripting.
I am not sure that you can. You could try to have two data items:
data-assessdate="Date Assessed: 10-Nov-13"
data-results="Cr = 2.2 mg/dl"
and reassemble afterward with Javascript before displaying:
var summary = this.dataset;
var newhtml=summary.assessdate . "<br />" . summary.results;
and then write newhtml to the DOM where ever you want.
I use codecolorer wp plugin to show raw html codes. But my problem is that I can not customize the codes inside. For example, I would like to make some words in bold. Also, i can not colour the codes exactly as I would like (each code individually).
Do someone know how to customize choosen codes within the raw table or tell me another wp plugin which let us customize each codes?
I could do it by myself without any plugin, just to change ">" and "<" with html names but i have a code which includes both types <, > and " of codes:
<span class='post-comment-link'>
<b:if cond='data:post.hasJumpLink'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> |
</b:if>
...
What Stackoverflow uses here for the raw html codes (codes between apostrophes) would be the best solution but I did not find on internet.
Ok, i got the answer ! It is a bit complicated but essential :
You must go to Visual text editor
Paste the code as it is
Change to HTML editor (Text editor)
The > and < are changed to > and < and the " is changed to " automatically.
Beeing already in HTML editor (Text editor), we can add codes for customize, for example to make the line bold, we add the <b></b> codes normally : <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
Take care NOT to swith back to Visual editor or you can start everything from the beginning !
I'm trying to implement a markup system in my Rails application using the bb-ruby gem. Currently I'm working on something similar to how Stackoverflow handles it's code markdown and I ran into some difficulty.
Essentially I want the user-entered text:
[code]<h1>Headline</h1>[/code]
To spit out the code in plain-text, perhaps in a pre and code tag block. Passing that string of text to my code parser will wrap the code in a pre and code block but the HTML also gets rendered. I pass the string to my code parser like so:
sanitize(text.bbcode_to_html(formats, false).html_safe)
Of course, if I remove the .html_safe helper from the call my view will spit out:
<pre><code><br /> <h1>Hello World</h1><br /> </code></pre>
Obviously that's not the desired result. So my question is, how can I accomplish plain-text code only within the pre + code tags while maintaining the html_safe helper method?
I know this is an old question but you can try using the strip_tags after the bbcode_to_html one.
First a bit of background information. I create HTML emails at my work place and the whole process is very tedious. It goes a little little like this...
Code markup for HTML using tables and some CSS
Parse HTML and CSS using Premailer so all CSS is inline
Test HTML works in all email clients
Create a copy of the inline version of HTML and start adding in proprietary variables to email tool used for sending emails, ie <%=constant.first_name%>, <%=unsubscribe_link%>
Test in email client to see if it works and client is happy. If not repeat steps 1 through 5 again.
So as you can see it gets really tedious after a while.
What I would like to do is create a command line script similar to Premailer which allows me to parse a HTML file with variables stored in it without destroying the example text already in the HTML. That way when you are previewing the HTML it all looks dandy.
For example...
Store the first name function as a variable for own use.
$first_name = "<%=constant.first_name%>
Then tell the parser what word(s) to replace with the appropriate variable.
<p>My name is <!-- $first_name -->Gavin<!-- /$first_name --></p>
So that the final output looks something like:
<p>My name is <%=constat.first_name%></p>
Would such a thing be possible? Is there a better syntax I could, a custom tag like <first_name>Gavin</first_name>, if the browser can handle it.
Any advice is helpful. :)
I've seen this done before using a syntax like:
{assign_variable:first_name="Jesse"}
Then, you could use it like:
{first_name}
The way you'd parse this (provided you're using PHP) would be something like:
<?php
// Our Template Code
$strHTML = <<<EOT
{assign_variable:first_name="Jesse"}
{assign_variable:last_name="Bunch"}
Hello, {first_name}!
EOT;
// Get all the variables
$arrMatches = array();
preg_match_all('/\{assign\_variable\:([a-zA-Z\_\-]*)\=\"([a-zA-Z0-9]+)\"\}/', $strHTML, $arrMatches);
// Remove the assign_variable tags
$strHTML = preg_replace('/\{assign\_variable\:([a-zA-Z\_\-]*)\=\"([a-zA-Z0-9]+)\"\}/', '', $strHTML);
// Combine them into key/values
$arrVariables = array_combine($arrMatches[1], $arrMatches[2]);
foreach($arrVariables as $key=>$value) {
// Replace the variable occurrences
$strHTML = str_replace('{' . $key . '}', $value, $strHTML);
}
// Send the parsed template
echo $strHTML;
Which outputs:
Hello, Jesse!
Note, this is a very basic example. Here are some improvements to make on this code before using it in production:
Edit the regex to allow the right characters.
Maybe implement a better replacement method than a loop
Check for parse errors
Benchmark performance
All in all, I think you get the idea. Hope this points you in the right direction.
I have a similar situation
I have created a "format template" like this:
<?php // section1 $var1/$var2 ?>
<head>
<title>$var1</title>
<meta name="description" content="$var2">
</head>
<?php // section2 $var1/$var2 ?>
<body>
hello: <p>$var1</p>
news for you: <p>$var2</p>
</body>
it is valid php code and valid html code, so you can edit it with dreamwaver or similar, and you can host it also.
then a php script replaces all ocurrences of vars in all sections.