제 프로젝트 underscore-cli에 대한 README.md 파일이 있는데, 이 파일은 명령줄에서 JSON과 JS를 해킹할 수 있는 아주 멋진 도구입니다.
사물에 색을 지정하는 "--color" 플래그를 문서화하고 싶습니다. 출력이 실제로 어떻게 보이는지 보여줄 수 있다면 훨씬 더 잘 이해할 수 있을 것입니다. README.md에 색상을 추가하는 방법을 찾을 수 없는 것 같습니다. 어떤 아이디어 있으신가요?
나는 이것을 시도했다:
<span style="color: green"> Some green text </span>
그리고 이것:
<font color="green"> Some green text </font>
아직까지 운이 없습니다.
- ![#f03c15](https://placehold.it/15/f03c15/000000?text=+) `#f03c15`
- ![#c5f015](https://placehold.it/15/c5f015/000000?text=+) `#c5f015`
- ![#1589F0](https://placehold.it/15/1589F0/000000?text=+) `#1589F0`
생산한다.
-! [# f03c15] (https://placehold.it/15/f03c15/000000? text = +) '' # f03c15 -! [# c5f015] (https://placehold.it/15/c5f015/000000? text = +) '' # c5f015 -! [# 1589F0] (https://placehold.it/15/1589F0/000000? text = +) '' # 1589F0
Diff '언어' 일부 컬러 텍스트 발령합니다 태그를 사용할 수 있습니다.
```diff
- text in red
+ text in green
! text in orange
# text in gray
그러나 이를 시작으로 자도으로 인컨텍스트 뉴 라인 '- +! # '
[! [입력하십시오. 이미지 여기에 설명을] [1]] [1]
이 문제는 뚜르산을 [깃허브 수정표시 # 369] [2] 에서, 그들은 haven& # 39, t 결정에 변경한 이후 (2014년).
[1]: https://i.stack.imgur.com/0buxS.png
[2]: https://github.com/github/markup/issues/369
GitHub README.md
파일에서는 일반 텍스트에 색상을 지정할 수 없습니다. 하지만 아래 태그를 사용하여 코드 샘플에 색상을 추가할 수 있습니다.
이렇게 하려면 다음 샘플과 같은 태그를 README.md 파일에 추가하면 됩니다:
```json // 색상을 지정하는 코드 ``` ```html // 색칠 코드 ``` ```js // 색칠 코드 ``` ```css // 색칠 코드 ``` // 등
'pre' 또는 'code' 태그가 필요하지 않습니다.
이에 대한 자세한 내용은 "GitHub 마크다운 문서"에서 확인할 수 있습니다(페이지의 절반 정도 아래에 Ruby를 사용한 예제가 있습니다). GitHub는 언어학자를 사용하여 구문을 식별하고 강조 표시하며, 지원되는 언어의 전체 목록(및 해당 마크다운 키워드)은 언어학자의 YAML 파일에서 확인할 수 있습니다.
안타깝게도 현재로서는 불가능합니다.
GitHub 마크다운 문서](https://help.github.com/articles/github-flavored-markdown)에는 'color', 'css', 'html' 또는 'style'에 대한 언급이 없습니다.
일부 마크다운 프로세서(예: Ghost에서 사용되는 프로세서)는 <span style="color:orange;"Word up</span>
와 같은 HTML을 허용하지만, GitHub는 HTML을 모두 버립니다.
README에 색상을 꼭 사용해야 하는 경우 README.md에서 사용자에게 README.html로 리디렉션하면 된다. 물론 이 경우 접근성이 저하된다는 단점이 있다.
적어도 HTML을 통해서는 현재 깃허브 마크다운에서 텍스트에 색상을 지정할 수 없다는 Qwertman의 의견에 동의하는 편이다.
깃허브는 일부 HTML 요소와 속성을 허용하지만 특정 요소만 허용합니다(깃허브의 HTML 위생 처리 문서 참조). 'p' 및 'div' 태그와 'color' 속성을 허용합니다. 하지만 깃허브의 마크다운 문서에서 이 태그들을 사용하려고 시도했을 때 작동하지 않았습니다. 다른 변형 중에서 다음을 시도했지만 작동하지 않았습니다:
<p style='color:red'>이것은 빨간색 텍스트입니다.</p>
글꼴 색상="빨간색">이것은 어떤 텍스트입니다!</font>
이것들은 <b style='color:red'>빨간 단어들입니다</b>.
입니다.Qwertman이 제안한 것처럼 색상을 꼭 사용해야 하는 경우 README.html에 색상을 지정하고 이를 참조할 수 있습니다.
대안으로 래스터로 렌더링 이미지, SVG 파일을 포함할 수 있습니다.
<a><img src="http://dump.thecybershadow.net/6c736bfd11ded8cdc5e2bda009a6694a/colortext.svg"/></a>
그런 다음 SVG 파일을 텍스트 색상 추가 칭송되었다.
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="100" height="50"
>
<text font-size="16" x="10" y="20">
<tspan fill="red">Hello</tspan>,
<tspan fill="green">world</tspan>!
</text>
</svg>
죄송합니다. 수 있지만 ',' 텍스트 파일을 열 때 텍스트 선택 및 복사 이스버그 SVG 이미지가 임베드된 때 선택할 수 없습니다.
데모: https://gist.github.com/CyberShadow/95621a949b07db295000
난 몇 가지 색상을 사용하여 페이지를 에모지 이니고데 & # 추가되든지 128161, 깃허브 수정표시 자 (예: 또는 & # 128721. - 일부 에모지 문자를 일부 브라우저에서는 색깔이 있다. 없고 컬러 에모지 알파벳 내린 것으로 알고 어쨌든요)
Png 텍스트 서비스 구현에 따라 @AlecRust 아이디어, I did.
데모는 있습니다.
색상, 크기, 텍스트 = = = 10& Hello% 20world cc0000& http://lingtalfi.com/services/pngtext?
네 가지 매개변수입니다:
이 서비스를 사용하지 마십시오 제외하고 테스트) 이지만, 내가 만든 클래스를 사용하여 직접 서비스를 제공하는:
https://github.com/lingtalfi/WebBox/blob/master/Image/PngTextUtil.php
class PngTextUtil
{
/**
* Displays a png text.
*
* Note: this method is meant to be used as a webservice.
*
* Options:
* ------------
* - font: string = arial/Arial.ttf
* The font to use.
* If the path starts with a slash, it's an absolute path to the font file.
* Else if the path doesn't start with a slash, it's a relative path to the font directory provided
* by this class (the WebBox/assets/fonts directory in this repository).
* - fontSize: int = 12
* The font size.
* - color: string = 000000
* The color of the text in hexadecimal format (6 chars).
* This can optionally be prefixed with a pound symbol (#).
*
*
*
*
*
*
* @param string $text
* @param array $options
* @throws \Bat\Exception\BatException
* @throws WebBoxException
*/
public static function displayPngText(string $text, array $options = []): void
{
if (false === extension_loaded("gd")) {
throw new WebBoxException("The gd extension is not loaded!");
}
header("Content-type: image/png");
$font = $options['font'] ?? "arial/Arial.ttf";
$fontsize = $options['fontSize'] ?? 12;
$hexColor = $options['color'] ?? "000000";
if ('/' !== substr($font, 0, 1)) {
$fontDir = __DIR__ . "/../assets/fonts";
$font = $fontDir . "/" . $font;
}
$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);
//--------------------------------------------
// GET THE TEXT BOX DIMENSIONS
//--------------------------------------------
$charWidth = $fontsize;
$charFactor = 1;
$textLen = mb_strlen($text);
$imageWidth = $textLen * $charWidth * $charFactor;
$imageHeight = $fontsize;
$logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
imagealphablending($logoimg, false);
imagesavealpha($logoimg, true);
$col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
imagefill($logoimg, 0, 0, $col);
$white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); //for font color
$x = 0;
$y = $fontsize;
$angle = 0;
$bbox = imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); //fill text in your image
$boxWidth = $bbox[4] - $bbox[0];
$boxHeight = $bbox[7] - $bbox[1];
imagedestroy($logoimg);
//--------------------------------------------
// CREATE THE PNG
//--------------------------------------------
$imageWidth = abs($boxWidth);
$imageHeight = abs($boxHeight);
$logoimg = imagecreatetruecolor($imageWidth, $imageHeight);
imagealphablending($logoimg, false);
imagesavealpha($logoimg, true);
$col = imagecolorallocatealpha($logoimg, 255, 255, 255, 127);
imagefill($logoimg, 0, 0, $col);
$white = imagecolorallocate($logoimg, $rgbColors[0], $rgbColors[1], $rgbColors[2]); //for font color
$x = 0;
$y = $fontsize;
$angle = 0;
imagettftext($logoimg, $fontsize, $angle, $x, $y, $white, $font, $text); //fill text in your image
imagepng($logoimg); //save your image at new location $target
imagedestroy($logoimg);
}
}
참고: # 39 don& 사용할 경우, t [우주 레임워크] (https://github.com/karayabin/universe-snapshot) 이 줄을 교체할 수 있는 합니다.
$rgbColors = ConvertTool::convertHexColorToRgb($hexColor);
대체하십시오 코드:
$rgbColors = sscanf($hexColor, "%02x%02x%02x");
이 경우 해당 hex 참조색 정확히 6 자 롱 (don& 동일팔레트에 해시 기호 (#) 이 바로 앞에 # 39, t).
참고: 결국, 이 서비스를 이용할 수 있는 것은, 내가 더 글꼴색 추악한 않았다. 텍스트를 선택할 수 없습니다. 하지만 이 토론의 생각해봤죠 가치는 오직 이 코드를 공유할 수 있습니다.