I am using Jekyll and trying to display some code in a post, but I can't figure out why the code wont display on different lines. From what I understand it's supposed to word wrap with the way I have it set up.
I have this in my config file:
markdown: kramdown
highlighter: rouge
kramdown:
input: GFM
My code is:
{% highlight javascript linenos %}
var text = prompt("Write your text.");
alert("You have written " + text.length + " characters, you have " + (140 - text.length) + " characters remaining.");
{% endhighlight %}
It displays like:
Also on mobile it just removes all of the styling and displays like a regular <code> tag.
You can view the page here: https://alignthem.com/07/03/2022/javascript-length-and-concatenate/
Adding:
white-space: pre-wrap;
to .highlight pre worked
Related
So, it's my first time using Orchard and liquid so bare with me on this one! I've not much experience in either really, but I'm getting to grips with it (slowly), except this one has me scratching my head.
I'm trying to loop through a gallery, and include the alt text (using Orchards .MediaTexts) for each image within the for loop with no success.
I've tried assigning the alt text inside the loop with no joy, like...
{% assign altText = Model.ContentItem.Content.Blog.Carousel.MediaTexts %}
SO was wondering where I am going wrong. Is there a way in liquid to do a "For A in Y AND for B in Z"? unsure...
Any help greatly appreciated.
Here is my code...
{% assign carousel = Model.ContentItem.Content.Blog.Carousel %}
{% for image in carousel.Paths %}
<div class="thumbnail">
<a href="/media/{{image}}" data-caption="{{ WOULD LIKE THE ALT TEXT HERE }}" data-fancybox="main-gallery">
{{ image | asset_url | img_tag: alt: WOULD LIKE THE ALT TEXT HERE }}
</a>
</div>
{% endfor %}
I'm working on my first TYPO3 project and I'm done with the template, I just can't figure out how to make this work:
My page content is one column with header, text and title in every field.
I don't have any problems showing header and text on my website, but the image just won't work.
My image-path is fileadmin/user_upload/ and I can show it by setting the filename in my code, but thats obviously not what I want.
This is my Content Object Array, the code for the image is one of the versions I found when searching, but none of them worked:
page.20 = CONTENT
page.20.table = tt_content
page.20.wrap = <div id="content">|</div>
page.20.renderObj = COA
page.20.renderObj.wrap = <div id="news">|</div>
page.20.renderObj {
10 = TEXT
10.stdWrap.field = header
10.stdWrap.wrap = <div id="newstitle"><span>|</span></div>
20 = IMAGE
20.stdWrap.field = image
20.stdWrap.wrap = <div id="newsimage><img src="fileadmin/user_upload/|"</img></div>
30 = TEXT
30.stdWrap.field = bodytext
30.stdWrap.wrap = <div id="newstext"><p>|</p></div>
}
Hope someone could help me out, so I can finally finish this project!
Maybe I don't understood correctly, but... you don't need to write it yourself, just in your main TS template include CSS Styled Content from extension, so you can render whole column like:
page.20 < styles.content.get
If you need to change some wrappings (i.e.: to add your news CSS classes) you can also override them in setup field.
edit: Go to Templates > Template analyzer and check the EXT:css_styled_content/static/ code to find declaration you'd like to change (prepare for looong reading ;)) when you finally find it, just you can overwrite it in your TS, ie: to wrap text section of Text w/ image CE you can use:
tt_content.textpic.20.text.wrap = <div class="myNewsClass"> | </div>
Finally I'd suggest not to replace original classes but add your own so the above sample would be like:
tt_content.textpic.20.text.wrap = <div class="csc-textpic-text myNewsClass"> | </div>
de facto all these classes csc- has some CSS default styling therefore you can choose to align the image to the left or right (etc) out of the box. If you'll remove it you'll need to handle these things yourself.
The excellent dropdown jQuery UI Multiselect widget that supports styling via jQuery UI Themeroller still doesn't have support for including images within the drop down rows.
I didn't see any answers to this problem within Stackoverflow yet it seems to be asked regularly in various areas of the internet, so I am giving the answer to this question below..
(ALSO See my FIDDLE Example to see this in action,)
The following is based on an initial idea by 'pdlove' for introducing the use of images within this excellent UI Multiselect for jQuery.
Adding Image support for line items in check box text area is achieved by setting out the selector option rows html like this:
<option value="somevalue" image="yourimage.jpg" class="multSelktrImg">
normal visible text
</option>
I would also add a class control to your style sheet css file to set the image size being rendered in the option line items of the drop down, along with a couple of position settings for the image, label and span text.
In this example I use the class name 'multSelktrImg', so within the css file it would look something like this:
.multSelktrImg span{position: relative;top: 10px;vertical-align: middle;
display: inline-flex;}
.multSelktrImg input {vertical-align: -2px;}
.multSelktrImg img {position: relative;height: 30px;margin: 2px 6px;top: -10px;}
Now for the change in the src/jquery.multiselect.js file
Search for the following matching code around line 130 (depending on what version id of the script you are using):
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
title = this.innerHTML,
description = this.title,
....
ADD the following line above "title = this.innerHTML,":
image = this.getAttribute("image");
so that it looks like this:
// build items
el.find('option').each(function( i ){
var $this = $(this),
parent = this.parentNode,
image = this.getAttribute("image");
title = this.innerHTML,
description = this.title,
Now Search for the following matching code around line 180:
// add the title and close everything off
html += ' /><span>' + title + '</span></label></li>';
....
Replace the code line with the following to allow for rendering of your images:
// add the title and close everything off
html += ' /><span>';
if (image != null) {
html += '<img src="'+image+'" class="multSelktrImg">';
}
html += title + '</span></label></li>';
save the new version of the script src/jquery.multiselect.js file and now the images will appear in the multiselect drop down. Use the 'multSelktrImg' class value to control the size of the image displayed by altering the pixel size for the class in your css file.
In the FIDDLE version, I have altered the minimized version of the jQuery script, and created an initialisation of the Select object.
I have a project where I am retrieving external XML (rss 2.0 feed) using $.ajax...
I have one particular node that contains a chunkk of HTML content which includes IFRAME content and I want to REMOVE that IFRAME before it is ever inserted in the DOM. I thought about doing .replace() but the iframe tag is unknown and ever-changing...
Im retrieving this node as follows:
var articleContent = "<div id='content_" + listcount + "' class='arrContent'>" + $(this).find("content\\:encoded, encoded").text() + "</div>";
and then later I just .append() that variable 'articleContent' to a div on my page.
What Im trying to do is PRIOR to the .append() I want to remove ALL the IFRAME tag completely.
I tried doing
$(articleContent).not('iframe');
and
$(articleContent + ' iframe').remove();
but neither works... how can I 'clean' all the references OR SKIP over that before bringing the HTMl content in?
Try this :
$(articleContent).not('iframe').appendTo("body");
Example :
http://jsbin.com/ocOkIfA/8/edit
HOWEVER :
If the iframe was inside the div ( I don't know your code ) -
var articleContent = "<div id='content' >sssss<iframe></iframe><p></p><iframe></iframe></div> ";
You could use this (find):
$(articleContent).find('iframe').remove().end().appendTo("body");
http://jsbin.com/ocOkIfA/11/edit
Our site is using tags like <# TAGNAME #> but CKEditor converts < and > to < and > which breaks these tags for use in our software.
I've discovered this option: config.protectedSource.push( /<#[\s\S]*##>/g ); which seems to stop the conversion if the data is saved from Source mode, but in WYSIWYG mode I can't find a way to stop the conversion. I've tried many options in their API but none of them seem to have helped, how can I fix this problem?
Were were looking at using CKEDitor to edit Smarty templates. The problem we were hitting was that it was replacing all the angle brackets and ampersands within the curly brackets, which messed everything up. This came up in a Google search so our solution should help anyone with similar issues.
CKEditor rebuilds the HTML every time you switch to Source mode and when you save, so you need to add to the HTML http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor htmlFilter.
This worked for us:
//replace Form_content with whatever your editor's id is.
htmlParser = CKEDITOR.instances.Form_content.dataProcessor.htmlFilter;
//We don't want HTML encoding on smarty tags
//so we need to change things in curly brackets
htmlParser.onText = function(text) {
//find all bits in curly brackets
var matches = text.match(/\{([^}]+)\}/g);
//go through each match and replace the encoded characters
if (matches!=null) {
for (match in matches) {
var replacedString=matches[match];
replacedString = matches[match].replace(/>/g,'>');
replacedString = replacedString.replace(/</g,'<');
replacedString = replacedString.replace(/&/g,'&');
text = text.replace(matches[match],replacedString);
}
}
return text;
}
The onText function processes all the bits that aren't in tags or comments.
I'd imagine you can do something similar by altering the code above - I've left it as is as I think our problems and required solutions are very similar.
editor.on( 'mode', function(ev) {
if ( ev.editor.mode == 'source' ) {
var str=ev.editor.getData();
str=str.replace(/&/g, "&").replace(/>/g, ">").replace(/</g, "<").replace(/"/g, "\"");
ev.editor.textarea.setValue(str);
}
});
http://cksource.com/forums/viewtopic.php?f=11&t=20647&start=10
If you type < or > in any WYSIWYG editor, they will be converted to their HTML entities in source mode.