I am trying to highlight lines in an FsReveal presentation. I want to show all the lines then in the next step highlight line 3. I know this is possible in Reveal.js but I am not sure how to use it from FsReveal. Here is what I tried:
***
- data-line-number : 1-3|3
### Chicken
```
let x = 10
let y = ["a"; "b"; "c"]
let monkey = 100.0
```
***
Instead of showing all the lines and then highlighting the third line on the next right-arrow, it just shows all the lines as normal and moves on.
I don't really have a working answer, but I have two thoughts that could help.
First, the data-line-numbers attribute needs to be set on the <code> element of your snippet. The way you are setting it, it will be copied to the <section> element. This is unfortunate, because the <code> element is generated from Markdown formatting, so you cannot directly set this. You can still have HTML elements in your markdown document, so you could try if this works:
<pre><code class="nohighlight" data-line-numbers="3,8-10">
<table>
<tr>
<td>Apples</td>
<td>$1</td>
<td>7</td>
</tr>
<tr>
<td>Oranges</td>
<td>$2</td>
<td>18</td>
</tr>
</table>
</code></pre>
This did not actually work for me, sadly, despite generating what looks like correct HTML. I suspect this is because FsReval uses an older version of reveal.js. There should be a way to update that.
If you got this to work, you could try setting the attribute on the generated <code> using JavaScript, right after your HTML element:
```
let x = 10
let y = ["a"; "b"; "c"]
let monkey = 100.0
```
<script>
var els = document.getElementsByTagName("code");
els[els.length-1].setAttribute("data-line-numbers","3,8-10");
</script>
Related
I am working on a page, where customers can write own descriptions for articles they sell. They can use html tags for this.
The code in the view looks like this:
#Html.Raw("<p class='description short'>" + shopItem.ShortDescription + "</p>")
The problem is, that this is splitted into two p-tags:
<p class="description short"></p>
and below that the content of shopItem.ShortDescription:
<p><em><strong>Title</strong></em></p>
I also tried
<p class="description short">#Html.Raw(shopItem.ShortDescription)</p>
but that leads to the same behavior.
I´m sure I´m missing or not seeing something. So, what is wrong with that code snippet?
I believe the issue here is that you cannot nest p elements. If you try it with just html it still will not work, but for example this works fine
#{
var shopItem = "<em><strong>Title</strong></em>";
}
#Html.Raw("<p class='description short'>" + shopItem + "</p>")
I'm using ng_repeat to display text from an object. On the rails backend I call strip_tags(text) to remove html. When looking at the output it looks fine. Even when looking at the object in 'view source' it looks fine.
It only looks weird when you look at the text that is actually rendered from the ng_repeat - after a certain point (200 words in the example below) every space is replaced by an
This is causing the text to overflow the div. Any suggestions for dealing with this?
Edit: Some of the code (simplified)
JS:
$scope.init = function(id){
$scope.episodes = gon.episodes
Haml:
.episode-edit{ng_repeat:"episode in episodes"}
%p {{episode.sanitized_summary}}
You should try ng-bind-html. Your snippet would look like
<p ng-bind-html="YourObject"></p>
You can use it in ng-repeat as well.
If you want to secure the data first then include $sce service in your controller. Your snippet would be like
var ExampleCtrl = function($scope, $sce) {
$scope.YourObject = $sce.trustAsHtml($scope.YourObject); // that's it
}
Sorry, turns out it had nothing to do with angular, more to do with Ruby.
Ruby's whitespace regex doesn't capture unicode non-breaking space.
Instead of str.gsub(/\s/m, ' ') you have to use str.gsub(/[[:space:]]/m, ' ')
By default, the tinymce input gets passed to the DOM as a paragraph tag:
I would like to remove that element wrapper so that tinymce passes exactly what I entered in the text editor.
How do I do that ? Please if you provide a code, can you also let me know where that code gets added ?
Regards !!!
Actually I solved my problem. All I had to do was change the styling for paragraph tag :
p {margin: 0; padding: 0;}
You need to specify the forced_root_block to false. However the documentation states that not having your root block as a <p> tag can cripple the editors behaviour. Newlines will be spaced with <br> tags instead.
tinyMCE.init({
selector: 'textarea',
forced_root_block: false
});
See the documentation here
I strip out those pesky things with gsub and regex like this:
<%= #event.desc_long.gsub(/^\<p\>/,"").gsub(/\<\/p\>$/,"") %>
First .gsub removes the <p> at the start of the TinyMCE string, and the second one removes the </p> at the end. Working great for me. This would work for any language that uses regex (gsub is for rails). JavaScript example:
var str = "{TinyMCE HTML string}";
str = str.replace(/^\<p\>/,"").replace(/\<\/p\>$/,"");
Hope this helps!
EDIT:
Re: where to put it. You leave what TinyMCE puts in your database alone. Add the above only when you display it (in the view, e-mail whatever).
In case you just want to get rid of margins:
tinymce.init({
...
setup: function(ed) {
ed.on('init', function() {
var doc = this.getDoc().getElementById("tinymce");
doc.style.margin = 0;
});
},
});
In the backend, I edited some text with an link (a href="..."). When I switch to the HTML view of the content, I can confirm, that it's correct.
After saving, it seems that Typo3 saves that link as an tag but don't parse it back.
I tried things like (in TypoScript):
page.10.marks.CONTENT.select.where = colPos=1
page.10.marks.CONTENT.wrap = <div class="main_content">|</div>
page.10.marks.CONTENT.parseFunc.tags.link < lib.parseFunc.tags.link
or
page.10.marks.CONTENT.parseFunc =< lib.parseFunc_RTE
But nothing works...
I'm not able to find a working solution for Typo3 >6.0.
Hope someone can help me with that issue.
I found the error.
I had some wrong TS I had to remove. Now it's working.
(removed TS:
tt_content = COA
tt_content {
10 = TEXT
10.field = header
10.wrap = |
20 = TEXT
20.field = bodytext
})
Make sure to have the static template for css styled content included.
I am trying to do the following:
#foreach(var p in #Model.line_products){
<img class="small_img_#Model.line_products[i].short_name" src="/Content/images/#Model.line_products[i].image_name" />
}
Which isn't working, it renders the text just the way it is, not recognizing the '#'. I found this other post in Stackoverflow, which suggests adding parenthesis in the following way:
#foreach(var p in #Model.line_products){
<img class="small_img_(#Model.line_products[i].short_name)" src="/Content/images/#Model.line_products[i].image_name" />
}
Using this workaround, I get that my id is rendered as small_img_(MODEL ATTRIBUTE). Isn't there a workaround which doesn't require adding specific characters? (such as the parenthesis).
You have more errors than a simple undercore problem here. You cannot use #Model inside your if. You are already in a # block. Simply use #foreach(var p in Model.line_products).
Plus, the way you wrote the parenthesis, they will get rendered. What you want is
small_img_#(Model.line_products[i].short_name)
Put the parenthesis after the # instead of before:
class="small_img_#(Model.line_products[i].short_name)"
I sometimes put a couple of Guids in the id of an element and an underscore separator doesn't work.
There are two ways around this. First use the entity code _ instead and secondly just use a hyphen.
<input id="chk_#classLeader.ClassLeader_#ing.Ingredient.Guid" type="checkbox" class="chk_Done form-check">
<input id="chk-#classLeader.ClassLeader-#ing.Ingredient.Guid" type="checkbox" class="chk_Done form-check">
This is because I want to grab out the Guid's when the check box is clicked with some JQuery like this:
$(".chk_Done").click(function () {
var obj =[];
const itemId = ($(this).attr("id"));
const myArray = itemId.split("_");
var ClassLeaderGuid = myArray[1], IngredientGuid = myArray[2];