[FIXED] How do you write a link containing a closing bracket in markdown syntax?

Issue

Markdown syntax for a link is pretty simple:

[Example](http://example.com/)

produces:

Example

But what if the link itself contains a closing bracket?

[Syntax](http://en.wikipedia.org/wiki/Syntax_(programming_languages))

produces:

Syntax)

which is obviously broken.

Edit

Putting the url in quotes does not work

Solution

You can try to escape the character:

[Syntax](http://en.wikipedia.org/wiki/Syntax_\(programming_languages\))

You can also encode the characters

[Syntax](http://en.wikipedia.org/wiki/Syntax_%28programming_languages%29)

Answered By - Luis Tellez

Answer Checked By - Senaida (PHPFixing Volunteer)

Read More

[FIXED] How to prevent Markdown's list from eating spaces?

Issue

I have:

- `foo`: some text                       Default: false
- `barThatIsTooLong`: again some text    Default: true

but in Bitbucket README, whitespaces will be eaten automatically, and this will be displayed as:

• foo: some text Default: false
• barThatIsTooLong: again some text Default: true

I would like to have the default values vertically aligned.

How to tell Bitbucket's markdown to not eat my spaces? Is it even possible?

Solution

You probably can't, unless you use tables instead of lists.

| Variable           | Description     | Default |
| -------------------|---------------- | ------- |
| `foo`              | some text       | false   |
| `barThatIsTooLong` | again some text | true    |

If you are using a site which doesn't strip out raw HTML and/or style attributes, then inline floats might work:

- `foo`: some text                    <span style="float:right; width:10em;">Default: false</span>
- `barThatIsTooLong`: again some text <span style="float:right; width:10em;">Default: true</span>

The long answer

Collapsing whitespace is a "feature" of HTML, of which Markdown is a subset. The "feature" is often referred to as "insignificant whitespace." The idea is that all whitespace (spaces, tabs, newlines, etc.) is collapsed into a single space (see a summary of whitespace behavior options). Note that this collapse of whitespace is being done by your browser, not the Markdown parser. If you use your browser's "view source" of "inspect" feature, you will see that the HTML list retains the whitespace:

<ul>
<li><code>foo</code>: some text                       Default: false</li>
<li><code>barThatIsTooLong</code>: again some text    Default: true</li>
</ul>

In other words, Markdown is not eating your whitespace, your browser is. So the next question is how to preserve whitespace in HTML and how that can be incorporated into your Markdown. There are a number of different ways to do that, but, in the end, they will not work as you desire.

1. The <pre> tag preserves whitespace, but is a block-level tag and not for inline use. As you only want some inline whitespace, preserved, not the entire block of text, this is not useful.

2. The whitespace:pre CSS rule could be used to get that effect, but will look ugly in your Markdown. Also, Bitbucket may strip your style tags for security reasons (SO does).

   - `foo`: some text<span style="white-space:pre">                       </span>Default: false
   - `barThatIsTooLong`: again some text<span style="white-space:pre">    </span>Default: true
   

3. As non-breaking spaces are not collapsed, you could use them rather than regular spaces. In fact, you only need every other space to be a non-breaking space. But, again, it is ugly. Even worse, as non-breaking spaces are entered as HTML entities, one displayed character is 6 characters long in your Markdown, so the columns don't line up properly in the source document.

   - `foo`: some text                       Default: false
   - `barThatIsTooLong`: again some text    Default: true
   

But even if you get one of the above to work, the browser probably still won't display your list as you desire. Bitbucket, like most websites do not use monospace fonts for their website (except in code blocks). Therefore, the width of each letter in a line is not equal and your columns still won't line up. Notice that the same situation exists here on SO. The last example above renders like this:

• foo: some text                       Default: false
• barThatIsTooLong: again some text    Default: true

You can see the same effect in your editor. If you change the font from a monospace font to a proportional font you will notice that the columns will misalign. And that misalignment will vary with each different proportional font. Therefore, simply adjusting the number of spaces won't guarantee proper alignment. You may even end up with a half-width misalignment.

Of course, websites have columns all the time. But those columns are not "faked" with inline text. Each column is wrapped in its own block-level element and CSS rules position and size the containing box appropriately as demonstrated in this answer. But again, that requires raw HTML and CSS which Bitbucket is likely to not allow for security reasons.

One other option might be to use inline floats:

- `foo`: some text                    <span style="float:right; width:10em;">Default: false</span>
- `barThatIsTooLong`: again some text <span style="float:right; width:10em;">Default: true</span>

This causes the <span> to be floated to the far right edge of the containing block (the list item). To avoid the floated items appearing right aligned, we have included the width which ensures that each <span> is the same width. The actual width needs to be at least as wide as the largest text within the span. However, there is still the fact that Bitbucket will likely strip out the raw HTML for security reasons.

However, Bitbucket's Markdown implementation does support simple tables. So if you really want columns, you could implement them as tables. Of course, you would need to have table rows rather than list items in addition to column headers, which you may or may not want.

| Variable           | Description     | Default |
| -------------------|---------------- | ------- |
| `foo`              | some text       | false   |
| `barThatIsTooLong` | again some text | true    |

Answered By - Waylan

Answer Checked By - Marilyn (PHPFixing Volunteer)

Read More

[FIXED] What are some Apps or add ons that get used to customize Django Admin

Issue

Im looking for a list or just suggestions on some Django Admin must haves or things that people tend to use.

I'm particularly interested in adding a Wysiwyg or Markdown Editor to the the TextAreas in the Django Admin.

Any suggestions?

Solution

There are a number of apps that add wysiwyg editors to Django's admin, such as django-wysiwyg. There are also a couple of articles on this subject in Django's wiki. Some other django apps that are great for admin customization are django-admin-tools and grappelli. Beyond being a general ovehaul of the user interface, grappelli also includes support for the inclusion of a wysiwig editor. And as always, the Django docs are usually a good first stop.

Personanlly, I'm particularly fond of grappelli, it's been used to great effect on a number of Django projects, including mezzanine and a few of my own! Here's a preview of the facelift it gives Django's admin:

Answered By - zeekay

Answer Checked By - Clifford M. (PHPFixing Volunteer)

Read More

[FIXED] How to use php-markdown from pear?

Issue

I know how to use php-markdown by loading it manually, but decided to install it through pear. Installed with the following commands:

pear channel-discover pear.michelf.com
pear install michelf/MarkdownExtra

>> install ok: channel://pear.michelf.com/MarkdownExtra-1.2.5

The problem is that I have no idea on how to use it when installed from pear and the documentation does not informs anything about it, so I think it might be a pretty dumb question.

Here is how I tried to use it:

if(class_exists('MarkdownExtra_Parser')){
    $m = MarkdownExtra_Parser();
    $html = $m->transform($string);
}

and:

$html = Markdown($string);

anyone?

Solution

When it's installed OK, it gets installed into the base PEAR directory - which should be in the include path.

<?php
require_once 'markdown.php'
$mdtext= "... markdown text ...";
echo  Markdown($mdtext)

$parser = new MarkdownExtra_Parser;
echo $parser->transform($mdtext);

will output the two sets of HTML based on the contents of $mdtext.

There are some instructions on http://michelf.com/projects/php-markdown/

Answered By - Alister Bulman

Answer Checked By - Cary Denson (PHPFixing Admin)

Read More

[FIXED] How to reduce the regression output in markdown

Issue

I want to show a regression output in markdown but it contains a lot of character variables which result in a lot of independent variables. Is there any way to only show in the summary the first 5 variables? The summary function in combination with the options(max.print=80) does not provide the solution I want.

Solution

You can use tidy() function from broom package

library(broom)
library(magrittr)

lm(mpg ~ ., data = mtcars) %>% tidy() %>% head(n = 5)

#> # A tibble: 5 × 5
#>   term        estimate std.error statistic p.value
#>   <chr>          <dbl>     <dbl>     <dbl>   <dbl>
#> 1 (Intercept)  12.3      18.7        0.657   0.518
#> 2 cyl          -0.111     1.05      -0.107   0.916
#> 3 disp          0.0133    0.0179     0.747   0.463
#> 4 hp           -0.0215    0.0218    -0.987   0.335
#> 5 drat          0.787     1.64       0.481   0.635

^{Created on 2022-07-08 by the reprex package (v2.0.1)}

Answered By - shafee

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] How to Flutter Markdown Image Provider?

Issue

In my markdown return

[![Build & Release](https://github.com/aelayyuu/****/actions/workflows/action.yml/badge.svg)](https://github.com/aelayyuu/****/actions/workflows/action.yml)

Error is

HTTP request failed, statusCode: 404,
https://github.com/aelayyuu/****/actions/workflows/action.yml/badge.svg

When the exception was thrown, this was the stack:
#0      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:97:9)
<asynchronous suspension>

Image provider:
  NetworkImage("https://github.com/aelayyuu/****/actions/workflows/action.yml/badge.svg",
  scale: 1.0)
Image key:
  NetworkImage("https://github.com/aelayyuu/****/actions/workflows/action.yml/badge.svg",
  scale: 1.0)

My code is using markdown: ^5.0.0, flutter_svg: ^1.1.1+1 and flutter_markdown: ^0.6.10+2

import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:markdown/markdown.dart' as md;

Markdown(
                  controller: controller,
                  selectable: true,
                  data: aboutMD,
                  // imageBuilder: imageBuilder(aboutMD),
                  extensionSet: md.ExtensionSet(
                    md.ExtensionSet.gitHubFlavored.blockSyntaxes,
                    [
                      md.EmojiSyntax(),
                      ...md.ExtensionSet.gitHubFlavored.inlineSyntaxes,
                      md.ImageSyntax(),...md.ExtensionSet.gitHubFlavored.inlineSyntaxes
                    ],
                    
                  ),
                )

How to show image such as svg, png, jpg in flutter markdown?

Solution

Solved:

Url lunch

Future<void> _onTapLink(String text, String? href, String title) async {
    if (href == null) return;
    final Uri url = Uri.parse(href);
    if (!await launchUrl(
      url,
      mode: LaunchMode.externalApplication,
    )) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('Wrong address: $href'),
        ),
      );
    }
  }

Image showing

import 'package:markdown/markdown.dart' as md;

Markdown(
    selectable: true,
    data: data,
    onTapLink: onTapLink,
    extensionSet: md.ExtensionSet(
      /*blockSyntaxes=*/ md.ExtensionSet.gitHubFlavored.blockSyntaxes,
      /*inlineSyntaxes=*/ md.ExtensionSet.gitHubFlavored.inlineSyntaxes,
    ),
  );

Answered By - Aung Ye Zaw

Answer Checked By - Marie Seifert (PHPFixing Admin)

Read More

[FIXED] Why Markdown does not align image properly?

Issue

I am using below lines for getting aligned images in a row in Github markdown, but last image always breaks the line even though there are space.

Code

# Example Img alightment #
<img align="left" src="https://github.com/hissain/CoronaTracker/blob/master/architecture/Screenshots/Android/Screenshot_Registration.png" alt="Android Registration" width="200"/>
<img align="center" src="https://github.com/hissain/CoronaTracker/blob/master/architecture/Screenshots/Android/Screenshot_Registration.png" alt="Android Registration" width="200"/>
<img align="right" src="https://github.com/hissain/CoronaTracker/blob/dev/architecture/Screenshots/Android/Screenshot_Registration.png" alt="Android Registration" width="200"/>

Output

How can I align all three images in single row?

Reference: https://github.com/hissain/CoronaTracker/blob/dev/architecture/example.md

Solution

If you just need them in one row without centering you can do the following (just place images without new lines or with the <p> tag):

<img src="https://github.com/hissain/CoronaTracker/blob/master/architecture/Screenshots/Android/Screenshot_Registration.png" alt="Android Registration" width="200"/> <img src="https://github.com/hissain/CoronaTracker/blob/master/architecture/Screenshots/Android/Screenshot_Registration.png" alt="Android Registration" width="200"/> <img src="https://github.com/hissain/CoronaTracker/blob/dev/architecture/Screenshots/Android/Screenshot_Registration.png" alt="Android Registration" width="200"/>

or

<p>
  <img src="https://github.com/hissain/CoronaTracker/blob/master/architecture/Screenshots/Android/Screenshot_Registration.png" alt="Android Registration" width="200"/>
  <img src="https://github.com/hissain/CoronaTracker/blob/master/architecture/Screenshots/Android/Screenshot_Registration.png" alt="Android Registration" width="200"/>
  <img src="https://github.com/hissain/CoronaTracker/blob/dev/architecture/Screenshots/Android/Screenshot_Registration.png" alt="Android Registration" width="200"/>
</p>

Answered By - ilya.lehchylin

Answer Checked By - Candace Johnson (PHPFixing Volunteer)

Read More

[FIXED] How to size and position all images in a markdownfile with pandoc/latex?

Issue

i am looking for a way to resize all images in an existing markdown file e.g. i want all pictures to have a max width of 80% of the textblock width and have all the images centered and bordered. How do I do this and is there a way to customize borders, e.g. colors and width of that border?

This is an example of my markdown file:

# section
## subsection
### subsubsection



![dummy1](.\dummy1.jpg)

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting.

![dummy2](.\dummy2.png)



| Eigenschaft |             Typ             | Beschreibung                                                 |
| :---------: | :-------------------------: | :----------------------------------------------------------- |
|  `general`  | `object` <br/> *(optional)* | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |
|   `esri`    | `object` <br/> *(optional)* | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |
|  `webgen`   | `object` <br/> *(optional)* | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. |

using pandoc and this shell script:

pandoc "$1" \
    -f gfm \
    --include-in-header chapter_break.tex \
    --highlight-style pygments\
    -V linkcolor:blue \
    -V geometry:a4paper \
    -V geometry:margin=2cm \
    -V mainfont="Arial" \
    -V monofont="Arial" \
    -o "$2"

and this tex file

\usepackage{sectsty}
\sectionfont{\clearpage}

i get this result

I am looking for a way using pandoc shellscript to get all pictures width scaled down to 80% text width.

Also I am looking for a solution to get the tabled formatted in the right way as its width is not right. But still using the

\usepackage{sectsty}
\sectionfont{\clearpage}

tex file. Thank you alot for your help!

Solution

You can change the default with of the images using \setkeys{Gin}{width=.8\linewidth} and boarders can be added with the floatrow package:

\usepackage{sectsty}
\sectionfont{\clearpage}

\usepackage{floatrow}
\floatsetup[figure]{style=boxed} 

\setkeys{Gin}{width=.8\linewidth}

(please only ask one question per question. You can ask a new question for the unrelated problem about the table)

Answered By - samcarter_is_at_topanswers.xyz

Answer Checked By - Dawn Plyler (PHPFixing Volunteer)

Read More

[FIXED] You cannot use the "markdown_to_html" filter as no Markdown library is available

Issue

I am using Symfony 5.3.9 with PHP 7.4.24 and Composer 2.1.8. I want to render the following template with markdown_to_html but I am getting an error.

This is blog.html.twig

...
<article class="text-center">
    {{ content | markdown_to_html }}
</article>
...

And this is the error that I am getting:

An exception has been thrown during the rendering of a template ("You cannot use the "markdown_to_html" filter as no Markdown library is available; try running "composer require league/html-to-markdown".").

I run composer require league/html-to-markdown but it says "Nothing to install, update or remove".

My composer.json:

{
    "type": "project",
    "license": "proprietary",
    "require": {
        "php": "^7.4.24",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "composer/package-versions-deprecated": "^1.10",
        "doctrine/annotations": "^1.0",
        "doctrine/doctrine-bundle": "^2.1",
        "doctrine/doctrine-migrations-bundle": "^3.0",
        "doctrine/orm": "^2.7",
        "league/html-to-markdown": "^5.0",
        "phpdocumentor/reflection-docblock": "^5.2",
        "sensio/framework-extra-bundle": "^5.5",
        "symfony/apache-pack": "^1.0",
        "symfony/asset": "5.3.*",
        "symfony/console": "5.3.*",
        "symfony/dotenv": "5.3.*",
        "symfony/expression-language": "5.3.*",
        "symfony/flex": "^1.3.1",
        "symfony/form": "5.3.*",
        "symfony/framework-bundle": "5.3.*",
        "symfony/http-client": "5.3.*",
        "symfony/intl": "5.3.*",
        "symfony/mailer": "5.3.*",
        "symfony/mime": "5.3.*",
        "symfony/monolog-bundle": "^3.1",
        "symfony/notifier": "5.3.*",
        "symfony/process": "5.3.*",
        "symfony/property-access": "5.3.*",
        "symfony/property-info": "5.3.*",
        "symfony/runtime": "5.3.*",
        "symfony/security-bundle": "5.3.*",
        "symfony/serializer": "5.3.*",
        "symfony/string": "5.3.*",
        "symfony/translation": "5.3.*",
        "symfony/twig-bundle": "5.3.*",
        "symfony/validator": "5.3.*",
        "symfony/web-link": "5.3.*",
        "symfony/yaml": "5.3.*",
        "twig/cssinliner-extra": "^3.3",
        "twig/extra-bundle": "^3.3",
        "twig/inky-extra": "^3.3",
        "twig/markdown-extra": "^3.3",
        "twig/twig": "^2.12|^3.0"
    },
    "require-dev": {
        "symfony/browser-kit": "^5.3",
        "symfony/css-selector": "^5.3",
        "symfony/debug-bundle": "^5.3",
        "symfony/maker-bundle": "^1.20",
        "symfony/phpunit-bridge": "^5.3",
        "symfony/stopwatch": "^5.3",
        "symfony/var-dumper": "^5.3",
        "symfony/web-profiler-bundle": "^5.3"
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": {
            "*": "dist"
        },
        "sort-packages": true
    },
    "autoload": {
        "psr-4": {
            "App\\": "src/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "App\\Tests\\": "tests/"
        }
    },
    "replace": {
        "paragonie/random_compat": "2.*",
        "symfony/polyfill-ctype": "*",
        "symfony/polyfill-iconv": "*",
        "symfony/polyfill-php72": "*",
        "symfony/polyfill-php71": "*",
        "symfony/polyfill-php70": "*",
        "symfony/polyfill-php56": "*"
    },
    "scripts": {
        "auto-scripts": {
            "cache:clear": "symfony-cmd",
            "assets:install %PUBLIC_DIR%": "symfony-cmd"
        },
        "post-install-cmd": [
            "@auto-scripts"
        ],
        "post-update-cmd": [
            "@auto-scripts"
        ]
    },
    "conflict": {
        "symfony/symfony": "*"
    },
    "extra": {
        "symfony": {
            "allow-contrib": false,
            "require": "5.3.*"
        }
    }
}

I have followed this documentation https://twig.symfony.com/doc/3.x/filters/markdown_to_html.html . What I am doing wrong?

Solution

The solution is to execute:

composer require league/commonmark

The twig/markdown-extra package just provides a twig extension for calling the markdown processor. You still need to install an actual markdown package. This is sort of documented at the very end of the markdown_to_html page but it is not very clear.

If no markdown packages are found then the html_to_markdown suggestion is emitted. Which would be fine if that is what was needed but markdown_to_html is a far more common requirement. Hence all the comments. The suggestion will be fixed in the next release.

And just for info, the league package is not the only one supported. You could also use:

   "require-dev": {
        "erusev/parsedown": "^1.7",
        "league/commonmark": "^1.0",
        "league/html-to-markdown": "^4.8|^5.0",
        "michelf/php-markdown": "^1.8"

As listed in markdown-extra/composer.json

Answered By - Cerad

Read More