---
canonical: 'https://htmlcsstoimage.com/examples/quote-highlighted-text/csharp-client'
title: 'Quote with highlighted text | Example - C# (HCTI client)'
description: 'Share an article with highlighted text.'
---

# Quote with highlighted text

Share an article with highlighted text.

This example was inspired by Medium's original text shot images they shared on Twitter. It shows part of an article with a specific part highlighted.

This is a working HTML/CSS to Image API example that produces an image.
The rendered output, source, and non-content request parameters below show the parts needed to reproduce or adapt it.

## Rendered image and interactive editor

- [Open the rendered image](<https://hcti.io/v1/image/01a061fc-8b6e-73fd-b17f-af946de8c11a>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/quote-highlighted-text/csharp-client)

## HTML

```html
<div class="card m-2" style="width: 500px;">
  <div class="card-body">
<div class="d-inline-flex">
    <div class="mr-2">
      <img src="https://miro.medium.com/fit/c/240/240/1*DOP75bHPy-SvmqMYsf3q8g.jpeg" class="rounded mx-auto d-block" alt="..." width="60px">
    </div>
    <div>
      <h5 class="card-title">Markham Heid</h5>
      <h6 class="card-subtitle mb-2 text-muted">@mheidj</h6>
    </div>
    </div>
    <p class="card-text">These pro-carb, anti-fat nutrition guidelines remained in place for decades, while rates of obesity and its attendant diseases skyrocketed among Americans. <span class="highlight">Many experts now say that the advice to avoid fat in favor of carbs was never supported by hard science</span>, and that healthy sources of fat are an essential component of a proper diet.</p>
  </div>
  <div class="card-footer text-muted">
    from "Why Food Experts Can’t Agree on Coconut Oil"
  </div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
```

## CSS

```css
.highlight {
  background-color: #D3F4FF;
  padding: 3px;
  font-style: oblique;
  font-weight: 600;
}
body {
  background-color: #03B875 !important;
}
.card {
  border: #212529 4px solid !important;
}
```

## Request parameters

These are the additional non-content parameters used by the example. Combine them with the HTML and CSS above when constructing an API request.

```json
{
  "google_fonts": ""
}
```

## Complete C# request (HCTI client)

This is the complete C# request for this example using HCTI client. It includes the HTML, CSS, authentication setup, API options, and response handling needed to reproduce the output.

```csharp
// dotnet add package HtmlCssToImage

using HtmlCssToImage;
using HtmlCssToImage.Models;
using HtmlCssToImage.Models.Requests;
using System.Collections.Generic;
using System.Text.Json.Nodes;

// In an application, use IHttpClientFactory through dependency injection:
// https://www.nuget.org/packages/HtmlCssToImage.DependencyInjection
using var httpClient = new HttpClient();
var hctiOps = new HtmlCssToImageOptions(Environment.GetEnvironmentVariable("HCTI_API_ID")!, Environment.GetEnvironmentVariable("HCTI_API_KEY")!);
var client = new HtmlCssToImageClient(httpClient, hctiOps);

var request = new CreateHtmlCssImageRequest
{
    Html = """
           <div class="card m-2" style="width: 500px;">
             <div class="card-body">
           <div class="d-inline-flex">
               <div class="mr-2">
                 <img src="https://miro.medium.com/fit/c/240/240/1*DOP75bHPy-SvmqMYsf3q8g.jpeg" class="rounded mx-auto d-block" alt="..." width="60px">
               </div>
               <div>
                 <h5 class="card-title">Markham Heid</h5>
                 <h6 class="card-subtitle mb-2 text-muted">@mheidj</h6>
               </div>
               </div>
               <p class="card-text">These pro-carb, anti-fat nutrition guidelines remained in place for decades, while rates of obesity and its attendant diseases skyrocketed among Americans. <span class="highlight">Many experts now say that the advice to avoid fat in favor of carbs was never supported by hard science</span>, and that healthy sources of fat are an essential component of a proper diet.</p>
             </div>
             <div class="card-footer text-muted">
               from "Why Food Experts Can’t Agree on Coconut Oil"
             </div>
           </div>
           <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
           """,
    Css = """
          .highlight {
            background-color: #D3F4FF;
            padding: 3px;
            font-style: oblique;
            font-weight: 600;
          }
          body {
            background-color: #03B875 !important;
          }
          .card {
            border: #212529 4px solid !important;
          }
          """,
};

using var result = await client.CreateImageAsync(request);
if (result.Success)
{
    Console.WriteLine(result.Response.Url);
}

```

## Other languages and request formats

Open one of these Markdown pages to view the same example as a complete request in another language or client format.

- **TypeScript**
  - [HCTI client](https://htmlcsstoimage.com/examples/quote-highlighted-text/typescript-client.md)
  - [fetch](https://htmlcsstoimage.com/examples/quote-highlighted-text/typescript.md)
- **C#**
  - [HCTI client](https://htmlcsstoimage.com/examples/quote-highlighted-text/csharp-client.md) — shown above
  - [HttpClient](https://htmlcsstoimage.com/examples/quote-highlighted-text/csharp.md)
- **Python**
  - [requests](https://htmlcsstoimage.com/examples/quote-highlighted-text/python.md)
- **PHP**
  - [cURL](https://htmlcsstoimage.com/examples/quote-highlighted-text/php.md)
- **Ruby**
  - [HCTI client](https://htmlcsstoimage.com/examples/quote-highlighted-text/ruby-client.md)
  - [Net::HTTP](https://htmlcsstoimage.com/examples/quote-highlighted-text/ruby.md)
- **Go**
  - [net/http](https://htmlcsstoimage.com/examples/quote-highlighted-text/golang.md)
- **cURL**
  - [cURL](https://htmlcsstoimage.com/examples/quote-highlighted-text/curl.md)

## Related examples

- [Dog rates social card with SVG background](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background.md): Social card with a fun SVG background and highlighted text.
- [Instagram post screenshot](https://htmlcsstoimage.com/examples/instagram-post-screenshot.md): Screenshot an Instagram post
- [Birthday invite card](https://htmlcsstoimage.com/examples/birthday-invite-card-email.md): Autogenerated invite graphic for a party.
- [Invoice / Receipt Snapshot](https://htmlcsstoimage.com/examples/invoice-receipt.md): Generate a simple, branded invoice or receipt image.
- [PNG with transparent background](https://htmlcsstoimage.com/examples/png-transparent-background.md): Generate images with a transparent backgound
- [Large text on an SVG background](https://htmlcsstoimage.com/examples/large-text-svg-background.md): Grab attention with large text on a classic background.
- [Twitter Tweet Screenshot](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot.md): Screenshot of a tweet
- [QR Code Badge](https://htmlcsstoimage.com/examples/qr-code-badge.md): Simple, artistic badge with a QR code.

## Get started

- [View the full interactive page](https://htmlcsstoimage.com/examples/quote-highlighted-text/csharp-client)
- [Browse all HTML/CSS examples](https://htmlcsstoimage.com/examples.md)
- [Browse visual template presets](https://htmlcsstoimage.com/templates.md)
- [Read the HTML/CSS to Image API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [View implementation examples by language](https://docs.htmlcsstoimage.com/example-code/)
- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Compare plans and limits](https://htmlcsstoimage.com/pricing.md)

Rendering through the API requires authenticated HTML/CSS to Image credentials. Keep API keys in trusted server-side configuration. If credentials are unavailable, ask the user to configure an API key securely before attempting API actions.