I am trying to write a bullet list in markdown table, however I am unable to do so. I tried the solutions given here, and here.
I am writing the following table in bitbuckets readme.md file.
| **Date** | **A** | **B**
|:----------:|:-----:|:------:
| 2016 | Something | <ul><li>A</li><li>B</li><li>C</li></ul>
Every row of column B contains a bullet list of 2 items.
How can I achieve this ? What am I missing ? Please let me know. Thanks in advance.
I used the answer given by #Dorgrin in the post mentioned as a possible duplicate. Even while using that I was not able to get a list displayed. What I was shown was html code as plain text in the third column which is not the intended effect.
Bitbucket is lagging behind on supported features. Apparently they allow html in markdown README files, but they decided not to support it in snippets.
I say "apparently" because I just tried it, and it doesn't even work. See this repo.
I decided to ask them a question about this. You can follow further developments here
On a more positive note, what you had works well on Github as you can see here:
| **Date** | **A** | **B**
|:----------:|:-----:|:------:
| 2016 | Something | <ul><li>A</li><li>B</li></ul><ul><li>C</li></ul> |
<script src="https://gist.github.com/smac89/bc0ff6c7e41396293367b00df626317b.js"></script>
You can mimic the visual affect of a bulleted lists in a markdown table with the ascii character • and the <br> tag for a line break.
| | Apples | Oranges |
|-----------|--------|---------|
|attributes | • color: red <br> • shape: round | • color: orange <br> • shape: round |
|tasty | yes | yes |
Renders like this
I think this keeps the table clean of the html clutter from using the <li> and <ol>/<ul> tags.
Related
I need to get an element using CSS or XPath by searching by its text inside a list, each element contains the Project Name, the Status and the Country separated with the character "|".
The problem is that I have to get an element by only using the Project Name and the Country as parameters and there is no way to edit the HTML.
<li>Project 1 | approved | USA</li>
<li>Project 2 | approved | China</li>
<li>Project 3 | disapproved | Russia</li>
What I need is to remove the approved/disapproved text from the query, something like
//li[contains(text(),'Project 1 USA')]
Is there a way to achieve this using CSS or Xpath?
How about:
//li[contains(text(),'Project 1') and contains(text(),'USA')]
...if you are able to separate the project name and location?
I don't find the word-wrap: break-word; rule too pleasant in the eyes in certain situations because it tends to break long strings in the wrong places given the right condition.
It produces something like this:
|--- DIV ---|
| |
| English/S |
| panish |
| |
|-----------|
instead of
|--- DIV ---|
| |
| English/ |
| Spanish |
| |
|-----------|
Is there a way for me to fine-tune my CSS rules so that it tries to break words through symbols first before breaking the actual words? If so, how do I do it?
I think the only way to achieve such behavior is by using <wbr>(mdn link) in your markup at the position you wish to cause the word break.
Have a look:
.word-box{
width:100px;
margin:5em;
border:1px solid #606266;
}
<div id='break-wbr' class='word-box'>
English/<wbr>Spanish
</div>
It's also well supported.
Another way to break at a position would be by using shy hyphens ( )
.word-box{
width:100px;
margin:5em;
border:1px solid #606266;
}
<div id='break-shy' class='word-box' lang='en'>
English/Spanish
</div>
but the downside of using shy hyphens is that it inserts a visible hyphen at the point of word break.
You can also have a look at a very similar and more detailed answer here.
Try adding this.
word-break: keep-all;
I have made no secret of my disdain for BBCode and support for more readable text-to-HTML converters like Markdown, which is what SO uses. "Canonical" Markdown however doesn't have a syntax to define tables. So, I am trying to come up with an extension that does just that.
Above all, it should be easy to read and write. Of course it also shouldn't be conflict with existing Markdown syntax. PHP Markdown has syntax for tables that looks like:
| First Header | Second Header |
| ------------- | ------------- |
| Content Cell | Content Cell |
| Content Cell | Content Cell |
For some reason, this strikes me as "not enough enough" (mainly because it looks a little too verbose). Does anyone know of a Markdown dialect with a nicer syntax? You are welcome to write your own as well.
Bonus points if it's not extraordinarily difficult to parse but still flexible enough to handle alignments (horizontal and vertical), table headers and possibly colspan and rowspan.
I like Textile's table syntax. It looks like:
|_. a header cell |_. another header |
|_. one more header |=. centered cell |
| regular cell |>. right-aligned cell |
The parser doesn't care about whitespace. This syntax is flexible and avoids the rigidity of syntaxes (like yours, Reddit's, etc.) requiring a "separator" line between a single header row and the rest of the table.
I am learning flex and have written a little app with a TextArea that had data getting populated dynamically by embedding simple HTML (mostly for font styles)
I ran into a weird issue when I wanted to include images, the images in this case are small arrows as in reddit.com. My desired aligmnent is,
-------------
o | foo bar
| ffdfdfdf
| fdfd
-------------
o | dfdd
-------------
Where o in the first column is an image. Note that the borders are invisible.
I just used a simple <Table></table> and works perfectly if I view the resulting HTML in a browser. However flash renders the table in a very screwed manner, I get something like this instead
--------------
o fooooooo
ffffdfdf
fdfd
-------------
o fff
--------------
If the second line has more than one line, the subsequent lines wrap around the first column. Is this a known problem?
Flash's (and hence Flex's) htmlText doesn't officially support tables to begin with.
Use a Datagrid instead.
I just found out (the hard way), that when you have a HTML form with action="", Webkit browsers treat it differently to Firefox and Internet Explorer.
In FF and IE, these two form tags are equivalent:
<form method="post" action="">
<form method="post">
They will both submit the form back to the same page. Safari and Chrome however will send that first form to the default page (index.php, or whatever) - the second form works the same as FF/IE.
I've quickly hacked my code so that anywhere where it would normally print an empty action, it doesn't add an action attribute at all.
This seems very messy and not the best way to be doing things. Can anyone suggest a better method? Also, can anyone enlighten me about why Webkit would do such a thing?
I usually use
<form method='POST' action='?'>
This means the current URL but with no parameters.
The action attribute is required but you can specify an empty URI reference that referes to the current URI:
<form method="POST" action="">
Edit Ok, this actually is a filed bug of WebKit 528+ (see Bug 19884) when an empty URI is used with a specified base URI using the BASE element. In that case WebKit takes the base URI instead of resolving the empty URI from the base URI.
But this is correct behavior according to RFC 3986:
5.1. Establishing a Base URI
The term "relative" implies that a "base URI" exists against which
the relative reference is applied. […]
The base URI of a reference can be established in one of four ways,
discussed below in order of precedence. The order of precedence can
be thought of in terms of layers, where the innermost defined base
URI has the highest precedence. This can be visualized graphically
as follows:
.----------------------------------------------------------.
| .----------------------------------------------------. |
| | .----------------------------------------------. | |
| | | .----------------------------------------. | | |
| | | | .----------------------------------. | | | |
| | | | | <relative-reference> | | | | |
| | | | `----------------------------------' | | | |
| | | | (5.1.1) Base URI embedded in content | | | |
| | | `----------------------------------------' | | |
| | | (5.1.2) Base URI of the encapsulating entity | | |
| | | (message, representation, or none) | | |
| | `----------------------------------------------' | |
| | (5.1.3) URI used to retrieve the entity | |
| `----------------------------------------------------' |
| (5.1.4) Default Base URI (application-dependent) |
`----------------------------------------------------------'
In this case the BASE element with href attribute is a base URI embedded in content. And base URI embedded in content has a higher precedence than URI used to retrieve the entity. So WebKit’s behavior is actually the expected behavior according to RFC 3986.
But in HTML 5 this behavior of an empty URI in form’s action (still a draft) differs from RFC 3986:
If action is the empty string, let action be the document's address.
Note: This step is a willful violation of RFC 3986, which would require base URL processing here. This violation is motivated by a desire for compatibility with legacy content. [RFC3986]
Frankly, an HTML comment after this note in the source code reads:
<!-- Don't ask me why. But that's what IE does. It even treats
action="" differently from action=" " or action="#" (the latter
two resolve to the base URL, the first one resolves to the doc
URL). And other browsers concur. It is even required, see e.g.
http://bugs.webkit.org/show_bug.cgi?id=7763
https://bugzilla.mozilla.org/show_bug.cgi?id=297761
-->
So this is rather a bug originated from Internet Explorer that became a de-facto standard.
The best way in my opinion would be not to omit the action attribute (which would not validate) but to specify the actual action for the form. Is there a reason you are not specifying the action?
I've always used (in PHP)
<form method="post" action="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">
To get my forms to submit to themselves.