We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
  • 2
[ ! ] Code Synthax
Topic Started: Jan 14 2015, 12:19 AM (1,173 Views)
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Test board
Zeta


Can anybody create or direct me to a code that will correctly add Synthax to the [code] BBcode?
Like how you can do it with [html] but I want this for JQuery, Javascript, CSS, Lua, C+, C++, Python, Java, MySQL, and PHP
If it helps any here are sources for code Synthax.
http://prismjs.com/
https://highlightjs.org/
https://code.google.com/p/google-code-prettify/
Edited by Kankuro, Jan 14 2015, 11:18 PM.
Offline Profile Goto Top
 
Replies:
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Still only CSS and PHP.
And PHP goes outside of the color box. (can you remove the white background so it's transparent or matches my theme's colors and stuff?

Error: http://prntscr.com/62stu8
http://prntscr.com/630vbf
Edited by Kankuro, Feb 9 2015, 12:29 PM.
Offline Profile Goto Top
 
RedBldSandman
Member Avatar
Asante sana Squash banana
[ *  *  *  * ]
The code already adds in the <pre> tags (hence the change in background which can be fixed via simple css changes) and that wasn't the main issue in any case. The text going out of the code box can also be fixed easily with CSS. I'd need to see your test board to do any further tests as it's working absolutely perfectly in all use cases on my test forum and I need to see why it is only working on the CSS and PHP codes you test.

EDIT: I forgot to mention that this code will screw up any the display of codes which themselves contain <br/> tags in any form. There are easy alternatives which work fine (tested) and don't have this problem but I need to work out why the code won't work on other languages you test.

EDIT 2: Just saw that the code I gave you isn't the current one on my test board and doesn't add in the the <pre> tags xD I need a link to your test board anyways to work out the what's causing the issues as that version still works fine on my test board. The white background is probably caused by the prism css theme being used and can still be changed very easily.
Edited by RedBldSandman, Feb 9 2015, 07:16 PM.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
RedBldSandman
Feb 9 2015, 06:03 PM
The code already adds in the <pre> tags (hence the change in background which can be fixed via simple css changes) and that wasn't the main issue in any case. The text going out of the code box can also be fixed easily with CSS. I'd need to see your test board to do any further tests as it's working absolutely perfectly in all use cases on my test forum and I need to see why it is only working on the CSS and PHP codes you test.

EDIT: I forgot to mention that this code will screw up any the display of codes which themselves contain <br/> tags in any form. There are easy alternatives which work fine (tested) and don't have this problem but I need to work out why the code won't work on other languages you test.

EDIT 2: Just saw that the code I gave you isn't the current one on my test board and doesn't add in the the <pre> tags xD I need a link to your test board anyways to work out the what's causing the issues as that version still works fine on my test board. The white background is probably caused by the prism css theme being used and can still be changed very easily.
It's not on my test board.

And if it's going to mess up other codes I have then I'm not going to use it. I'm not going to render multiple codes useless just to make this one work. I'm sure there is a way around that issue. Until it's found or created I'm not using it.
http://w11.zetaboards.com/GamesAndAnime/topic/10965153/
Edited by Kankuro, Feb 9 2015, 07:33 PM.
Offline Profile Goto Top
 
RedBldSandman
Member Avatar
Asante sana Squash banana
[ *  *  *  * ]
There were issues with the structure of the other code so try this instead for the Below the Board part of the code:
Code:
 
<script type="text/javascript">
(function() {
var langs = [
[/css/i, 'css'],
[/javascript/i, 'javascript'],
[/php/i, 'php'],
[/sql/i, 'sql'],
[/c\+\+/i, 'c++'],
[/c#/i, 'c#'],
[/python/i, 'python'],
[/java/i, 'java']
], j = langs.length;
$('blockquote dt').each(function() {
var $t = $(this), te = $t.text();
for (var k = 0; k < j; k++) {
if (langs[k][0].test(te)) {
$t.closest('blockquote').find('code').addClass('language-' + langs[k][1]).wrap('<pre></pre>').find('br').replaceWith('\n');
return;
}
}
});
})();
</script>
Don't worry about the look of it, I can recommend CSS changes once I'm sure the code is working. This version also deals with the issue of <br> text in codes.

Your board is bloated full of codes (I mean loading a page makes 16 ajax requests to other pages(!) some of which are duplicates...) but this shouldn't interfere with other codes from the way I've structured it.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
I've added it, seems to work. I don't like how the text looks REALLY odd though. It's like it has a white shadow effect.
Offline Profile Goto Top
 
RedBldSandman
Member Avatar
Asante sana Squash banana
[ *  *  *  * ]
Change the Javascripts bit to just:
Code:
 
<script type="text/javascript" src="http://z3.ifrm.com/63/1/0/p509772/prism.js"></script>
Then for the Gamesandanime v3 theme add this to the end of your Theme Appearance:
Code:
 
/* http://prismjs.com/download.html?themes=prism-twilight&languages=markup+css+clike+javascript+php+php-extras+c+cpp+python+sql+csharp */
/**
* prism.js Twilight theme
* Based (more or less) on the Twilight theme originally of Textmate fame.
* @author Remy Bach
*/

code[class*="language-"], pre[class*="language-"] {
-moz-hyphens: none;
-moz-tab-size: 4;
color: white;
direction: ltr;
font-family: Consolas,Monaco,"Andale Mono",monospace;
line-height: 1.5;
text-align: left;
text-shadow: 0px -0.1em 0.2em black;
white-space: pre;
word-break: normal;
word-spacing: normal;
}

pre[class*="language-"] {
margin: 0px;
overflow: auto;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] *::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] *::-moz-selection {
background: none repeat scroll 0px 0px rgba(237, 237, 237, 0.15);
text-shadow: none;
}

:not(pre) > code[class*="language-"] {
border-radius: 0.3em;
border: 0.13em solid #545454;
box-shadow: 1px 1px 0.3em -0.1em #000000 inset;
padding: 0.15em 0.2em 0.05em;
}

.token.comment, .token.prolog, .token.doctype, .token.cdata {
color: #777777;
}

.token.punctuation {
opacity: 0.7;
}

.namespace {
opacity: 0.7;
}

.token.tag, .token.boolean, .token.number, .token.deleted {
color: #ce6849;
}

.token.keyword, .token.property, .token.selector, .token.constant, .token.symbol, .token.builtin {
color: #f9ed99;
}

.token.attr-name, .token.attr-value, .token.string, .token.char, .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string, .token.variable, .token.inserted {
color: #909e6a;
}

.token.atrule {
color: #7385a5;
}

.token.regex, .token.important {
color: #e8c062;
}

.token.important, .token.bold {
font-weight: bold;
}

.token.italic {
font-style: italic;
}

.token.entity {
cursor: help;
}
For your mobile theme add this to the end of your Theme Appearance:
Code:
 
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+css-extras+clike+javascript+java+php+php-extras+c+cpp+python+sql+csharp */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/

code[class*="language-"], pre[class*="language-"] {
-moz-hyphens: none;
-moz-tab-size: 4;
color: black;
direction: ltr;
font-family: Consolas,Monaco,"Andale Mono",monospace;
line-height: 1.5;
text-align: left;
text-shadow: 0 1px white;
white-space: pre;
word-break: normal;
word-spacing: normal;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] *::-moz-selection, code[class*="language-"]::-moz-selection, code[class*="language-"] *::-moz-selection {
background: none repeat scroll 0 0 #b3d4fc;
text-shadow: none;
}
@media print {
code[class*="language-"], pre[class*="language-"] {
text-shadow: none;
}
}
pre[class*="language-"] {
margin: 0;
}
.token.comment, .token.prolog, .token.doctype, .token.cdata {
color: slategray;
}
.token.punctuation {
color: #999999;
}
.namespace {
opacity: 0.7;
}
.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {
color: #990055;
}
.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
color: #669900;
}
.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
color: #a67f59;
}
.token.atrule, .token.attr-value, .token.keyword {
color: #0077aa;
}
.token.function {
color: #dd4a68;
}
.token.regex, .token.important, .token.variable {
color: #ee9900;
}
.token.important, .token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

Edit: Also change your Select All code to:
Code:
 
<script type="text/javascript">
// <![CDATA[
// Add 'select all' to codes
(function () {
function select(element) {
if (document.selection) {
document.selection.empty();

var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();

var range = document.createRange();
range.selectNode(element);
window.getSelection().addRange(range);
}
}

if (document.selection || window.getSelection) {
$('td.c_post blockquote:has(code) dl dt').each(function () {
var selectButton = $('<a href="javascript:void(0)">Select All</a>');

selectButton.click(function () {
select($(this).closest('blockquote').find('code').get(0));
});

$(this).append(selectButton);
});
}
}());
// ]]>
</script>
Edited by RedBldSandman, Feb 9 2015, 11:28 PM.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Isn't there supposed to be some blues and purples and stuff in some languages?

EDIT: Also the select all code seems to have broken...
Edited by Kankuro, Feb 10 2015, 01:10 AM.
Offline Profile Goto Top
 
RedBldSandman
Member Avatar
Asante sana Squash banana
[ *  *  *  * ]
It's using a different theme which is designed for a dark background, other themes are available on the the prism site which you can preview using the big cirlces on the right. The default theme will not look good with a dark background as the default colour is black hence why I gave you a different theme.

If you're going to host the select all code in a file then take out the <script> tags...
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
But why aren't some things colored? Like addclass, parents, find, etc.

They are on this site: http://prntscr.com/63egag

EDIT: Also, can this be added? http://prismjs.com/plugins/line-numbers/
Edited by Kankuro, Feb 10 2015, 11:28 AM.
Offline Profile Goto Top
 
RedBldSandman
Member Avatar
Asante sana Squash banana
[ *  *  *  * ]
That theme doesn't seem to highlight functions. Just choose whichever theme you prefer and I'll get the css for that done and add in the line numbers code/css.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
RedBldSandman
Feb 10 2015, 04:52 PM
That theme doesn't seem to highlight functions. Just choose whichever theme you prefer and I'll get the css for that done and add in the line numbers code/css.
Default or Coy, both may have issues working on a dark theme like the one I use, could you fix that? If so I like Default the best.
Offline Profile Goto Top
 
Roby
Member Avatar
#27

This request has gone a lengthy period of time without any new activity, therefore it is being marked as expired. This means that the request was typically too time-consuming or irritating for coders (who provide this service voluntarily in their free time) to complete.

Thank you.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 2