Is it possible to define indentable and collapsable blocks of text or code (e.g. formatted with Syntax Highlight Geshi) in MediaWiki?
I have seen collapsable tables and lists in Wikipedia, and would like to apply the same concept to paragraphs and code snippets.
Thanks!
Yes, you will need to have ToggleDisplay and SyntaxHighlight GeSHi installed.
Then on your page add code like this (example for C++):
<toggledisplay showtext="this is the show text">
<syntaxhighlight lang="cpp">
<Put the code here>
</syntaxhighlight>
</toggledisplay>
(See also: Wikis and Wikipedia)
Related
I try to setup mermaid in a Jekyll page. In Jekyll I am using the theme Just the Docs.
Basically I followed this post to add mermaid in my page template. And it results in:
Diagram I used is:
<div class="mermaid">
graph TD
A[Client] -->|tcp_123| B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</div>
I also tried with ```mermaid but that simply does not render a diagram at all. Additionally, I tried other versions of Mermaid and other examples from mermaid webpage without success.
What is wrong with my setup here?
I believe you require properly placed line breaks for Mermaid to correctly interpret and render the diagram. Using the Mermaid Live Editor I was only able to render your diagram with the following use of link breaks. However, it's not clear to me exactly how you accomplish that in what seems to be your HTML (div tag). Perhaps you simply break the lines, as the tutorial to which you've linked seems to show.
graph TD
A[Client] -->|tcp_123| B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
You have to add
markdown="0"
attribute to div, if you check the rendered code it adds additional paragraphs, that results in the mentioned problem. This helped in my case.
<div class="mermaid" markdown="0" >
graph TD
A[Client] -->|tcp_123| B(Load Balancer)
B -->|tcp_456| C[Server1]
B -->|tcp_456| D[Server2]
</div>
I am making help content documentation for an already made software (the kind of which opens in every software when you press F1 or navigate to the Help section in the menu bar). I am using simple html/CSS/js pages to do so.
There is a ton of the same text descriptions of various software properties that appear in more than one page. The idea is to make a single text source file, where all the text descriptions are located and then use some sort of referencing to that specific text section wherever necessary.
Kind of a similar to using a CSS stylesheet to apply styles over all of the pages, only this handles text instead of styles. This way I would be able to change text in only one file and it would apply everywhere it is used.
I ran across the html SSI method, but this only includes the entire html page and not just a specific text section the way I would like to. I would strongly avoid using different file for each text section.
Can anyone please point me into the right direction here?
I think that you can make a JavaScript function that contains the common texts and use this functions in your code whenever you need them, for this the JavaScript that you create should be an external file and you can reference it in every html page you need it.
For example, you can have one function that returns "Hello World" and set this to a "p" element with the id="title". So in every page where you have an element with the id title you can call your JavaScript function to set its text to "Hello World". Use this link to find out more about this topic:
http://www.w3schools.com/js/js_htmldom_html.asp
UPDATE: I did a little test, i created the following JavaScript:
function helloTitle(){
var text = "Hello World!";
document.getElementById("title").innerHTML = text;
}
And referenced it in some HTML pages like this:
<script src="commonText.js" type="text/javascript"></script>
After that i only need to call the function in the element i want it to modify:
<p id="title"><script>helloTitle();</script></p>
This is a solution if you are only using JS, CSS and HTML. There should be other ways to achieve this.
Hope this information could help you!
I figured out how to do it a little more comforatbly on a large scale using the html command https://www.w3schools.com/tags/tag_iframe.asp
in your main html file you do:
<p> <iframe src="Text.html" width="100%" height="300" style="border:1px solid black;"> </p>
and then with some basic html formating insert whatever text u want
<html>
<body>
hmm idk what i should put here. Test
</body>
</html>
there will also be some css formatting needing to be done before it look perfect, but if you want to make multi line blocks I think this is the easiest way to.
I've created a search box with a drop down that displays a certain tag of file type. The fiddle is here :
http://jsfiddle.net/Newtt/dKCQ5/
The ul contains the file tags that need to be searched.
My next step is to create a search by tag option where I'll be clicking on the file type and it'll appear as a search tag similar to the feature on the Evernote web app. More than help in code, are there certain resources that I can use to go forward with this?
Thanks!
You can have a look at this jQuery-Tags-Input library:
https://github.com/xoxco/jQuery-Tags-Input
There is a demo on their website:
http://xoxco.com/projects/code/tagsinput/
The markup is pretty easy too:
<input id="tags" value="dogs,cats" />
$('#tags').tagsInput();
Check out my JSFiddle.
I have tried countless plugins, codyfying HTML with escape keys, and my blood is beginning to boil. Switching between Visual and HTML mode is actually changing my content, ie destroying it!!!
OK, i figured out what to do.
First go into visual mode.
Select Preformatted in the formatting drop down. A little grey box is created.
Inside the grey box, copy and paste your raw HTML.
Save it and switch from visual to HTML views a few times. There should be no mangling.
IT IS ABSOLUTELY CRUCIAL that you paste into visual tab, instead of in the text tab, or it will get stuffed up completely (very unintuitive. You would think it would work the other way araound).
Wordpress does a strange thing where if you switch between visual and "text" mode (HTML mode was renamed in 3.5 update) it strips any tags that appear empty which often times may not be. This might be what you are experiencing if I am understanding the problem correctly.
If you are just trying to display code on your website you should be able to wrap the code like this:
<code><p>Example code post</p></code>
This is laid out in these guidelines here: http://codex.wordpress.org/Writing_Code_in_Your_Posts
If it is a block of code that needs to not wrap you could also use the "pre" tag like so:
<pre><code><p>Example code post</p></code></pre>
This is described very well here: <code> vs <pre> vs <samp> for inline and block code snippets
Yes, it is absolutely possible. You can follow any of the above mentioned methods. I prefer the following way.
First of all, decode the HTML code using online html decoder. You can find any on google. Then, You can paste the decoded code on your post. The benefit of this method is that, your indentation won't be lost.
Decoded Code
Rendered View File
Hope, it helps future reader to find a way.
Wordpress is very buggy. It took me a long time to finally succeed. For my Wordpress.org installed on my pc I tried: go to visual mode, add pre-formatted text block, copy/paste decoded or encoded. I tried :
<pre><code><p>Example code post</p></code></pre>
That did not work.
The only way it works for me is:
Go to visual, instead of adding a pre-formatted text block I create a paragraph text block, copy/paste the encoded HTMl and then convert it to preformat.
Hope that helps.
Perhaps, You should try out this plugin
http://wordpress.org/extend/plugins/insert-html-snippet/
Hope this helps!
One way to do is to make the code commented. Something like,
<!--div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div-->
instead of
<div>
<md-divider class="org__meta-divider md-soc-theme"></md-divider>
<h4 class="org__meta-heading">Technologies</h4>
<ul layout="" layout-wrap="" class="org__tag-container layout-wrap layout-row">
<li class="organization__tag organization__tag--technology">web services</li>
</ul>
</div>
I'm trying to figure out how to reference another area of a page with Markdown. I can get it working if I add a
<div id="mylink" />
and for the link do:
[My link](#mylink)
But my guess is that there's some other way to do an in-page link in Markdown that doesn't involve the straight up div tag.
Any ideas?
See this answer.
In summary make a destination with
<a name="sometext"></a>
inserted anywhere in your markdown markup (for example in a header:
## heading<a name="headin"></a>
and link to it using the markdown linkage:
[This is the link text](#headin)
or
[some text](#sometext)
Don't use <div> -- this will mess up the layout for many renderers.
(I have changed id= to name= above. See this answer for the tedious explanation.)
I guess this depends on what you're using to generate html from your markdown. I noticed, that jekyll (it's used by gihub.io pages by default) automatically adds the id="" attribute to headings in the html it generates.
For example if you're markdown is
My header
---------
The resulting html will look like this:
<h2 id="my-header">My header</h2>
So you can link to it simply by [My link](#my-header)
With the PHP version of Markdown, you can also link headers to fragment identifiers within the page using a syntax like either of the following, as documented here
Header 1 {#header1}
========
## Header 2 ## {#header2}
and then
[Link back to header 1](#header1)
[Link back to header 2](#header2)
Unfortunately this syntax is currently only supported for headers, but at least it could be useful for building a table of contents.
The destination anchor for a link in an HTML page may be any element with an id attribute. See Links on the W3C site. Here's a quote from the relevant section:
Destination anchors in HTML documents
may be specified either by the A
element (naming it with the name
attribute), or by any other element
(naming with the id attribute).
Markdown treats HTML as HTML (see Inline HTML), so you can create your fragment identifiers from any element you like. If, for example, you want to link to a paragraph, just wrap the paragraph in a paragraph tag, and include an id:
<p id="mylink">Lorem ipsum dolor sit amet...</p>
Then use your standard Markdown [My link](#mylink) to create a link to fragment anchor. This will help to keep your HTML clean, as there's no need for extra markup.
For anyone use Visual Studio Team Foundation Server (TFS) 2015, it really does not like embedded <a> or <div> elements, at least in headers. It also doesn't like emoji in headers either:
### 🔧 Configuration 🔧
Lorem ipsum problem fixem.
Gets translated to:
<h3 id="-configuration-">🔧 Configuration 🔧</h3>
<p>Lorem ipsum problem fixem.</p>
And so links should either use that id (which breaks this and other preview extensions in Visual Studio), or remove the emoji:
Here's [how to setup](#-configuration-) //🔧 Configuration 🔧
Here's [how to setup](#configuration) //Configuration
Where the latter version works both online in TFS and in the markdown preview of Visual Studio.
In Pandoc Markdown you can set anchors on arbitrary spans inside a paragraph using syntax [span]{#anchor}, e.g.:
Paragraph, containing [arbitrary text]{#mylink}.
And then reference it as usual: [My link](#mylink).
If you want to reference a whole paragraph then the most straightforward way is to add an empty span right in the beginning of the paragraph:
[]{#mylink}
Paragraph text.