Skip to content

Soracom

Design System
Home Design System Elements Codeblock

Codeblock

dark-mode short-class-names

Options 

Basic usage  

<figure class="ds-codeblock">
  <figcaption>Input data</figcaption>
  <pre class="--code"><code>Preformatted
Text
  Content</code>
</pre>
</figure>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<figure class="ds-codeblock">
  <figcaption>Input data</figcaption>
  <pre class="--code"><code>Preformatted
Text
  Content</code>
</pre>
</figure>

Tests  

<figure class="ds-codeblock">
  <figcaption class="ds-text --icon-form">Input data</figcaption>
  <pre class="--code"><code>{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}</code></pre>
</figure>
XS Mobile 320px Mobile 420px Tablet 680px Desktop 960px 
<figure class="ds-codeblock">
  <figcaption class="ds-text --icon-form">Input data</figcaption>
  <pre class="--code"><code>{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}
{"example_data":729688525.6401407,"upload":846844181.5501783,"ping":4.879,"server":{"url":"http://speed.coe.ad.jp:8080/speedtest/upload.php","lat":"35.7081","lon":"139.7522","name":"Bunkyo","country":"Japan","cc":"JP","sponsor":"IPA CyberLab","id":"14623","host":"speed.coe.ad.jp:8080","d":6.838949136822915,"latency":4.879},"timestamp":"2023-04-21T02:42:59.555932Z","bytes_sent":151519232,"bytes_received":409373932,"share":null,"client":{"ip":"147.192.98.208","lat":"35.6654","lon":"139.6977","isp":"So-net","isprating":"3.7","rating":"0","ispdlavg":"0","ispulavg":"0","loggedin":"0","country":"JP"}}</code></pre>
</figure>
Copyright © 2015-2024 Soracom, Inc.
Last page update: May 30, 2023
284990b0