[TW5] Is it possible to highlight some text in <code> block?

[sini-Kit]

Hi!  I want to get something like this.

<div dir="ltr"><div><h1 style="margin: 0.67em 0px;" dir="ltr">Заказ в интернет магазине</h1></div>
<div style="display: inline; white-space: pre-wrap;"><div style="font: inherit; margin: 0px 0px 1em; width: 99%; white-space: pre-wrap; -ms-word-wrap: break-word; font-size-adjust: inherit; font-stretch: inherit;" dir="ltr">Ваша корзина</div>
<div style="color: rgb(196, 59, 29);">*&nbsp;Обязательно</div></div>

but if I put ```  I cant change styles in code block.

[Hegart Dmishiv]

Hi sini-Kit,

I'm sure someone will be along soon to show you how to do this properly. In the meantime, here's my cheat's method of achieving it. What I did is to create a manual copy of the <pre> tag style as it is in the basic TiddlyWiki pallette / theme, using a CSS stylesheet, as below:

.fake-pre {
    font-family:monospace;
    font-size:.9em;
    color:#dd1144;
    background-color:#f7f7f9;
    border:1px solid #e1e1e8;
    border-radius:3px;
    padding: 0em .1em .2em .1em;
}

Then I simply call it from within a <p> or <span> HTML element, such as <p class="fake-pre">this text looks like it has been escaped</p>. This also gives the ability to create clickable links within something that looks like escaped text. From there you could add extra CSS to style individual parts of your text, as you've shown. The answer, as far as I can see, is to rely on CSS for this. Maybe someone has a more "Tiddly" way of doing it, but this works for me. Here's an example of it in use in one of my {{DesignWrite}} exercises. Note, of course, that my solution fails if the user decides to change the palette / theme of your TW instance, as the CSS will stay fixed, to replicate the look and feel of the original.

Hope this helps,

Hegart.

[Mat]

Maybe (I'm not sure) you can wrap it in an iframe using srcdoc.

Here is an example. Copy-paste it straight into a tiddler to see the result. (It is from QuickTid where it is one of the pre-made seletable content snips).

<iframe sandbox seamless height="100%" style="width: 100%; border:0;" src="fallback.html"  srcdoc="

Here you can insert <b>code</b> and it cannot be executed because it is inside an iframe that is sandboxed!<br>

You can <i>style the content</i> within the srcdoc attribute using HTML or even a <span class='myStyle'>local style</span> block but you must <b>escape all quotes (use `&quot;`) or single quotes and double-escape all ampersands (use `&amp;amp;` for a single ampersand</b>
<br>

See more about iframes and srcdoc:<br>
<a href=&quot;iframe&quot;>http://www.w3schools.com/tags/att_iframe_sandbox.asp</a>
<style>.myStyle {color:green; font-weight:bold;}</style>

"></iframe>

[Jeremy Ruston]

Hi Mat

On 15 Mar 2016, at 10:20, Mat <matia...@gmail.com> wrote:

Maybe (I'm not sure) you can wrap it in an iframe using srcdoc

Just to point out once again, there’s no benefit of using srcdoc vs. using the src attribute with a base64 encoded document as TiddlyWiki does at the moment. Browser support is more consistent for the latter.

Best wishes

Jeremy

[Mat]

Jeremy,

Just to point out once again, there’s no benefit of using srcdoc vs. using the src attribute with a base64 encoded document as TiddlyWiki does at the moment. Browser support is more consistent for the latter.

- thanks, but merely exchanging the srcdoc parameter for src in the above code, just doesn't render the content. How does one show TW-local content in a TW-local iframe? And would one be able to style what is displayed, as asked about?

<:-)

[Jeremy Ruston]

Hi Mat

- thanks, but merely exchanging the srcdoc parameter for src in the above code, just doesn't render the content. How does one show TW-local content in a TW-local iframe?

You need to base64 encode the text as a data: URI to use the src attribute. I’d suggest:

1. Create an HTML tiddler

2. Right click and choose “Inspect” element

3. Have a look at the way that the iframe is constructed

You can use the <<makedatauri>> macro to construct a base64 URI.

If srcdoc is working for you, then go ahead and keep using it, but be aware of the compatibility issues and the actual reason for it’s existence:

http://stackoverflow.com/a/30507852

> And would one be able to style what is displayed, as asked about?

You can only style the content of an iframe by injecting the styles into the iframe, either as a style definition, or inline styles.

Best wishes

Jeremy.

<:-)

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e86e1c9c-4ae6-4785-bfc9-e5da26ac25ad%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mat]

Jeremy, thank you for your reply.

I came up with the following thanks to Jeremys input which allows a user to call a macro with some tiddlers text as argument na dhave it uri-encoded and sandboxed (iframed). This allows for simple <b>html-styling</b> but not css:

tags: $:/tags/Macro

\define iframed() <iframe sandbox seamless height="100%" style="width: 100%; border:0;" src="""$(uri)$"""></iframe>

\define getiframe(itype arg)
<$set name="uri" value=<<makedatauri """$arg$""" "text/$itype$">>>
<<iframed>>
</$set>
\end

\define sandbox(content itype:"html")
<$macrocall $name="getiframe" itype="$itype$" arg="""$content$"""/>
\end

Interestingly, using iframe with srcdoc - as I'm doing here does seem to allow css styling -  does this mean it doesn't funciton as a sandboxing iframe?

<:-)